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

Give Feedback

  • Pingback: Zukunftsfähige Webapplikationen « Blog der PG knowAAN

  • http://www.Bindows.net Ran Meriaz

    You missed http://www.InfiView.com – probably the most powerful Ajax visualization framework.
    Checkout the demos on the site (true zero-footprint, no Flash, Java, Silverlight, plugins, etc.)

  • Jeremy G Peterson

    I found UMLCanvas as an option, never used it, though it gives a different type of visualization. (more than charts and graphs) http://umlcanvas.org/

  • Ralph Polley

    For STEM educators here is a set of javascript visualization tools at http://www.shodor.org/interactivate/ which is a portal of the National Science Digital Library.

  • Cyruspak

    Would be nice to have a library of all JS libraries in which viewer is referred to web sites which are actually using them.

  • Mikhail Jacob

    What about HighCharts? It is an excellent, flexible, beautiful Library. Please include it. :D

    • http://www.artillery.ch/ Wiederkehr

      Thanks for the note about HighCharts, Mikhali.

  • Paul

    There is also dhtmlxChart (http://www.dhtmlx.com/docs/products/dhtmlxChart/) – a JavaScript charting library that supports line, area, bar, and pie charts. Completely customizable and cross-browser.

  • Pingback: ProcessingJS | ethan2012

  • Hoang-Tran

    I can recommend ArcadiaCharts. 

    http://www.arcadiacharts.com

    A brand-new professional charting library for JavaScript and GWT. Runs in all browsers without plugins. 
    It’s easy and fast to use and creates great looking charts with just a few lines of code. 
    Free for non-commercial use.

  • Pingback: Fusing web technologies with QGIS « Linfiniti Geo Blog

  • Jos

    Here is another javascript visualization library, the CHAP Links library: http://links.sourceforge.net

    The library is open source and contains a graph, graph3d, network, timeline, and treegrid.

  • Dragan Matek
  • CyberAngel

    I try D3.js (link: http://mbostock.github.com/d3/), a very powerful evolution of Protovis.

  • David

    TeeChart for JavaScript HTML5 Canvas is another charting and graphing tool 100% javascript, to be released April 2012:  http://www.steema.com/teechart/html5

  • Pingback: 16 Javascript Libraries for Visualizations on Datavisualization.ch » Web Design

  • JavaScript Charts

    FusionCharts (http://www.fusioncharts.com/ )is not strictly a JS library but FusionCharts is accessible via JavaScript(HTML5). Its easier to dashboards, reports, analytics, monitors, surveys. It leverages Flash and JavaScript (HTML5), working across PCs, Macs, iPads, iPhones and a majority of other mobile devices. As the FusionCharts is having good client base, so I think this particular blog could have a review of FusionCharts. Thanks.

  • http://www.facebook.com/claire.hooters Claire Hooters
  • Gorka LLona

    For those looking for a simple, open-source Javascript Organizational Chart library:

    I’ve just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael.

    Take a look at the site for some examples and download:

    http://www.fluxus.com.ve/gorka/lib_gg_orgchart

    If you find it useful, please let me know.

  • TT

    I’d also recommend http://www.fusioncharts.com for their extensive documentation, and responsive support, which can invaluable to a newbie developing javascript charts

  • Aviv_agra

    GoJS is a very comprehensive flow diagraming lib

  • Pratik319

    for the force directed graphs …….infoVis or JIT is the best library I found after trying a number of java script libraries including d3 and sigmajs …… 

  • Pingback: AnantLeaves

  • Pingback: Any pretty data visualization libraries for Python? - Tech Forum Network

  • Andrey Kuleshov

    Hi,

    there is one data visualization library – ChartJS from DevExpress
    It uses SVG for visualization, and contains multiple charts, pie charts, gauges and range selector widget
    Web site:
    http://chartjs.devexpress.com

    Demo gallery:
    http://demos.devexpress.com/DXTREME/Visualization/#index

  • Pingback: Visualizing text analytics using jsfiddle.net (and friends!) - IKANOW

  • Noman Mirza

    which of these libraries are free for commerical use ????
    Any one guide me …Ur answers will be highly appericiated

  • bebraw

    Hi,

    We’ve listed a massive amount of these sort of libs over at JSter.net: http://jster.net/category/visualization-libraries . It’s amazing how many of them are available. :)

  • zeroin

    Missed amCharts here: http://www.amcharts.com
    Scrollable, zoomable, supports time series and has lot’s of chart types, including gauges. 2D/3D. They also have JavaScript maps.

  • Marco Liberati

    KeyLines it’s focused on network visualization. It has a commercial license and supports IE6+.
    Disclaimer: I work for the company who made it.

  • Jaimin

    D3 should be in the list.

  • Nmiran

    I think https://github.com/tamc/Sankey is worth mentioning – Sankey diagrams drawing library

  • Martin Nelson

    I’d like to add one more charting library I recently found that catches the eye: ShieldUI charts. There are more than 20 charts offered paid and for free depending on needs, both fully functional. More you can find here:
    http://www.shieldui.com/products/chart

  • Alok RB Sharma

    hey i want to create a scatter plot interlink pie chart .plz help

  • Ken

    I like KoolChart. http://www.koolchart.com
    It has XML-based chart design feature and provides many advanced types of charts.