Ask HN: What charts javascript library to use?

[mxmpawn]

I'm building a Django app and I'd like to use a javascript library for the charts, is it the best way to put graphics in django aplications?. I need simple types of charts: pie and bar(with negatives).

I began to use jqplot but I'm having some problems with some options.

I'd like to find a library with pretty nice and colorful charts and compatible with the majority of the principal browsers(ie,firefox,chrome).

[figured]

http://g.raphaeljs.com/

http://www.highcharts.com/

http://www.jqplot.com/

http://plugins.jquery.com/project/gchart

http://vis.stanford.edu/protovis/

http://polymaps.org/

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

[briandoll]

At New Relic, we use HighCharts (http://highcharts.com/). We constantly get questions from our customers about which library we use, because they like the way they look and function. Highly recommended.

[TamDenholm → briandoll]

I second highcharts, i find it an absolutely excellent chart library. I even created a PHP wrapper for it so i could control it from the backend.

Oh and I did this because i was bored: http://zestmonkey.com/charts.php

[mitchellhislop → TamDenholm]

Is that lib. available? I was nearly going to write one, but I would rather not start from scratch.

[wpeterson → briandoll]

+1 for High Charts. We're using these for some of our newer, light-weight charting options at PatientsLikeMe.

Great bang for the buck as your go-to first charting solution until you need something custom.

[mxmpawn → briandoll]

That's a great library but I'll have to pay u$s360 if I want to use it. In my country it'll be ~u$s1300.

[neodude → mxmpawn]

If you're only developing one application, I believe you can just buy the $80 license. That's amazingly inexpensive for such a stellar piece of software.

[koenb → neodude]

The $80 license says: "For use on a website that does not have customer specific data or charges for its use."

Showing a username is customer specific data I suppose, so I think most applications show customer specific data. Am I misunderstanding this limitation?

[Cyranix → briandoll]

+1 for Highcharts. We use it at MyEdu, switched away from Fusioncharts. I've had to write some workarounds for the occasional bug, but the maintainer is incredibly responsive to feedback, so drop a comment on GitHub or the Highslide forum if you run into an issue.

[joe8756438 → briandoll]

I chose to use Highcharts at Perpetually about nine months ago, I must say I am very pleased with how they have developed the library in that time. It has proven flexible enough to handle extremely varied data visualizations. Highly recommended.

[mgrouchy → briandoll]

We use it as well. No problems to date. Its pretty great.

[trefn → briandoll]

also in use at Mixpanel.

[gregable]

This one is pretty fun: http://danvk.org/dygraphs/ - the best part IMO is that the charts are interactive.

[gaius → gregable]

'Nother vote for this, it rocks.

[bradleyland]

We use Flot currently, but we're looking at purchasing a license for Emprise. Specifically, they offer candlestick charts, which are difficult to find elsewhere, yet absolutely critical in expressing the volatility of series data.

http://www.ejschart.com/

IMO, candlestick charts are way underutilized. Take application response time graphs for example. Most reporting suites rely on moving averages. If your application can have an acceptable average response time, but still have a high level of deviation. Let's say you have an app where, on average, one out of six requests is an entire order of magnitude slower than other requests:

  # Ruby code where r is response in ms
  r = [
    100,
    100,
    100,
    100,
    100,
    1000
  ]

  r.inject{ |sum, ms| sum + ms }.to_f / r.size # => 250

So my average response time is 250ms, which I may consider acceptable, yet some responses are taking 1000ms, which I wouldn't consider acceptable. With a simple line chart, I wouldn't see the significant deviation. With a chandlestick chart, the upper boundary would be blindinly obvious.

[piranha → bradleyland]

Protovis can do candlestick charts: http://vis.stanford.edu/protovis/ex/candlestick.html

[bradleyland → piranha]

I can't thank you enough for that link, so I'll just say it simply. Thank you!

[endtime → bradleyland]

My chart lib (not yet released) supports candlestick charts too...and the fact that not many libs have them (and ProtoVis has no IE support) is part of why I ended up writing my own. Example: http://track.com/charts/show-chart/2/

[endtime → endtime]

(whoops, deleted it by accident - http://track.com/charts/show-chart/8/ works though)

[sparky → bradleyland]

Can you just have multiple lines for Nth percentile and/or min and max, rather than candlesticks? You'd want to bold or otherwise emphasize the mean or median line, I think, but it shouldn't be too hard to read, since the lines shouldn't cross.

[bradleyland → sparky]

Sure. Ultimately, it all comes down to preference. So yes, you could represent your min/max as separate lines, but candlestick charts are the most widely accepted means for representing volatility. That's why they're so widely used in finance.

Candlesticks are also useful for giving a good visual indicator of your interval, which is another area where line charts fall down. There is no visual clue given with a line chart that shows you whether you're looking at a 5 minute interval, 1 hour interval, or 1 year interval. The thickness of a candlestick relative to the x-axis (usually time) gives a strong visual clue about the interval.

[qbproger]

Flot is worth a shot. There may be a python library to generate is server side. When I looked into it, I kept going back and forth between javascript charts vs images. I ended up going with images because I didn't really need dynamic charts. There were also features missing from many. IIRC, Flot couldn't add a title to the x/y axis at the time I was looking at it.

[whouweling → qbproger]

I especially like the time series mode where flot assigns very meaningful time labels on the x axis when you zoom in and out. (based on unix timestamps * 1000, so easy to retrieve from a database)

You can load data from python quite easily using an jquery ajax call and json.dumps() in the view on the server side.

In general it surprises me how well the client side graph libraries scale if you load a lot of data into them.

[jmervin → qbproger]

I've also found flot to be fairly powerful and have used it in a couple of projects.

[mxmpawn → qbproger]

Thanks for your suggestion, I had previously checked Flot but didn't use it because I didn't see a pie chart in the examples. Now I looked again and the pie chart is in the trunk version.

[bluedevil2k → qbproger]

Use Flot on several of my sites. They have some nice plugins that I like too, and it integrates very nicely with jQuery.

[boothead]

Protovis http://vis.stanford.edu/protovis/ hands down. (Assuming a decent browser)

[mimori]

I like JIT which is a beautiful data visualization library. http://thejit.org/

[notyourwork → mimori]

We were able to use the spacetree to create an organizational chart for our employees which makes it easy for employees to find other employees. This is a great library.

[kilian]

I'm the author of Grafico, A Raphaël (js based SVG/VML) charting library with a focus on proper charts (per Stephen Few/Tufte) Check it out here: http://grafico.kilianvalkhof.com/ and this page has a lot of examples: http://grafico.kilianvalkhof.com/documentation/index.html

It doesn't have pie charts, because pie charts are a tremendously bad way to visualise data. I have barcharts with negatives though :)

[mfalcon → kilian]

Thanks for sharing your library, I'll try it for a little project of mine.

[kilian → mfalcon]

Cool, let me know how it works out! Feel free to e-mail me if you have any questions. (see my profile)

[agbegin]

Have you checked out ZingChart? Transparency: I'm on the team.

Zing renders both Flash and HTML5 Canvas charts. Compatible and customizable + interactive API.

For your consideration: http://www.zingchart.com http://www.zingchart.com/flash-and-html5-canvas/

Shoot me questions at abegin@zingchart.com or http://www.twitter.com/zingchart (Andrew)

[Jlambert → agbegin]

The pricing model leaves a little to be desired. If I build an app that others use, i have to contact you? Really?

[agbegin → Jlambert]

Yes, at this point we've been working with software developers to make sure we provide the support and licensing model they need.

Thanks for the feedback.

[ajsharp]

Having used graphael (really the only graphing library I've used), I can say that I like it, but I don't love it. I like how the charts looks far more than any of the other graphing/charting libraries, except for maybe highcharts. Imo, one of the key features that sets graphael and highcharts apart from the rest (especially the Stanford library, which looked very nice, except for this one feature) is interactivity. I think being able to mouse over the data points and get more detailed information is a massive leg up. From an end-user perspective, this interactivity is what @briandoll referred to as "function", in addition to the "look", which in this case, is great for both of these libraries.

- $0.02

[dirtyaura]

I recently used Django to implemented sales reporting and analysis service for sales organization of a few hundred people.

For charts, I've used flot and it's been so far adequate for my needs (timeseries and some bar charts). I personally prefer more Tufte-like charts than the default flot style, but the customer has been delighted of flot's style.

By the way, forget pie charts, they are a bad idea. Use e.g. a simple bar chart instead.

To quote Tufte: “The only worse design than a pie chart is several of them, for then the viewer is asked to compare quantities in spatial disarray both within and between pieces.”

[meeech]

jit is nice http://thejit.org/

demos: http://thejit.org/demos/

[rexreed]

We use the Google Charts API - it's free and very good. But I haven't seen many others comment about it. Is there a problem with using that?

[patangay → rexreed]

I think the main problem with the google charts API is just that, it's not a library that is self contained. You need access to google's servers. Second, if you have sensitive data, you rather not send it to google.

[martingordon → rexreed]

The only problem I've run into is an issue with URLs being too long when trying to chart large amounts of data.

[rexreed → martingordon]

Google Visualizations API is also very good and (I think) avoids the problem of sending data to Google, and if locally cached, shouldn't require access to Google servers. That said, if you're running an online app, you should have access to the Google Servers, especially if you're already using their copy of jQuery for performance reasons.

[mprovost → rexreed]

Most of the visualizations don't send any data to Google. It tells you on the bottom of the page for each chart type under Data Policy, eg http://code.google.com/apis/visualization/documentation/gall...

[gregable → rexreed]

Linky: http://code.google.com/apis/chart/

[filipcte]

We use http://www.fusioncharts.com/ on CashBase (http://www.cashbasehq.com/). It has a JS API but also libraries for most backend languages.

I found it super easy to use after experimenting with Google Charts and jqPlot.

The way a chart looks in FusionCharts is 100% fully customizable.

[cabacon]

See also historical recommendations: http://news.ycombinator.com/item?id=1465816 http://news.ycombinator.com/item?id=580073

[vanstee]

Since you're already using jquery, try flot, http://code.google.com/p/flot/. It has a simple api, good documentation, pretty extensible and works in all browsers (with google's excanvas script for ie).

[thibaut_barrere]

You may like: http://g.raphaeljs.com/

[trizk]

I have long found this gentleman's libraries to be visually appealing, easy to integrate and generally top notch:

http://www.maani.us/charts/index.php

However, they are XML configured flash.

[cnlwsu]

Google's visualization apis are amazing, cant recommend it enough. The chart ones are nice but you then also have to wrap it yourself to generate the GET request appropriately to the data.

[ClifReeder → cnlwsu]

Agreed, I've been using it for a project and have been very happy so far. Lots of options, and looks great. I've been using the GoogleVisualr library for Rails, so writing them in Ruby is nice too.

[drivebyacct2 → cnlwsu]

The fact that it uses GET is a huge limitation IMO. Especially considering that the workaround is to use POST and iframes.

Especially when there are more functional, prettier alternatives

[cnlwsu → drivebyacct2]

GET is only for the chart api, the visualization api is not the same case (with a couple exceptions that use the chart api) http://code.google.com/apis/visualization/documentation/gall...

[drivebyacct2 → cnlwsu]

Wow, how did I miss that there was a diff in chart/vis apis? thanks!

[ulf]

As an encore, does anybody know about a library that lets you modify charts in realtime? I would like to have basic pie charts, where I could resize partitions, add and remove.

[dlokshin → ulf]

You should be able to do this with Raphael. (http://g.raphaeljs.com)

[ryanc]

I was working on a Django app a few months ago that required a lot of chart features. I was impressed with how easy sparklines is to use but for some larger charts I used flot.

[dochtman]

We use Flot successfully, but have also looked at jqplot.

[shawndumas]

I have used Visifire[1] -- it's very good and easy but it's silverlight.

-----

[1]: http://www.visifire.com/

[vbabiy]

I have used a few like jqplot, flot, highchart.

I stuck with flot but if I was to do it again I would give high charts another look.

[kqueue]

I've been very happy with highcharts http://highcharts.com

[HackyGeeky]

In my django app. I use dygraph and it works on all browsers.

[bhiggins]

I've only surveyed what's out there a little, but I am impressed with Protovis's demos and apparent flexibility: http://vis.stanford.edu/protovis/

[piranha → bhiggins]

I've done quite a lot of Protovis charts and should say that they are really great, but have quite steep learning curve. But after making few first steps it starts to make sense and are quite convenient in terms of maintainability and extensibility.