Mixpanel Engineering

Real-time scaling

Best Javascript Charting Libraries

with 7 comments

If you're interested in what we work on, please apply - we're hiring: http://mixpanel.com/jobs/

When we started Mixpanel, we used amCharts, a pretty full-featured Flash-based charting library. This wasn’t ideal though – it’s closed-source and, well, it’s Flash. We ultimately switched over to pure Javascript charts and it was a great decision.

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

http://highcharts.com

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.

Flot

http://code.google.com/p/flot/

Flot is a jQuery plugin that has inspired many other systems (flotr, protochart, and more). The stated goals for Flot are “simple usage, attractive looks and interactive features”.

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

http://www.simile-widgets.org/timeplot/

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.

Timeplot example

There’s an interactive example and code samples here: http://www.simile-widgets.org/timeplot/docs/

Conclusions

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.

If you're interested in what we work on, please apply - we're hiring: http://mixpanel.com/jobs/

Written by Tim Trefren

September 17th, 2010 at 10:29 am

Posted in Frontend

Tagged with ,

7 Responses to 'Best Javascript Charting Libraries'

Subscribe to comments with RSS or TrackBack to 'Best Javascript Charting Libraries'.

  1. Tim:

    Congratulations on the recent success you cats are having up there at Mixpanel. I wondering if there is any reason you did not consider Google’s comprehensive charting API (http://code.google.com/apis/chart/)? Perhaps you did.

    Another library that I have played with is the JavaScript InfoVis Toolkit (http://thejit.org/demos/). While I have not put anything into production using this lib, it sure does show major promise.

    –Tal

    Tal Golan

    17 Sep 10 at 4:47 pm

  2. Did you consider the Google Chart Tools? Their ‘Annotated Time Line’ (http://goo.gl/uOVo) seems like it’d be a great fit.

    Garret Heaton

    18 Sep 10 at 7:39 am

  3. maybe the reason is just Google Chart Tools using flash, that cause it doesn’t run in iPhone.

    hileon

    15 Nov 10 at 5:55 pm

  4. For consideration next time you guys evolve: http://zingchart.com. Renders in HTML5 Canvas, SVG, Flash, and VML.. meaning you get native rendering in all browsers including ie6, iOS, and Android. And some killer features that the others don’t offer.

    (I’m on the team. http://www.twitter.com/zingchart for info/demos/say hello)

    Andrew

    Andrew Begin

    18 Oct 11 at 11:32 am

  5. Based on other posts in your blog I see that you’re using both HighCharts and Django. I wrote a django app called django-chartit that makes it easy to create charts from django models effortlessly. You guys may find it useful. Please check it out. http://bit.ly/rTCl1Y.

    Praveen Gollakota

    18 Nov 11 at 4:01 am

  6. What about considering FusionCharts? the url is http://www.fusioncharts.com/

    Not all the components are free but this particular feature found free: http://www.fusioncharts.com/goodies/

    FusionCharts

    24 Apr 12 at 12:11 am

  7. i’ve got to interject with d3, checkout the github repo: mbostock/d3 http://bit.ly/KWc1gd

    Gregory Nicholas

    28 May 12 at 1:58 am

Leave a Reply

Safe place to purchase clomid and buy weight loss pills