Graph scripts – part 1 – javascript

Today I will try to add more resources on the Javascript graphs utilities to create attractive and more intuitive data sets presentations( graphs ).

RGraph

HTML5 – graph library – yes HTML5 so IE users – change your browser, or use google frame. The library uses the latest CANVAS features and is fully documented on the site. It has a large variety of outputs:

Bar chart, Bi-polar chart, Donut chart, Funnel chart, Gantt chart, Horizontal Bar chart, LED grid, Line chart,Odometer, Pie chart, Progress bar, Pseudo radar chart, Scatter chart, Traditional radar chart.

RGraph

Bluff

Another script that is based on CANVAS, only that this time can use the excanvas from google, to support IE. Is a “translation” of a ruby graphing library named Gruff.

capture-2

The following two libraries use jQuery:

jQuery visualize plugin

Very simple to implement –  it gets it’s data from a table and even allows interactive data input.

capture-3

TufteGraph

It is different from other javascript charting libraries because:

- Configuration is by dynamic functions, allowing for really compact API (very few options)

- Non-core layout is done via CSS rather than code

It’s fully tested on Safari3 and Firefox3 only

capture-4

MooChart

Mootools based, it draws a bubble diagram using canvas, and can animate it. There is a nice demo on the script site.

capture-5

Canvas 3d graph

Exactly what it says –  bar graphing but in 3D.

capture-6

gRaphaël

Charting library based on Raphael. Cross browser interactive or static graphs.

capture-7

Do you know more?

Let me know.

We have an update, thanks to Kilian, who seems that created a new graph library for prototype users. It renders the graphs with Raphael, so  is cross-browser, and I must admit it looks pretty. Below is a screenshot:

capture-1

If you have your own libraries, or you  know others not specified here, you can submit it here.

I will update this post as many times as I’ll receive news from you.

9 Comments to “Graph scripts – part 1 – javascript”

  1. Ray Wenderlich 9 October 2009 at 4:24 pm #

    Nice. Another good one, although it’s not Javascript, is Fusion Charts. Allows you to make very slick looking Flash charts based on XML. One warning: does not scale well with large amounts of data.

  2. dude 10 October 2009 at 8:15 pm #

    You seem to have forgotten one of the best: flot.

  3. dan_tamas 10 October 2009 at 9:16 pm #

    No, I haven’t, only that is presented in the first post about javascript graphs here.

  4. Kilian Valkhof 11 October 2009 at 3:06 pm #

    Check out Ico: http://github.com/Kilian/ico

    it’s based on Raphael so used SVG, and prototype. It’s, I believe, the only one capable of doing stacked area charts out of the box as well as a host of other different types of charts. It has a less cluttered look and feel than many of the other charting libraries which make Ico look much better.

  5. dan_tamas 12 October 2009 at 12:32 pm #

    I updated the post with your script. Thank you for your submission :)

  6. Modern javascript graphs libraries…

    Some javascript libraries for clientside charting, using the latest technologies( html5 canvas, svg or vml )

  7. [...] Les ressources javascripts de création de Graph http://cssgallery.info/graph-scripts-part-1-javascript/ [...]

  8. Jean 21 December 2009 at 1:52 am #

    Check out these SVG/VML javascript graphs: http://ser2.dialink.com:8080/.

    These are rendered with an Open Source library from github: http://github.com/uiteoi/ico.

    It is a javascript library based on Raphael and Stephen Few recommendations for more usable graphs and dashboard design.

    Fully tested with IE, Firefox, Safari (including iPhone), Chrome and Opera it features all Stephen Few recommended graph types, including bullet graphs, can display angled labels, automatically calculates best value labels for provided data sets, a comprehensive documentation, and more.

  9. Richard Heyes 11 January 2010 at 6:29 pm #

    FWIW, RGraph now supports MSIE8 with ExCanvas.


Leave a Reply