29.Jul 2009 Benjamin Wiederkehr Tools ,

16 Javascript Libraries for Visualizations

As data visualization often needs to reach a broad audience the browser is becoming the number one tool to publish and share visualizations. A lot of visualizations require user-interaction to unleash their full potential, thus interactive applets that run directly in the browser are a a great way to analyze the data at hand. Beside the usual suspects like Flash, Silverlight and Processing, JavaScript is quickly gaining ground in the field of interactive visualization embedded in websites. We’ve collected 13 16 JavaScript visualization libraries that help you get started faster, keep it flexible and develop with higher reliability.

Processing.js

processing_jsProcessing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Runs in
Safari, Firefox, Chrome, Opera, IE
Uses
Canvas tag / IE Canvas tag
Link
http://processingjs.org/

Raphaël

raphaelRaphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.

Runs in
Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
Uses
SVG, VML
Link
http://raphaeljs.com

JavaScript InfoVis Toolkit

thejitThe JavaScript InfoVis Toolkit is a complete set of tools to create Interactive Data Visualizations for the Web. It includes JSON loading, animation, 2D point and graph classes and some predefined tree visualization methods.

Runs in
IE6+, Firefox2+, Safari3+, Opera9.5+
Uses
Canvas tag
Link
http://thejit.org/

Protovis

jitProtovis 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.

Runs in
Firefox 3, Chrome and Safari 4
Uses
SVG
Link
http://vis.stanford.edu/protovis/

jQuery Sparklines

jquery_sparklinesjQuery Sparklines is a jQuery plugin that generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

Runs in
Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6, 7 & 8
Uses
Canvas tag
Link
http://omnipotent.net/jquery.sparkline/

Primer

primerPrimer is a tiny JavaScript library that simplifies the workflow of creating graphics right in the HTML using the object. Simply create a Primer() object in a DIV of your choice and then you’re ready to start drawing.

Runs in
Firefox 2+, Safari 3+, Opera 9
Uses
Canvas tag
Link
http://github.com/mojombo/primer/tree/master

Flot

flotFlot 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.

Runs in
Firefox 2.x+, Safari 3.0+, Opera 9.5+, Konqueror 4.x+, IE 6/7/8
Uses
Canvas tag
Link
http://code.google.com/p/flot/

jQuery Google Charts

jquerychartsjQuery Google Charts is a jQuery Plugin for producing visualizations using the Google Charts API.

Runs in
Image- and JS-ready browsers
Uses
Image tag
Link
http://www.maxb.net/scripts/jgcharts/

jQ Chart

jqchartjQ Chart is another jQuery Plugin for creating canvas based visualizations. Unfortunately the documentation is only partly written in english languge.

Uses
Canvas tag
Link
http://jsgt.org/lib/jquery/plugin/jqchart/

TufteGraph

tuftegraphTufteGraph is a jQuery Plugin that lets you create graphs. There are no predefined layout structures – everything is set via Cascading Style Sheets.

Tested in
Firefox 3 and Safari 3
Uses
SVG & CSS
Link
http://xaviershay.github.com/tufte-graph/

jqPlot

jqplotjqPlot 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.

Runs in
IE 6, IE 7, IE 8, Firefox, Safari, and Opera
Uses
Canvas tag
Link
http://www.jqplot.com/

jQuery Visualize

visualizeVisualize 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.

Runs in
Firefox, Safari, and Opera
Uses
Canvas tag
Link
http://www.filamentgroup.com/lab/

MooWheel

moowheelThe purpose of the moowheel script is to provide a unique and elegant way to visualize data using Javascript and the object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise.

Runs in
Firefox, Safari, and Opera
Uses
Canvas tag / IE canvas tag
Link
http://www.unwieldy.net/projects/moowheel/

UPDATE:

DojoX.Charting

dojo_xdojox.charting provides many common chart types–including line, bar, area and pie charts– and gives you the flexibility to mix many types of charts for unprecedented visualization.

Runs in
Firefox, Safari, Opera, IE
Uses
SVG
Link
http://dojotoolkit.org/projects/dojox

PlotKit

plot_kitPlotKit 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.

Runs in
Firefox, Safari, Opera, IE6
Uses
SVG & Canvas
Link
http://www.liquidx.net/plotkit/

Flotr

flotrFlotr is a javascript plotting library based on the Prototype Javascript Framework 1.6+. It enables you to draw appealing graphs in most modern browsers with an easy to learn syntax. The currently supported chart types are: Histograms (vertical, horizontal, stacked bars), Lines (filled or not), Points (scatter plots), Pie chart, Candle sticks (and barcharts), Radar chart, Markers (positioned text).

Runs in
Firefox 2+, Safari 3+, Chrome 1.0+ Opera 9+ and IE6+.
Uses
Canvas / VML
Link
http://code.google.com/p/flotr/

Help us complete this list!

Did we miss your favourite library? Please share your input in the comments.

Share this article

Subscribe for more

Subscribe with RSS Join our 4507 Readers
  • Jeremy

    Great collection, Benjamin! I needed something like this two weeks ago. I like Protovis for it’s simplicity, but unfortunately it lacks IE support.

    Now how about an in-depth review of each toolkit ;)

  • http://www.twitter.com/jcukier jerome cukier

    awesome list!!!

    this reminds me of this post put together by Guy Kawasaki’s team on javascript animation libraries
    http://om.ly/?qGS

    visualization + animation for the win!

  • http://sovit.biz/13-javascript-libraries-for-visualizations-on-datavisualizationch/ 13 Javascript libraries for visualizations on Datavisualization.ch

    [...] original here: 13 Javascript libraries for visualizations on Datavisualization.ch SHARETHIS.addEntry({ title: "13 Javascript libraries for visualizations on Datavisualization.ch", [...]

  • http://artillery.ch Benjamin Wiederkehr

    @Jeremy: You’re very welcome to write a guest post about the work process for each library. Okay, maybe we should rather start with a post about your favourite library?

    @Jérôme: Thanks. Some of the libraries already provide tools for animation as well.

  • http://www.javascriptbank.com Free JavaScript Code

    very cool & good tip, thank you very much for sharing.

    Can I share this tut on my JavaScript library?

    Awaiting your response. Thank

  • http://rapid-dev.net/2009/07/13-libraries-for-doing-data-visualization-in-javascript/ 13 Libraries For Doing Data Visualization in JavaScript | rapid-DEV.net

    [...] 13 Libraries For Doing Data Visualization in JavaScript: (via JSRoll) [...]

  • http://millionaire.websitesuperhero.com/2009/07/30/13-javascript-libraries-for-visualizations-on-datavisualizationch/ 13 Javascript libraries for visualizations on Datavisualization.ch

    [...] See the rest here: 13 Javascript libraries for visualizations on Datavisualization.ch [...]

  • http://business.swivel.com Gerad Suyderhoud

    How about dojoX charting? http://dojotoolkit.org/projects/dojox

    We use it for Swivel, and it’s awesome. See some examples of community created dojo charts at http://business.swivel.com/public

  • http://artillery.ch Benjamin Wiederkehr

    Thanks for the suggstion Gerard. Your dojoX usage looks impressive. I’ll add it gladly to the list.

  • http://www.google.com/profiles/mazzoni.daniele Daniele Mazzoni

    I made some tests about java/javascript(jquery) charts libraries too, I wrote about it just today, if you want to take a look:
    http://usingmypc.blogspot.com/2009/08/charts-test-per-una-web-application.html

  • http://www.netcrema.com/?p=9661 13 Javascript libraries for visualizations on Datavisualization.ch « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

    [...] 13 Javascript libraries for visualizations on Datavisualization.chdatavisualization.ch [...]

  • http://wectar.com Martin

    Good morning,

    as part of the flare.prefuse,org I am huge fan of whatever Jeff Heer (protovis) does. Concerning even more javascript graph libs (among some we see here already) wectar relaticious reveals some more

    http://wectar.com/relaticious?yups=http://www.datavisualization.ch/tools/13-javascript-libraries-for-visualizations

    I leave to the interested reader to see which one are worse trying (addicted to flare so not (yet) into js vis stuff)

    Happy visualizing

    martin

  • http://wectar.com Martin

    hups – in the previous post I meant

    “as part of the flare.prefuse.org COMMUNITY”

    i am not part of the team …

    thanks

    martin

  • http://webdesign.populoo.com/2009/07/29/13-javascript-libraries-for-visualizations-on-datavisualization-ch/ 13 Javascript libraries for visualizations on Datavisualization.ch

    [...] Read the original here: 13 Javascript libraries for visualizations on Datavisualization.ch [...]

  • http://www.badsoda.com Thomas

    Hi there.

    You missed out on PlotKit (http://www.liquidx.net/plotkit/). This library produces bar, line and pie charts. Supports IE6+, FF, etc. using the canvas tag (and IE Canvas).

    There’s also:
    - JS Graphics (http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm)
    - Ajax MGraph (http://dragan.yourtree.org/blog/en/2007/03/31/ajax-mgraph/)

    Hope this is useful,
    Thomas

  • http://artillery.ch Benjamin Wiederkehr

    Thanks for the suggested libraries, Thomas. I wasn’t aware of these and I’ll gladly add them to the list.

  • http://www.badsoda.com Thomas

    My pleasure :-)

  • http://bionbi.blogspot.com Byron Igoe

    All of these are client-side only, using some Canvas or SVG magic. Have you tried Style Chart? http://chart.inetsoft.com

    There are 3 options: call the hosted rendering server remotely; save the script to the remote server and reference it as an image; download and run your own rendering server. With all 3, the types of possible charts are much more sophisticated, and it renders a PNG image.

    -Byron

  • http://artillery.ch Benjamin Wiederkehr

    Thanks for the suggestion Byron. The visualization methods are diverse and plentiful and the produced diagrams use sophisticated layouts. Interactivity isn’t possible with a static PNG though which is a bit of a restriction.

  • http://bionbi.blogspot.com Byron Igoe

    True, which is why there’s also http://visualizefree.com which uses the same chart engine, but provides a visual building process, and interactive elements.

  • http://www.phenxdesign.net Fabien Ménager

    Hello, this is a good list of JS libraries, but I would add another one : Flotr which is based on both PrototypeJS and Mootools :

    Runs in
    Firefox 2+, Opera 9.2+, IE6+ (with ExCanvas), Safari 3+ and Chrome
    Uses
    Canvas tag
    Link
    http://code.google.com/p/flotr/

    Example page : http://phenxdesign.net/projects/flotr/examples/prototype/
    I think a good point of this library is the Playground (a very interactive configurator) : http://phenxdesign.net/projects/flotr/playground/

  • http://blog.balinsbooks.com/2009/08/31/13-javascript-libraries-for-visualizations-on-datavisualization-ch/ Mile Wide… Inch Deep… » 13 Javascript libraries for visualizations on Datavisualization.ch

    [...] 13 Javascript libraries for visualizations on Datavisualization.ch. Categories: Data Visualization, Programming, Website Tags: JavaScript Comments (0) Trackbacks (0) Leave a comment Trackback [...]

  • http://www.datavisualization.ch/quicknotes/more-javascript-visualization-libraries More Javascript Visualization Libraries on Datavisualization.ch

    [...] Javascript Visualization Libraries Thanks to the much appreciated additions to the list of Javascript Visualization Libraries, I’ve been able to include some more excellent libraries. DojoX is a full fledged library in [...]

  • http://www.datavisualization.ch/tools/highcharts-javascript-library Highcharts, Impressive Javascript Library on Datavisualization.ch

    [...] The graphics are rendered using the Canvas tag or occasionally SVG & VML. The supported browsers are Safari, Firefox, Opera, Internet Explorer+ and it also runs great on the iPhone. The default skin for the visualizations does quite a good job regarding readybility and clarity. Unfortunately there are some Powerpoint-esque skins as well (please, just cut them out). One really nice feature is the zoomable timeseries, which I haven’t seen before in any Javascript library. [...]

  • http://danvk.org/dygraphs Dan Vanderkam

    I’d also suggest dygraphs (http://www.danvk.org/dygraphs/), an open-source JS library for creating interactive charts of time series. It’s designed to be lightweight, responsive and easy to use.

    Works in all major browsers (excanvas needed for IE). Supports zooming, error bands/confidence intervals, rolling averages and the Google Visualization API.

  • Dan Vanderkam

    Looks like that link didn’t come out quite right: http://danvk.org/dygrahps/

  • Dan Vanderkam

    Looks like that link didn’t come out quite right: http://danvk.org/dygraphs/

  • http://www.badsoda.com Thomas

    Hi again.

    Just to keep this list up to date there’s also: HighCharts

    Runs in: Firefox, Safari, IE (6+), Chrome and Opera
    Supports: line, spline, area, areaspline, column, bar, pie and scatter chart types
    Uses: Canvas, VML, SVG
    Link: http://www.highcharts.com/
    Review: http://www.datavisualization.ch/tools/highcharts-javascript-library

  • http://artillery.ch Benjamin Wiederkehr

    Thanks for the suggestion, Thomas. HighCharts looks very promising. Defenitely a sodi addition to the list!

  • http://data-visualization.webglide.org/index.php/highcharts-impressive-javascript-library/ Highcharts, Impressive Javascript Library « WebGlide – Data-Visualization

    [...] The graphics are rendered using the Canvas tag or occasionally SVG & VML. The supported browsers are Safari, Firefox, Opera, Internet Explorer+ and it also runs great on the iPhone. The default skin for the visualizations does quite a good job regarding readybility and clarity. Unfortunately there are some Powerpoint-esque skins as well (please, just cut them out). One really nice feature is the zoomable timeseries, which I haven’t seen before in any Javascript library. [...]

  • http://www.jeromecukier.net/?p=313 Jerome Cukier » Using Tableau Public: first thoughts

    [...] are many ways to communicate data visually. Count them: 13, 20, 28, 75… and many [...]

  • http://www.gvozden.info/interesting-jquery-bookmarks/ Aleksandar Gvozden Info » Interesting jQuery Bookmarks

    [...] Data Visualization – libraries that are interesting for displaying data [...]

  • http://addyosmani.com/links/2010/03/22/interesting-jquery-links/ Interesting jQuery Links | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!

    [...] Data Visualization – libraries that are interesting for displaying data [...]

  • http://www.loggly.com/2010/03/visualizing-your-data-in-the-cloud-with-loggly-and-highcharts/ Visualizing your Data in the Cloud with Loggly and HighCharts | Loggly

    [...] significantly in the last year. With After a bit of research for Loggly, I opted to go for a JavaScript charting library called HighCharts. I tried a bunch of other canvas-based libraries, but let me tell you without [...]

  • http://www.naehrstoff.ch/ Peter Gassner

    Moowheel seems to have a new URL: http://labs.unwieldy.net/moowheel/

  • http://www.wp.biofusiondesign.com/2010/05/10/why-flash-is-still-relevant-in-the-html5-world/ BiofusionDesign | Why Flash is still relevant in the HTML5 world

    [...] data visu­al­iza­tion work. The short answer is no. There are, of course, a lot of Javascript chart­ing engines out there, but for performance-heavy things like maps, Flash is still bet­ter. As to the Flash vs [...]

  • Mustafa Dikici

    what about highcharts?

  • http://twitter.com/TapioNurminen Tapio Nurminen

    How about Simile Widgets? http://www.simile-widgets.org/

  • http://twitter.com/TapioNurminen Tapio Nurminen

    How about Simile Widgets? http://www.simile-widgets.org/

  • http://www.facebook.com/profile.php?id=100000571025189 Mohamed Amami

    KapLab (http://lab.kapit.fr) has also impressive data visualization libraries (Graph Drawing, Reporting Visualization, Code Analysis….)

  • http://twitter.com/_mql Michael Aufreiter

    I'm working on a data driven visualization toolkit since a while.

    Unveil.js features generic data abstraction through Collections, a Visualization API allowing the creation of pluggable visualizations, and a Scene Graph implementation on top of HTML 5 Canvas.

    Code: http://github.com/michael/unveil
    Docs: http://docs.quasipartikel.at/#/unveil

    Examples:

    http://quasipartikel.at/unveil/examples/stacks….
    http://quasipartikel.at/unveil/examples/random_...
    http://quasipartikel.at/unveil/examples/scatter...
    http://quasipartikel.at/unveil/examples/linecha...

    Please use a webkit-based browser (Safari, Chrome) for the moment (Mouse interaction does not work in Firefox atm)

  • http://www.joeparry.com/blog/?p=86 Using Javascript for Visualization? « Visual Design & Analysis

    [...] The recent emergence of Javascript visualization libraries: Protovis, Raphaël, InfoVis Toolkit, Processing.js, etc. (See DataVisualization blog for a more complete list) [...]

blog comments powered by Disqus