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

demo

17 Comments

  • Jay

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

  • Jason

    Why not google chart api?

  • Ashley (author)

    @Jay thanks for the comment and feedback!

  • 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 :)

  • Jason

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

  • 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 [...]

  • 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…

  • Scott

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

  • 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.

  • 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

  • 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

  • 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

  • Jay

    Hi Ashley,

    Me to please email me a good example. Thanks

  • Ashley (author)

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

  • Alex

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

  • Linkhub – Woche 05-2010 « pehbehbeh

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

  • 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.

Leave a comment...

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled site. To get your own globally-recognized-avatar, register at Gravatar.