30 High Quality Charts & Graphs for Web Developers

Charts and graphs are present on various types of websites in order to improve the user experience and display data in an easy way to the visitors. These charts and graphs can be created using technologies like PHP, Flash, JavaScript (jQuery, MooTools, Prototype) and CSS, but you don’t have to reinvent the wheel unless you have a lot of time at your disposal. What you can do is download and use these following charts and graphs made by web developers.

AwesomeChartJS

AwesomeChartJS Chart and Graph for Web Developers to Download

AwesomeChartJS is a simple JavaScript charting library that can be used to create charts based on the HTML 5 canvas element.

The main goal during development was to pick sane defaults in order to let the user create simple charts quickly with just a couple of lines of code.

One can create at almost no time bar, pie, doughnut and Pareto charts.

jqBarGraph

jqBarGraph Chart and Graph for Web Developers to Download

jqBarGraph is a jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Of course, there are a lot of settings to tune appearance of your graph, as are animation, color scheme, dimensions etc. Also, you can additionally change look and feel of graph via CSS.

Visifire

Visifire Chart and Graph for Web Developers to Download

Visifire is a set of data visualization controls – powered by Microsoft Silverlight & WPF. Visifire is a multi-targeting control which can be used in both WPF & Silverlight applications. Use the same API to create charts & gauges in Mobile, Web & Desktop environments. Visifire Silverlight Controls can also be embedded in any webpage as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with ASP, ASP.Net, SharePoint, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML.

Arborjs

Arborjs Chart and Graph for Web Developers to Download

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible.

HumbleFinance

HumbleFinance Chart and Graph for Web Developers to Download

HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on finance.google.com. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.

RGraph

RGraph Chart and Graph for Web Developers to Download

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line chart, meter, odometer, pie chart, progress bar, rose chart, scatter graph and traditional radar chart

mooBarGraph

moobargraph Chart and Graph for Web Developers to Download

mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6.

This is jqBarGraph on steroids. It has almost all jqBarGraph possibility, plus some new features, like URL bars, info boxes, negative values, AJAX data loading…

gRaphaël

gRaphaël Chart and Graph for Web Developers to Download

gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action.

gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

canvasXpress

canvasXpress Chart and Graph for Web Developers to Download

CanvasXpress is a JavaScript library based on the tag implemented in HTML5. I developed this library as the core visualization component for our BMS systems biology platform.

The basic idea was to have generic and simple way to display genomics data. CanvasXpress supports bar graphs, line graphs, bar-line combination graphs, boxplots, dotplots, area graphs, stacked graphs, percentage-stacked graphs, heatmaps, heatmaps, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots, pie charts, correlation plots, Venn diagrams, networks (or pathways), candlesticks plots and genome browser.

It also supports a few data transformations like log and exponential transformation, z-score, percentile transformation, ratios and transposing. It also support grouping of samples, hierarchical clustering, kmeans, complex layouts, regression lines, normal distribution plots, non linear fitting, zooming, events … well, there a lot more features but maybe at this time I already capture your attention.

Timeplot from Simile Widgets

Timeplot from Simile Widgets Chart and Graph for Web Developers to Download

Timeplot is a DHTML-based AJAX widget for plotting time series and overlay time-based events over them (with the same data formats that Timeline supports)

Visualize

Visualize Chart and Graph for Web Developers to Download

The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization. For example, table row data values serve as chart bars, lines or pie wedges; table headers become value and legend labels; and the title and caption values provide title labels within the image. Visualize also automatically checks for the highest and lowest values in the chart and uses them to calculate x-axis values for line and bar charts. Finally, the plugin includes two different CSS styles — one light and one dark — that can be used as is, or can serve as a starting point to customize chart and graph presentation to match any application style.

Protovis

protovis Chart and Graph for Web Developers to Download

Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction.

jqPlot

jqPlot Chart and Graph for Web Developers to Download

jqPlot is a plotting and charting plugin for the jQuery JavaScript framework. jqPlot produces beautiful line, bar and pie charts with many features:

  • Numerous chart style options.
  • Date axes with customizable formatting.
  • Up to 9 Y axes.
  • Rotated axis text.
  • Automatic trend line computation.
  • Tooltips and data point highlighting.
  • Sensible defaults for ease of use.

CSS Stacked Bar Graphs

CSS Stacked Bar Graphs Chart and Graph for Web Developers to Download

There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs.

ProtoChart

ProtoChart Chart and Graph for Web Developers to Download

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

Features:

  • Line, bar, pie, curve, mix, and area charts available
  • Multiple data series on same graph
  • Highly customizable legend support
  • Customizable grid, grid border, background
  • Customizable axis-tick values (both x and y)
  • Supports: IE6/7, FF2/3 and Safari
  • Even works on an iPhone!

MilkChart

MilkChart Chart and Graph for Web Developers to Download

A simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 tag and is only supported on browsers other than IE until ExCanvas gets proper text support.

Pure Css Line Graph

Pure Css Line Chart and Graph for Web Developers to Download

What are they good for? I will mention just one reason, and leave other advantages or downsides for a debate: users scan your page, they don’t read every word and number you write. Line graphs will deliver information much faster then a table filled with numbers.

pChart

pChart Chart and Graph for Web Developers to Download

pChart is a PHP class oriented framework designed to create aliased charts. Most of today’s chart libraries have a cost, our project is intended to be free. Data can be retrieved from SQL queries, CSV files, or manually provided. This project is still under development and new features or fix are made every week.

Focus has been put on rendering quality introducing an aliasing algorithm to draw eye candy graphics. Rendering speed has been dramatically enhanced since the first version, we’ll still continue optimising the code!

dygraphs

dygraphs Chart and Graph for Web Developers to Download

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.

Bluff

Bluff Chart and Graph for Web Developers to Download

Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy of JS.Class and a copy of Google’s ExCanvas to support canvas in Internet Explorer. Both these scripts are supplied with the Bluff download. Bluff itself is around 11Kb gzipped.

dhtmlxGantt

dhtmlxGantt Chart and Graph for Web Developers to Download

Use our open source Gantt chart to illustrate a project schedule. You may show the dependency relationships between activities as lines between those activities. Current schedule status can be seen at a glance with percent-complete shadings. Projects, tasks, and activities are comfortably organized into a tree structure (left of the Gantt chart), which can be expanded/collapsed by a single mouse click. Mouseover popups show detailed activity properties.

JpGraph

JpGraph Chart and Graph for Web Developers to Download

JpGraph is an Object-Oriented Graph creating library for PHP >= 5.1 The library is completely written in PHP and ready to be used in any PHP scripts (both CGI/APXS/CLI versions of PHP are supported).

Smoothie Charts

Smoothie Chart and Graph for Web Developers to Download

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching charts jerkily updating every second. What you’re looking at now is pretty much all it does

DDChart

DDChart Chart and Graph for Web Developers to Download

Features:

  • Automatic Data Navigation
  • Animations
  • Liquid Layout
  • JSON Compatible
  • jQuery UI Compatible

Grafico javascript charting library

Grafico Chart and Graph for Web Developers to Download

Grafico is a JavaScript charting library based on Raphaël and Prototype.js. It is originally developed as Ico by Alex Young, but this version was developed by Kilian Valkhof at Wakoopa. Grafico’s basic principles are to provide good, clean looking graphs inspired by work of Stephen Few and Edward Tufte, while still being flexible to implement and providing numerous API options to tweak the look of the graphs.

Axiis

Axiis Chart and Graph for Web Developers to Download

Axiis is an open source data visualization framework designed for beginner and expert developers alike.
Whether you are building elegant charts for executive briefings or exploring the boundaries of advanced data visualization research, Axiis has something for you.

Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations.
Axiis is built upon the Degrafa graphics framework and Adobe Flex 3.

JS Charts

JS Charts Chart and Graph for Web Developers to Download

JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs.

InfoVis

InfoVis Chart and Graph for Web Developers to Download

The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.

TufteGraph

TufteGraph Chart and Graph for Web Developers to Download

Highcharts

Highcharts Chart and Graph for Web Developers to Download

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, area spline, column, bar, pie and scatter chart types.

Highcharts is solely based on native browser technologies and doesn’t require client side plugins like Flash or Java. Furthermore you don’t need to install anything on your server. No PHP or ASP.NET. Highcharts needs only two JS files to run: The highcharts.js core and either the jQuery or the MooTools framework. One of these frameworks is most likely already in use in your web page.

Posted by: - Wed, Mar 23, 2011. This article has been viewed 6886 times.
Online URL: https://www.articlediary.com/article/30-high-quality-charts-graphs-for-web-developers-872.html

Powered by PHPKB (Knowledge Base Software)