Kilian Valkhof

Front-end & user experience developer, Jedi.

Grafico: Javascript charting library

Design, Javascript, 8 February 2010

Grafico is a javascript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs and stays with the guidelines laid out by Stephen Few and Edward Tufte. Grafico provides pretty charts that effectively communicate their information.

Graphs

This means you get awesome graphs such as stacked area charts and sparklines, but no pie charts or bar charts with every bar a different color. There are a lot of bad charts out there, and Grafico will do it’s best to prevent you from adding charts onto that pile. ;)


Website, Documentation (might be slow on some browsers due to all the examples)

Available graphs:

Grafico requires Raphaël 1.0+ and Prototype.js 1.6+

Each graph type has numerous API options to customize it’s look and behavior. Many examples of this can be found in the documentation. Some highlights: pop-up hovers, meanlines and watermarks. Minified, Grafico is about 30kb and available under the MIT license.

Grafico is also available on Github and includes a minification script made by Menno using the Google Closure Compiler.

History

In april 2009 I started working on new visualizations for Wakoopa. I had set it my target to provide unique and interesting graphs. One thing that particularly inspired me was the stream graph, but the math behind it scared the crap out of me. I decided to focus on stacked area graphs instead.

After doing extensive research on the available JavaScript charting libraries, and being slightly disappointed by most, Ico by Alex Young was the most promising. In the (almost ) year I worked on it, the graphs, code and API changed considerably. To avoid confusion I decided to rename my version to Grafico.

Todo

As always, there are points of improvement. The major one is speed. Grafico is very speedy on modern browsers, but of course IE lags behind. When building graphs, drawing pop-up hovers for all data points takes too much time and I have yet to find a way to improve this. The project lives on Github, so if you have improvements, fork away and I’ll gladly pull them!

Update! (16 Feb 2010)

Jan Paul Posma wrote the code to implement the aforementioned stream graphs into Grafico. Which is awesome. I have updated the links in this article accordingly.

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Looks nice :)
    And indeed charting libraries somehow always manage to disappoint…
    Time for a fix :)

  2. […] here to see the original: Grafico: Javascript charting library • Design • Kilian Valkhof Share and […]

  3. dude

    Looks like it would be nice, but Prototype is just _way_ too slow and clunky. How about a jQuery port?

  4. Hayden

    I also couldn’t work out how to get the kinks out of line graphs with Raphael (as in your “Line graph with multiple lines and a watermark” example, second to last dot)

  5. Somewhat offtopic, but I absolutely love your blog’s theme. Is it one you made, or something you tweaked?

  6. Nice! ..Also, I agree with David Fischer; nice clean theme!

  7. The stream graphs are quite awesome, so I looked into it, and it turns out the math may look scary but really isn’t. I forked your project on github and implemented a rudimentary version of it, if you like it I can also look at other things described in the paper (coloring, layer ordering and layer labeling).

    I’d be nice though if you can shed ideas on how to fix the implementation so it doesn’t need a datarow (__empty_space__) which has to be forced to #fff now to make it work. Perhaps adding a function with the lower coordinates (which will be the new dataset) and adding these to the drawing function instead of the lower left and right corners?

    http://github.com/janpaul123/grafico

  8. Hayden, you can do by setting curve_amount to 0. Jan Paul, that is really awesome, I’ll be pulling from your repo :)

  9. […] Grafico WebAppers […]

  10. […] http://grafico.kilianvalkhof.com/ Demo: http://kilianvalkhof.com/2010/design/grafico-javascript-charting-library/ Requirements: Raphael and Prototype.js Documentation: […]

  11. […] Web: Grafico Tags: crear, diseñar, graficos, javascript, sitios […]

  12. […] Raphael and Prototype.js Demo: http://kilianvalkhof.com/2010/design/grafico-javascript-charting-library/ License: MIT […]

  13. […] is about 30kb and available under the MIT license. Requirements: Raphaël and Prototype.js Demo: http://kilianvalkhof.com/2010/design/grafico-javascript-charting-library/ License: MIT License Commenti [0]Digg […]

  14. […] Grafico is a javascript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs and stays with the guidelines laid out by Stephen Few and Edward Tufte. Grafico provides pretty charts that effectively communicate their information. […]

  15. […] Official Link […]

  16. […] Grafico: Javascript Charting Library […]

  17. […] Canvas and JavaScript can be used to generate interactive charts, another benefit of the default Flex package. Already people are building interactive chart in JavaScript / HTML / Canvas (I saw the first examples by Kilian Kerkhof in early 2010). […]

  18. […] Grafico […]

  19. Great!
    I discovered it in wakoopa, and it’s the best non-flash chart library I know

  20. […] Grafico is a JavaScript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs that effectively communicate their information. Each graph type has numerous API options to customize it’s look and behavior. […]

  21. Abhijit

    I really like this. Is there a jQuery port of this? I mostly work with Drupal which uses jQuery. If a port is not there, I will like to write one. Will that be okay?

  22. […] Grafico is a javascript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs and stays with the guidelines laid out by Stephen Few and Edward Tufte. Grafico provides pretty charts that effectively communicate their information. […]