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.
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)
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.
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.
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!
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.
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
When writing JavaScript, very frequently I need to check if a given thing exists in a list of things. Every single time I need to look up the function that does that for the sort of list I’m working with. You see, there are three possible options: includes(), contains() and has() and I mix them up…
Did you know you can create files using JavaScript right inside your browser and have users download them? You can create files with a proper name and mime type and it only takes a few lines of code. Creating downloadable files with JavaScript in your browser only takes a few lines of code. Check out the…
We can define easing curves for the transitions and animations on our websites to give them a more natural and subtle feel. But it’s not just animations that benefit from easing curves. Any time there is a transition between two states an easing curve will make that feel more natural and less harsh. For animations and…