Friday, December 4th, 2009

Highcharts: Really nice charting API

Category: JavaScript, Library

We all want better and better charting libraries. Dojo has some good stuff, Protovis is a good option, and there are many many more (put your favourite below!).

The latest guy in the ring is Highcharts uses either jQuery or MooTools for some common JavaScript tasks. In addition, Internet Explorer needs ExCanvas which emulates the Canvas element.

For some simple code like this:

javascript

  1. var chart1 = new Highcharts.Chart({
  2.          chart: {
  3.             renderTo: 'chart-container-1',
  4.             defaultSeriesType: 'bar'
  5.          },
  6.          title: {
  7.             text: 'Fruit Consumption'
  8.          },
  9.          xAxis: {
  10.             categories: ['Apples', 'Bananas', 'Oranges]
  11.          },
  12.          yAxis: {
  13.             title: {
  14.                text: 'Fruit eaten'
  15.             }
  16.          },
  17.          series: [{
  18.             name: 'Jane',
  19.             data: [1, 0, 4]
  20.          }, {
  21.             name: 'John',
  22.             data: [5, 7, 3]
  23.          }]
  24.       });

You can get nice charts like this:

highcharts

Be sure to check out the demo gallery.

Posted by Dion Almaer at 6:36 am
15 Comments

++++-
4.1 rating from 49 votes

15 Comments »

Comments feed TrackBack URI

Fantastic! I am using right now..

Comment by zechim — December 4, 2009

Works really well, I’m amazed at how non-resource intensive it is.

Too bad their commercial pricing prices are so uncompetitive, but it looks like it’ll be great for some projects.

Comment by ajaxianreader123 — December 4, 2009

Not Open Source :-(

Comment by MartijnHoutman — December 4, 2009

Can you use these charts as sparklines?
I don’t see any sparkline demos.

Comment by Les — December 4, 2009

To add to my last comment in case the creators behind Highcharts are watching: If you undercut Fusion Charts, who really are the standard right now, by a significant amount you’ll have more customers than you know what to do with.

Comment by ajaxianreader123 — December 4, 2009

Two more:

http://www.ejschart.com/
http://bluff.jcoglan.com/

Comment by Les — December 4, 2009

I really like these charts, and $360 versus $499 is undercutting Fusion Charts (for the unlimited site development license). Ajazianreader is right that $80 for a single site license is higher than Fusion’s $69, but from what I see with these charts I’d gladly pay the extra amount.

Comment by smfoushee — December 4, 2009

$360 isn’t an unlimited site license, it allows you to deploy it on your own sites. You need to contact them for the site license, which means it’s probably in the same ballpark as Fusion Charts.

Comment by ajaxianreader123 — December 4, 2009

Highcharts supports IE. Protovis currently does not support IE.

http://groups.google.com/group/protovis/browse_thread/thread/c035035880f12857

Comment by Les — December 4, 2009

Flot anyone?
http://code.google.com/p/flot/

Comment by joublie — December 4, 2009

These are really nice charts. I normally use the .Net Chart Control but these pure js charts look amazing. Much nicer than .net rendering an image for a chart ;)

Comment by RichardReddy — December 7, 2009

I like Raphael’s charts: http://raphaeljs.com/
JS Charts isn’t too bad either: http://www.jscharts.com/

I should really try out some of these other ones suggested. I’m still using PlotKit (http://www.liquidx.net/plotkit/) on my website.

Comment by Sembiance — December 8, 2009

Round up of 28 Tools for Rich Data Visualizations on InsideRIA- numerous Ajax charting libraries included.

Comment by theresaneil — December 10, 2009

excellent
thanks

Comment by Aphrodisiac — January 15, 2010

Great post
I found those posts useful too:
http://eremiya.net/2010/11/02/jquery-highcharts-and-coldfusion-tutorial-part-1/

and this one for flot:
http://eremiya.net/2009/07/08/jquery-flot-tutorial-part-1/

Hope this help.

Comment by eremiya — November 7, 2010

Leave a comment

You must be logged in to post a comment.