13 Useful JavaScript Solutions for Charts and Graphs

By / Feb 9, 2010 / Resources
shares

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

graphs

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

graphs

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

graphs

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

graphs

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

graphs

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

graphs

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

milkchart

graphs

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

graphs

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

Moochart

graphs

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

graphs

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

graphs

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

graphs

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

graphs

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.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

23 Comments

  1. Myo Kyaw Htun
    February 9, 2010

    You missed out Google Visualization API … http://code.google.com/apis/visualization/

    Reply
  2. Jordan Walker
    February 9, 2010

    Always a great way to present information to clients with charts.

    Reply
  3. Brian Egan
    February 9, 2010

    I would add one more excellent option to this list: gRaphael (based on the Raphael JS Library).

    http://g.raphaeljs.com

    Reply
  4. Jim Hanifen
    February 9, 2010

    Great list, I love visualization. Highcharts really stood out to me.

    Reply
  5. Johnny
    February 9, 2010

    Great post :)

    Reply
  6. New York Web Designer
    February 9, 2010

    Thanks for putting together this awesome List…

    I appreciate it

    Reply
  7. Nick Pettit
    February 9, 2010

    There certainly are a lot of choices out there for charts and graphs. Thanks for posting this article, there were a lot here that I hadn’t even heard of.

    We actually just did an episode about this not too long ago, over on Doctype:
    http://doctype.tv/charts

    Reply
  8. Ajay
    February 10, 2010

    Great post! Thanks.

    Reply
  9. SM
    February 10, 2010

    Good collection. Thanks

    Reply
  10. Jerome
    February 11, 2010

    Hey Guys, do you know some JS tools to display data on maps? I only heard about Google Vizualization API but maybe there’s more.

    Reply
    • Aaron
      March 2, 2010

      have a look at amMap http://www.ammap.com/

      Reply
  11. Aaron
    March 2, 2010

    I can’t belive u left out amCharts

    http://www.amcharts.com/

    @Jerome have a look at amMap http://www.ammap.com/

    Reply
    • Pete
      March 12, 2010

      amCharts isn’t Javascript, it’s Flash.

      Reply
  12. Intiqab Rawoof
    May 3, 2010

    Great Post…. Thanks!!

    Reply
  13. 131bz
    September 1, 2010

    Great post,but which one should I choose.

    Reply
  14. Richard
    July 3, 2011

    Another is RGraph (http://www.rgraph.net) – it’s a canvas based charts implementation. Roughly 20 different base chart types supported and free for non-commercial use.

    Reply
  15. Siddharth
    October 26, 2011

    Fusion charts isnt so bad either..but then again flash based :)
    good for client presentations

    http://www.fusioncharts.com/free/gallery/

    Reply
  16. Alex Sage
    November 7, 2011

    and here is another javascript graphing library Active Graphs and Charts
    http://www.jpowered.com/graph_chart_collection/

    Full cross browser support including IE 6.0, 7.0, 8.0, Chrome, Firefox, Safari and Opera.

    Reply
  17. Jos
    November 28, 2011

    Here is another javascript visualization library containing a timeline, graph, graph3d, network, and treegrid:
    http://links.sourceforge.net

    The library is open source and works in all browsers.

    Reply
  18. Dipanjan Roy
    April 11, 2012

    This was really informative. Got a clear view. Fusion charts is also into the business of making charts and graphs and they are really good. http://www.fusioncharts.com/

    Reply
  19. Gemma Gibert
    April 11, 2012

    Another chart you might like to take a look at, TeeChart, 100% Javascript Charting Library: http://www.steema.com/teechart/html5

    Demo : http://www.steema.com/files/public/teechart/html5/jscript/demos/

    Regards!
    Gemma

    Reply
  20. Maciej Pleśnar
    October 2, 2013

    We’ve recently created a javascript webgl lib for 3D charts: http://incharts3d.com

    Reply
  21. John
    November 8, 2014

    You can also check out our Infographic Charts and Graphics HTML Tags Library:

    http://codecanyon.net/item/infographic-charts-and-graphics-html-tags-library/6351274?ref=psddude

    It is a light-weight, pure JavaScript charting library (NO jQuery or other libraries required) which makes use of HTML5 technologies and works on all modern browsers including IE, Chrome, Firefox, Opera, Safari.

    Reply

Leave a Reply