Now if something wonky happens, I can easily modify the library code. We also get the added benefit of broader platform support — you can use mixpanel.com on your mobile device and it works perfectly.
Actually picking the library was a little tricky. We were lucky — highcharts was released right when we started looking and it has performed admirably. There are a few other good choices though, and I will go into all of them in some depth.
Highcharts is a highly configurable charting library that requires either jQuery or MooTools. It is free for noncommercial applications but requires a paid license otherwise. This is actually pretty nice, because it doesn’t cost that much ($80 for a single site license) and the creator pushes out new stuff pretty quickly.
It has a bunch of different chart types — including line, pie, bar, and area — and handles time-series data really well. Tooltips also work by default which is a handy feature.
The watchword here is flexibility — you can really configure every aspect of the charts, from colors to axis labels to tooltip text.
Unlike Highcharts, Flot is completely free, so if you’re bootstrapping a startup it is probably your best choice. It has fewer graph types (most notably missing pie charts) and though “interactive features” is a goal, it’s more work to handle some kinds of interactions — you actually have to write code to set up tooltips rather than just modifying a config object.
Timeplot is a really interesting project that came out of MIT. It’s part of a broader initiative called SIMILE Widgets, which provides various open-source data visualization widgets. Timeplot itself is focused entirely on graphing time-series data — this is useful for an analytics application but isn’t as flexible as the others I’ve covered.
The coolest thing about Timeplot is its support for annotating the graph with temporal events — it’s really useful for explaining specific peaks or dips in the data.
I was strongly considering using Timeplot for Mixpanel, but ultimately had a few too many issues. For one thing, the library is extremely complicated and reliant on other parts of the SIMILE codebase. Instead of hosting the whole lib yourself, the only way to use it is to import and API wrapper that dynamically loads the other scripts that it needs. This is a pain in the butt when you want to test and modify the code.
There are some efforts to consolidate things — such as davidw’s standalone-timeplot but it’s a pretty imposing project to get started with. It also doesn’t play nice with jQuery, which unfortunately means I can only show you an image rather than a live demo like with the previous two.
There’s an interactive example and code samples here: http://www.simile-widgets.org/timeplot/docs/
As I said before, we ultimately went with Highcharts and I think it was a good decision. I strongly recommend it if you’re willing to go with a paid solution.
Also, a final question: did I miss any great software? Are you using something else? I’d love to hear about any other charting libraries you know about.
Originally published at https://engineering.mixpanel.com on September 17, 2010.