General, Tools

Most Promising Free Javascript Charting Libraries and Plugins

Jun 25, 2009 insic 29 Comments

Free Javascript charting libraries

Nowadays presenting a complex graphical data in the web is never been easy with the help of charting libraries available in the web for free. Flash, Applet, Silverlight and especially Javascripts and a server side language like PHP, ASP, etc offers a free and quality solutions in creating web based charts.

Here I list down the most promising Free javascript charting libraries and plugins.

1 . Flot

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 is known to work with Internet Explorer 6/7/8 (IE8 only in development version), Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+. If you find a problem, please report it. Drawing is done with the canvas tag introduced by Safari and now available on all major browsers, except Internet Explorer where the excanvas Javascript emulation helper is used.

Syntax:

Go here for more iformation and samples.

2. fgCharting

fgcharting
fgCharting by Filamentgroup provides the easy solution of web data visualization. It uses jQuery and provides several types of graphs, such as Pie, Line, Area, and Bar.

Syntax:

Its placeholder uses a canvas html element.

Once we have jQuery and our charting library attached, we can convert our canvas elements into charts with the following line of javascript:

3. jQuery Sparklines

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 and Internet Explorer 6, 7 & 8.

Each example displayed below takes just 1 line of HTML or javascript to generate.

The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License.

Syntax:

Values can either be an array of numbers or “html” which causes the values to be read from from the selected tag:

Options is an object that specifies the type of sparkline to draw, colours to use, etc

4. jqPlot

jqPlot

jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages.

jqPlot requires jQuery (tested with 1.3.2 or better). jQuery 1.3.2 is included in the distribution. To use jqPlot include jquery, the jqPlot jQuery plugin, jqPlot css file and optionally the excanvas script for IE support in your web page:

Basic Syntax:

Add a container (target) to your web page where you want your plot to show up. Be sure to give your target a width and a height:

Sample js code:

5. TufteGraph

tuftegraph

TufteGraph is another jQuery charting plugin which claims to be different from other javascript charting libraries because fo the following reasons:

  • Configuration is by dynamic functions, allowing for really compact API (very few options)
  • Non-core layout is done via CSS rather than code

See here for more details.

6. jQuery Google Charting

google

A jQuery plugin that sets a division to request a Google chart.

Sample Code:

7. Protochart

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.

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!

Go to ProtoChart homepage for more details.

8. JSXGraph

jsxGraph
JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser. It is implemented completely in JavaScript and uses SVG and VML.
JSXGraph is easy to embed and has a small footprint: only about 55 KB if embedded in a web page. No plug-ins are required! JSXGraph uses the JavaScript libraries/frameworks Prototype or jQuery.

Features:

  • Euclidean Geometry: Points, lines, circles, intersections, perpendicular lines, angles
  • Curve plotting: Graphs, parametric curves, polar curves, data plots
  • Turtle graphics
  • Lindenmayer systems
  • Interaction via sliders
  • Animations
  • Polynomial interpolation, spline interpolation
  • Tangents, normals
  • Initial support for charts
  • Vectors

9. Protovis

protovis
Protovis is a visualization toolkit for JavaScript using SVG. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. For example, this simple bar chart visually encodes an array of numbers with height:

More information about Protovis.

10. PlotKit

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.

Sample Syntax:

I know there is still a lot of JS charting libraries out there that I didn’t know. So feel free to drop me a comment for your suggestions and I am glad to try it.

Subscribe to my RSS feeds for more info that might usefull to you.

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

  • http://johnpwood.net John Wood

    If you like Flot, but can’t use jQuery for one reason or another, check out Flotr (http://code.google.com/p/flotr/).  It’s Flot’s Prototype based cousin.  The options are virtually identical.  It’s a very nice library.

  • http://reboltutorial.com reboltutorial

    Great list ! But none with Barchart or Candlestick Plot for Stock Market ?

  • http://www.viteb.com/ Offshore Outsourcing

    Wow, it is truly informative. You have nicely described about JavaScript Charting Libraries and Plugins.

  • Pingback: Librerías para generar gráficas con Javascript | aNieto2K

  • Pingback: Librerías para generar gráficas con Javascript : Blogografia

  • http://www.greyrobot.com Diego

    Wow some of these js charts are pretty sick! Specially the google chart libraries. Thanks for the info!

  • http://www.sendrakhitoindians.com/ Online Rakhi Store

    Great stuff! Especially Google libraries.

  • http://farinspace.com Dimas

    Nice selection, Flot and sparklines are impressive, a good combination hope they work together well …

  • http://nwagi.com Ashish Lohorung Rai

    i didn’t know about javascript charting..

  • http://blog.zeemp.com Paulo Miranda

    Dojo toolkit has not been featured here. It has got amazing charting capabilities.

    http://www.dojotoolkit.org

    Tutorial: http://www.sitepen.com/blog/2008/06/06/a-beginners-guide-to-dojo-charting-part-1-of-2/

    Nice post, congrats!

  • http://www.mtbc.com/cchit-emr.aspx EMR

    Nice and informative post.

  • http://m111m.net mms

    Wow
    very nice

  • http://www.emphaticdigital.com khaynes

    Quality post showing important differences between libraries. Nice representative list as well.

  • http://www.highcharts.com Highcharts

    Check out http://www.highcharts.com!

    It is written completely in JavaScript, utilizing Canvas, VML and to a limited extent SVG.

  • http://laceweddingdresses.org lace wedding dresses

    Thanks for the great guidelines about Libraries and Plugins !

  • Martyn

    I am also surprised to see that Dojo has not been given a look in here.

    Nice post.

  • Pingback: uberVU - social comments

  • http://night-fairy-tales.com/ SM

    Nice collection. Thanks

  • Pingback: links for 2010-03-14 - Marco Gabriel

  • http://www.joomlawebsitedevelopment.com Joomla Website Development

    Really nice, I was not knowing that all of this is possible through Java Script

  • http://www.sendrakhistoindia.com/ Send Rakhi to India

    Nice to see this, a true guidance for exploring knowledge of JavaScript

  • Inga

    One more addition to extend the list – dhtmlx Charts.

  • David

    Wikipedia has a nice breakdown of all available charting options:

    http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

    Nice Writeup!

  • David

    And checkout these JavaScript Charts from TechOctave. 100% JavaScript Charts using Raphael.js, SVG and VML with no framework dependencies. Looks pretty sweet too!

  • http://www.fusioncharts.com/ FusionCharts

    A nice list really and it could be a true guidance for exploring knowledge for JavaScript. But I am real dilemma whether the free charts have all the services and plugins available to niche work. However, different charting components have different requirements and thus different applications. Have used FusionCharts (http://www.fusioncharts.com/)for quite a bit time and found it flexible across browsers and server side scripts.

  • Web Redesign

    Thanks for the sharing list

  • Afixi Technologies

    great list and a true guide for exploring the knowledge in Java script..

    http://goo.gl/WM7Y1D

  • http://www.halwits.com/ Halwits IT Solutions

    Very impressive post. Really a good list of JavaScript libraries and plugins you have shared which is very helpful for coding. Thanks a lot.