HTML Canvas Graphing Roundup
Over the past few days, I've been looking into the long list of JavaScript graphing utilities that use the HTML <canvas> tag to produce attractive and professional graphs. What I found most interesting is that, in comparison to standard graphing tools (such as RRDtool), the graphs had incredibly levels of detail and smoothness. As opposed to image-based graphs, these JavaScript based charts can be interacted with on a whole new level.
What sparked my interest in these graphing tools was the launch of Wikirank, a site that tracks the popularity of Wikipedia articles. On the site, the beautiful graphs that are presented are not flash nor images, but nicely formatted CSS and JavaScript.
After searching for these JavaScript graphing scripts, I was led to three major contenders. PlotKit, Flot, and Flotr (yes, Flotr was inspired by Flot). All of these utilities perform line graphs. Flotr also draws bar graphs, but PlotKit not only does line and bar graphs, but also pie charts. This is the only script out of the bunch that will do that for you, so if that's important, PlotKit is your best bet.
All three of these options produce undeniably beautiful charts. All three follow virtually the same markup in creating the graphs. However, all three are not equal. PlotKit has not been updated since 2006 and likewise, lacks features that both Flot and Flotr have (such as extensive graph interaction functions). Therefore, my choice for favorites was brought between Flot and Flotr.
My Choice
Ultimately, the extreme ability to which Flotr can be customized to, tied with it's good documentation led me to choose it for my favorite out of the bunch. Lots of demos can be found at their documentation page in case you're interested in checking it out.
In case you're wondering, all of the scripts work even in IE6 under JavaScript that emulates the HTML canvas. Now, instead of having static graphs that are not easily changable, anyone can add flexibility and overall attractiveness to their graphs of anything from stocks to website traffic.
Permanent Link · Published on March 26th, 2009