8 ms·

Highcharts: JavaScript Charts that don't suck

198 points by nym 17y ago

nym 17y ago
I'm a big fan of charts, and I'm glad to see someone made a good non-flash interactive chart solution.
- piranha 17y ago
  Look at protovis also.
- netghost 17y ago
  There are tons of good non flash ones. Someone mentioned Protovis, which is neat, but last I check it wasn't supported in IE. There is also Flot (jquery) and Flotr (prototype), and a handful of others. I use a modified version of Flotr, and it works great.
  - deleted 17y ago
    [deleted]
- paddy_m 17y ago
  2 years ago I built chartwidget . http://demo.chartidget.com http://demo.chartidget.com I haven't quite kept up with javascript charting recently. I was aiming to build a google finance/yahoo finance competitor. The thing that always surprised me about google finance/yahoo finance charts was that they didn't take advantage of data already in the browser. When their flash charts would try to plot a moving average, they would make another request back to the server for more data, Why? The browser already has enough data to derive the moving average.
  - nym 17y ago
    I think you meant: http://demo.chartwidget.com/ http://demo.chartwidget.com/
    - paddy_m 17y ago
      thanks, I'm a dummy
- harry 17y ago
  I used jQplot on a whim project a while ago and greatly enjoyed using it as well.
grayrest 17y ago
I strongly recommend Protovis: http://vis.stanford.edu/protovis/ex/ http://vis.stanford.edu/protovis/ex/ If graphael gets into shape it might be decent as well.
- gruseom 17y ago
  A cursory look suggests that Protovis doesn't work in IE. Is that correct?
  - cubtastic71 17y ago
    Its IE8 that has the issues it seems - switch to compatiblity mode and it eventually renders.
    - oconnor0 17y ago
      I'm just getting "[object Error]" in IE7 with nothing beyond that - no rendering.
kylemathews 17y ago
Anyone have experience with Flot?
- zackattack 17y ago
  Yeah, I use it for plotting follower data for CustomerFind. The chart on the homepage (http://www.customerfind.com http://www.customerfind.com) is a screenshot of part of a user's controlpanel, and was rendered using flot. It was very easy to get flot set up, it plays nicely with the rest of my js, including jQuery. Flot is fast. P.S. CustomerFind v2 is no longer focusing on AutoFollow, though the copy on the homepage reflects otherwise [http://customerfind.posterous.com/do-you-sell-a-product-or-service-online-start http://customerfind.posterous.com/do-you-sell-a-product-or-s...]
- Maciek416 17y ago
  Yes, we use Flot to visualize some pretty beefy data with many data points. Flot has some very nice features and is a reasonably active project. The big problem I see with a project like Highcharts (and other Flot alternatives I've tried) is that features like animation and pretty aesthetics are center stage while performance is typically hugely lacking. We've driven Flot to its limit, and by far I can say that the winner of JS charting APIs is going to be the library that can perform well not just on Chrome but on Internet Explorer too. We've charted things here that take under 1 second to render in Firefox/Chrome/Safari while taking 10-15 minutes with the CPU pegged (yes, you read that correctly) in IE. We've gotten around it with a bit of work, but it's still a glaring problem for the APIs, and a glaring problem for projects that use HTML5 canvas, can't use excanvas.js with the Silverlight patch, but do need to serve up JS-powered charts to clients still on IE6/IE7.
  - bd 17y ago
    Raphaël is pretty fast even on Explorer: http://raphaeljs.com/ http://raphaeljs.com/
    - rbanffy 17y ago
      Thanks. MIT trumps proprietary any day.
shykes 17y ago
SIMILE's Timeplot (http://www.simile-widgets.org/timeplot/ http://www.simile-widgets.org/timeplot/) is great but more specialized. Great for browsing huge datasets.
gruseom 17y ago
I'll have to look more into this library. I'm glad to see it uses SVG and VML (edit: oops - plus Canvas). That seems like the right fit for this problem, since SVG and VML have pretty close models and that way you can have native vector graphics in all browsers. Edit 2: I have a question. Are the charts on the Demo page drawing so slowly because of someone's clever idea of an animation? Or does the library actually draw that slowly?
cyen 17y ago
I've explore a bunch of JS libraries in the past - here are some thoughts: Flot and Flotr are definitely past favorites, and its usage has felt the most natural PlotKit (http://www.liquidx.net/plotkit/ http://www.liquidx.net/plotkit/) - MochiKit-based, visually nice but not as well documented or, apparently, nearly as extensive as some of the other options RGraph - an HTML5 canvas library, but pretty basic and definitely easy the least visually appealing Highcharts definitely looks like it has the nicest animations of any of the previous ones, and also definitely has the best documentation / demo gallery. Thumbs up - definitely coming this way the next time I need a nice graphing library!
- iamwil 17y ago
  plotkit is kinda nice, but you can't plot multiple lines on the same graph well. You can, but by default, it distinguishes between different lines by coloring the area underneath it. And when you do, it's all opaque. If you try to color the lines themselves, it turns ugly.
tom_b 17y ago
Bullet graphs and sparklines as default chart options please? After Tufte and Few, I basically look for these first when evaluating any chart library.
- nym 17y ago
  Like this? http://omnipotent.net/jquery.sparkline/ http://omnipotent.net/jquery.sparkline/
akronim 17y ago
Nice, but pretty slow to render for me (on FF3.5). Actually it's more that it pauses at about one quarter rendered and looks broken for a second before it finally renders.
- watmough 17y ago
  It's pretty darn slick on safari 4.0.4 on an iMac.
  - TeHCrAzY 17y ago
    It doesnt display on IE8. That pretty much makes it useless as far as I'm concerned.
freetard 17y ago
I prefer http://www.jqplot.com/ http://www.jqplot.com/ it's free and open source.
va_coder 17y ago
I recommend Fusion charts free (and opensource) (it's flash though)
revorad 17y ago
Has anyone used the paid versions of Highcharts or any others mentioned in this thread? What do you think of the Highcharts price points - $80 for single commercial site, $360 for multiple sites? I'm working on a graphing app too and trying to decide my pricing.
- alex_c 17y ago
  At first glance, it looks sleek, polished, and feature-rich. Not sure yet if we'll need charts for the project I'm currently working on, but if we do, we'll definitely consider it - $80 sounds reasonable.
- smiler 17y ago
  It's very cheap but then you get what you pay for. The best and fully featured graphing capabilities are from Dundas imo (www.dundas.com). They charge about $3000 / developer licence and then $3000 / server that you run it on. If you priced it somewhere between the two and it had a good feature set I might bite. It would have to support printing though (and generating a PDF would be a big plus)
  - revorad 17y ago
    Thanks for the info, smiler. I can tell you PDF will definitely be there, so printing will follow. It would be helpful if you could share more about your use cases. Dundas looks mainly aimed at .Net development; is that what you need it for? Email me at hrishimittal@gmail.com and I'll put you on our early adopters discount list.
    - smiler 17y ago
      Use cases are pretty simple - building reports for MIS, corporate systems etc... all of them use Windows servers so asp.net is the standard for development hence Dundas
      - revorad 17y ago
        OK. Well, I won't promise too much but would be happy to help you try out our initial offering. Feel free to email me or look out for my Ask HN review post in the next few weeks. Cheers!
smiler 17y ago
Print a graph and you get a blank space. Useless
- artpop 17y ago
  Seems okay in Safari.
- Huppie 17y ago
  You can make sure an image appears in place of the chart with a css-file for printing-purposes only. (Or do it the other way around. By default show an image and use JS to replace that image with a chart when possible.)
leonh 17y ago
You should really take a look at Ajax.org, they show some of the smoothest interactive 3D javascript plots i have ever seen. I have just submitted it in the new section. http://www.ajax.org/public/presentation/tae/presentation2.html http://www.ajax.org/public/presentation/tae/presentation2.ht...
hadley 17y ago
Why does doesn't suck = as good as excel?
adriand 17y ago
Surprised no one has mentioned Emprise yet. http://ejschart.com/ http://ejschart.com/ Their website is not the nicest but their charts are very good, also pure Javascript, and their pricing is reasonable. We've used the library with success in a couple of projects.
ig1 17y ago
The problem with all these graphing libraries is that it's non-trivial to post the graphs elsewhere. If you have a data driven website then your users are going to want to share your graphs on facebook, twitter, forums. If you don't make it easy you're giving away a huge amount of free traffic.
albertni 17y ago
Maybe this is asking too much, but I'm seeing a ton of different recommendations in the comments - anyone have experience with many (or at least more than one) of these options and wouldn't mind going into some of the differences that stood out to them? I've Googled in the past but haven't found too many great reviews comparing some of these choices side-by-side - most seem to regurgitate the feature sets as opposed to going into the level of detail that would be most helpful for a developer.
euroclydon 17y ago
I'm looking for multiple, as in more than two, independent y-axis.
- sjs382 17y ago
  Flot is capable of this: http://people.iola.dk/olau/flot/examples/dual-axis.html http://people.iola.dk/olau/flot/examples/dual-axis.html
  - euroclydon 17y ago
    Thank example show only two, but the text seems to say you can do more.
chasingsparks 17y ago
The splines are nice: http://www.highcharts.com/demo/?example=spline-symbols&theme=default http://www.highcharts.com/demo/?example=spline-symbols&t...
rjurney 17y ago
Anyone got a good JS map chart?
- sjs382 17y ago
  http://code.google.com/apis/chart/types.html#maps http://code.google.com/apis/chart/types.html#maps
  - rjurney 17y ago
    Yeah, other than google maps :) Specifically: I want a JS map library that can read SVG maps and render in a canvas. I think I'm gonna have to build it myself.
xtho 17y ago
The charts in the demo section look uglier than Excel charts.
- bravura 17y ago
  I think the charts in the demo section look good, save for the unfortunate choices of bland yet mismatched colors (http://www.highcharts.com/demo/?example=area-stacked-percent&theme=default http://www.highcharts.com/demo/?example=area-stacked-percent...). I would prefer bland but matched colors.
rmanocha 17y ago
I've been using Google's Visualization API's for my latest work and I've been really happy with it. The API is in JS but I believe there are hooks for Python and other languages too. http://code.google.com/apis/visualization/ http://code.google.com/apis/visualization/

198 points by nym 17y ago

nym 17y ago

I'm a big fan of charts, and I'm glad to see someone made a good non-flash interactive chart solution.

piranha 17y ago
Look at protovis also.
netghost 17y ago
There are tons of good non flash ones. Someone mentioned Protovis, which is neat, but last I check it wasn't supported in IE. There is also Flot (jquery) and Flotr (prototype), and a handful of others. I use a modified version of Flotr, and it works great.
- deleted 17y ago
  [deleted]
paddy_m 17y ago
2 years ago I built chartwidget . http://demo.chartidget.com http://demo.chartidget.com I haven't quite kept up with javascript charting recently. I was aiming to build a google finance/yahoo finance competitor. The thing that always surprised me about google finance/yahoo finance charts was that they didn't take advantage of data already in the browser. When their flash charts would try to plot a moving average, they would make another request back to the server for more data, Why? The browser already has enough data to derive the moving average.
- nym 17y ago
  I think you meant: http://demo.chartwidget.com/ http://demo.chartwidget.com/
  - paddy_m 17y ago
    thanks, I'm a dummy
harry 17y ago
I used jQplot on a whim project a while ago and greatly enjoyed using it as well.

grayrest 17y ago

I strongly recommend Protovis: http://vis.stanford.edu/protovis/ex/ http://vis.stanford.edu/protovis/ex/ If graphael gets into shape it might be decent as well.

gruseom 17y ago
A cursory look suggests that Protovis doesn't work in IE. Is that correct?
- cubtastic71 17y ago
  Its IE8 that has the issues it seems - switch to compatiblity mode and it eventually renders.
  - oconnor0 17y ago
    I'm just getting "[object Error]" in IE7 with nothing beyond that - no rendering.

kylemathews 17y ago

Anyone have experience with Flot?

zackattack 17y ago
Yeah, I use it for plotting follower data for CustomerFind. The chart on the homepage (http://www.customerfind.com http://www.customerfind.com) is a screenshot of part of a user's controlpanel, and was rendered using flot. It was very easy to get flot set up, it plays nicely with the rest of my js, including jQuery. Flot is fast. P.S. CustomerFind v2 is no longer focusing on AutoFollow, though the copy on the homepage reflects otherwise [http://customerfind.posterous.com/do-you-sell-a-product-or-service-online-start http://customerfind.posterous.com/do-you-sell-a-product-or-s...]
Maciek416 17y ago
Yes, we use Flot to visualize some pretty beefy data with many data points. Flot has some very nice features and is a reasonably active project. The big problem I see with a project like Highcharts (and other Flot alternatives I've tried) is that features like animation and pretty aesthetics are center stage while performance is typically hugely lacking. We've driven Flot to its limit, and by far I can say that the winner of JS charting APIs is going to be the library that can perform well not just on Chrome but on Internet Explorer too. We've charted things here that take under 1 second to render in Firefox/Chrome/Safari while taking 10-15 minutes with the CPU pegged (yes, you read that correctly) in IE. We've gotten around it with a bit of work, but it's still a glaring problem for the APIs, and a glaring problem for projects that use HTML5 canvas, can't use excanvas.js with the Silverlight patch, but do need to serve up JS-powered charts to clients still on IE6/IE7.
- bd 17y ago
  Raphaël is pretty fast even on Explorer: http://raphaeljs.com/ http://raphaeljs.com/
  - rbanffy 17y ago
    Thanks. MIT trumps proprietary any day.

shykes 17y ago

SIMILE's Timeplot (http://www.simile-widgets.org/timeplot/ http://www.simile-widgets.org/timeplot/) is great but more specialized. Great for browsing huge datasets.

gruseom 17y ago

I'll have to look more into this library. I'm glad to see it uses SVG and VML (edit: oops - plus Canvas). That seems like the right fit for this problem, since SVG and VML have pretty close models and that way you can have native vector graphics in all browsers. Edit 2: I have a question. Are the charts on the Demo page drawing so slowly because of someone's clever idea of an animation? Or does the library actually draw that slowly?

cyen 17y ago

I've explore a bunch of JS libraries in the past - here are some thoughts: Flot and Flotr are definitely past favorites, and its usage has felt the most natural PlotKit (http://www.liquidx.net/plotkit/ http://www.liquidx.net/plotkit/) - MochiKit-based, visually nice but not as well documented or, apparently, nearly as extensive as some of the other options RGraph - an HTML5 canvas library, but pretty basic and definitely easy the least visually appealing Highcharts definitely looks like it has the nicest animations of any of the previous ones, and also definitely has the best documentation / demo gallery. Thumbs up - definitely coming this way the next time I need a nice graphing library!

iamwil 17y ago
plotkit is kinda nice, but you can't plot multiple lines on the same graph well. You can, but by default, it distinguishes between different lines by coloring the area underneath it. And when you do, it's all opaque. If you try to color the lines themselves, it turns ugly.

tom_b 17y ago

Bullet graphs and sparklines as default chart options please? After Tufte and Few, I basically look for these first when evaluating any chart library.

nym 17y ago
Like this? http://omnipotent.net/jquery.sparkline/ http://omnipotent.net/jquery.sparkline/

akronim 17y ago

Nice, but pretty slow to render for me (on FF3.5). Actually it's more that it pauses at about one quarter rendered and looks broken for a second before it finally renders.

watmough 17y ago
It's pretty darn slick on safari 4.0.4 on an iMac.
- TeHCrAzY 17y ago
  It doesnt display on IE8. That pretty much makes it useless as far as I'm concerned.

freetard 17y ago

I prefer http://www.jqplot.com/ http://www.jqplot.com/ it's free and open source.

va_coder 17y ago

I recommend Fusion charts free (and opensource) (it's flash though)

revorad 17y ago

Has anyone used the paid versions of Highcharts or any others mentioned in this thread? What do you think of the Highcharts price points - $80 for single commercial site, $360 for multiple sites? I'm working on a graphing app too and trying to decide my pricing.

alex_c 17y ago
At first glance, it looks sleek, polished, and feature-rich. Not sure yet if we'll need charts for the project I'm currently working on, but if we do, we'll definitely consider it - $80 sounds reasonable.
smiler 17y ago
It's very cheap but then you get what you pay for. The best and fully featured graphing capabilities are from Dundas imo (www.dundas.com). They charge about $3000 / developer licence and then $3000 / server that you run it on. If you priced it somewhere between the two and it had a good feature set I might bite. It would have to support printing though (and generating a PDF would be a big plus)
- revorad 17y ago
  Thanks for the info, smiler. I can tell you PDF will definitely be there, so printing will follow. It would be helpful if you could share more about your use cases. Dundas looks mainly aimed at .Net development; is that what you need it for? Email me at hrishimittal@gmail.com and I'll put you on our early adopters discount list.
  - smiler 17y ago
    Use cases are pretty simple - building reports for MIS, corporate systems etc... all of them use Windows servers so asp.net is the standard for development hence Dundas
    - revorad 17y ago
      OK. Well, I won't promise too much but would be happy to help you try out our initial offering. Feel free to email me or look out for my Ask HN review post in the next few weeks. Cheers!

smiler 17y ago

Print a graph and you get a blank space. Useless

artpop 17y ago
Seems okay in Safari.
Huppie 17y ago
You can make sure an image appears in place of the chart with a css-file for printing-purposes only. (Or do it the other way around. By default show an image and use JS to replace that image with a chart when possible.)

leonh 17y ago

You should really take a look at Ajax.org, they show some of the smoothest interactive 3D javascript plots i have ever seen. I have just submitted it in the new section. http://www.ajax.org/public/presentation/tae/presentation2.html http://www.ajax.org/public/presentation/tae/presentation2.ht...

hadley 17y ago

Why does doesn't suck = as good as excel?

adriand 17y ago

Surprised no one has mentioned Emprise yet. http://ejschart.com/ http://ejschart.com/ Their website is not the nicest but their charts are very good, also pure Javascript, and their pricing is reasonable. We've used the library with success in a couple of projects.

ig1 17y ago

The problem with all these graphing libraries is that it's non-trivial to post the graphs elsewhere. If you have a data driven website then your users are going to want to share your graphs on facebook, twitter, forums. If you don't make it easy you're giving away a huge amount of free traffic.

albertni 17y ago

Maybe this is asking too much, but I'm seeing a ton of different recommendations in the comments - anyone have experience with many (or at least more than one) of these options and wouldn't mind going into some of the differences that stood out to them? I've Googled in the past but haven't found too many great reviews comparing some of these choices side-by-side - most seem to regurgitate the feature sets as opposed to going into the level of detail that would be most helpful for a developer.

euroclydon 17y ago

I'm looking for multiple, as in more than two, independent y-axis.

sjs382 17y ago
Flot is capable of this: http://people.iola.dk/olau/flot/examples/dual-axis.html http://people.iola.dk/olau/flot/examples/dual-axis.html
- euroclydon 17y ago
  Thank example show only two, but the text seems to say you can do more.

chasingsparks 17y ago

The splines are nice: http://www.highcharts.com/demo/?example=spline-symbols&theme=default http://www.highcharts.com/demo/?example=spline-symbols&t...

rjurney 17y ago

Anyone got a good JS map chart?

sjs382 17y ago
http://code.google.com/apis/chart/types.html#maps http://code.google.com/apis/chart/types.html#maps
- rjurney 17y ago
  Yeah, other than google maps :) Specifically: I want a JS map library that can read SVG maps and render in a canvas. I think I'm gonna have to build it myself.

xtho 17y ago

The charts in the demo section look uglier than Excel charts.

bravura 17y ago
I think the charts in the demo section look good, save for the unfortunate choices of bland yet mismatched colors (http://www.highcharts.com/demo/?example=area-stacked-percent&theme=default http://www.highcharts.com/demo/?example=area-stacked-percent...). I would prefer bland but matched colors.

rmanocha 17y ago

I've been using Google's Visualization API's for my latest work and I've been really happy with it. The API is in JS but I believe there are hooks for Python and other languages too. http://code.google.com/apis/visualization/ http://code.google.com/apis/visualization/