Using Highcharts JavaScript Library

12 January 2010| 17 Comments| Print

There are some great JavaScript graph libraries out there and one that’s recently come to my attention is Highcharts.com which is compatible with both the jQuery and Mootools frameworks. To get started point your browser here where you can download all the files you need including examples. Highcharts features include slick tooltips to reference points on your charts, it’s compatible with all standard web browsers, the setup for a graph as demonstrated below is simple and uses the JSON data type, there are also multiple types of graph type, from line, spline, area, areaspline, column, bar, pie and scatter chart.

graph

The Code

Here’s how to setup a simple chart. you need to include the jQuery framework as well as the highcharts.js file and excanvas.js file for IE users which you’ll get in the download from Highcharts. once you’ve got that setup simply paste this into your document head, and create a div with the id ‘graphDiv’, this is where the graph will render to. Note in the first few lines of setup code at the top of the script we specify this along with the chart type. In this case we’re using a bar chart. Below that we have the setup title parameter which is the main label for the graph along with the labels for the x and y axis.

You should be left with a graph as shown below.

HighCharts Fruit Chart


   $(document).ready(function() {
      var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'graphDiv',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Anne',
            data: [1, 0, 4]
         }, {
            name: 'Martin',
            data: [5, 7, 3]
         }]
      });
   });

NOTE: the demo below is not of the code above. If you want to play around with the code for the demo you can simply copy the source from your web browser whilst viewing the demo

Steps to learning a new programming language

Ketchup jQuery form validation

We Deliver – a 24hr project

jQuery Event Delegation

How to create a jQuery category drop down

17 Comments

Jay

Great will be using this soon. Im a big fan of your blog! keep it up! Great content!.

12 January 2010 at 12:58 pm

Jason

Why not google chart api?

12 January 2010 at 2:56 pm

Ashley (author)

@Jay thanks for the comment and feedback!

12 January 2010 at 3:01 pm

Ashley (author)

@Jason don’t get me wrong, the Google Chart API is great but it’s not the only chart framework on the market

12 January 2010 at 3:02 pm

Jason

for my suck computer, it works a bit slow and delay

12 January 2010 at 7:40 pm

Tweets that mention Using Highcharts JavaScript Library | Papermashup.com -- Topsy.com

[...] This post was mentioned on Twitter by bkmacdaddy designs, Mike Sprague, Richard Laksana, jQueryBuzz, Bali Website Design and others. Bali Website Design said: Using #Highcharts javascript library compatible with #jQuery & #Mootols http://tr.im/Kemr [...]

13 January 2010 at 2:23 am

uberVU - social comments

Social comments and analytics for this post…

This post was mentioned on Twitter by lazorstudios: Using Highcharts #JavaScript #Library http://bit.ly/5uZzB9 #webdev #jquery #charts #visualization…

13 January 2010 at 8:07 am

Scott

Can the data be pulled from a database (mysql)?

16 January 2010 at 1:10 am

Ashley (author)

@Scott, yes you can easily pull data from a database and populate the graph you’d need to pull the data and push it into an array within a while loop, if you send me your email address i can send you an example i have.

16 January 2010 at 10:10 am

sasa

hi ashley,

i just want to pull my data from mysql. maybe you can send me your sample file to my email-address: sak1981@web.de

thanks in advance

25 January 2010 at 6:51 pm

Debbie

Ashley (author),
I noticed that you said you can easily pull data from a database and populate the graph by pushing it into an array within a while loop. Would you mind sending me an example of this? Currently I am setting up the data: as follows:
data: [result[0],result[1],result[2],result[3]]
A while loop would be great to utilize here.

Thanks

27 January 2010 at 9:51 pm

Ashley (author)

@debbie, send me your email address using the contact form right at the top of the page and i’ll email you my example.

Ash

27 January 2010 at 10:30 pm

Jay

Hi Ashley,

Me to please email me a good example. Thanks

29 January 2010 at 10:21 am

Ashley (author)

@Jay, no problem, i’ll email you the code when I’m back home tonight.

29 January 2010 at 11:41 am

Alex

Hi Ashley,
Could you e-mail me an example as well for using a loop to set up data:
Thanks in advance.
Alex

5 February 2010 at 10:01 pm

Linkhub – Woche 05-2010 « pehbehbeh

[...] Eine nützliche JavaScript Library, um Charts zu erstellen: JavaScript Highcharts Library [...]

7 February 2010 at 8:47 pm

Ryan

Highcharts is great! Depending on your development language you can find helpers to help with using ‘external’ data. Here is a Ruby on Rails plugin http://github.com/loudpixel/highcharts-rails and I know there are PHP versions out there.

25 February 2010 at 3:29 am