Henry Jones

13 Useful JavaScript Solutions for Charts and Graphs

Graphs and charts are used to simplify complex data and make it easy to read and understand. So it really wouldn’t make sense if it was difficult to integrate a graph into a website. Thanks to Javascript and a bunch of talented developers, we have at our disposal solutions for easily adding graphs and charts to our web projects. Here are 13 of these, including some written for jQuery and MooTools, that you will find very useful.

Highcharts

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, areaspline, column, bar, pie and scatter chart types.

JS Charts

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. Moreover, JS Charts is free for non-commercial use.

PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is fully documented and there is a quick tutorial to get you started.

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.

jQuery Visualize Plugin

This plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

jqPlot

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

milkchart

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

Canvas 3D Graph

Canvas 3D Graph is a special type of bar graph that plot numbers in 3D.

Moochart

Moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

TufteGraph

TufteGraph allows configuration by dynamic functions, allowing for a really compact API, and uses a non-core layout is done via CSS rather than code.

ProtoChart

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

flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (Internet Explorer where the excanvas Javascript emulation helper is used).

Protovis

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.

Related Posts

Here's some other articles that you will definitely find useful.

10 Useful Website Analytics Tools

12 Alternative Web Browsers You Should Try

13 Useful Google Chrome Extensions for Web Developers

Useful Tools for Testing Cross Browser Compatibility

Seven Useful Web Development Tips & Tools for Cross-Compatibility