Using Highcharts JavaScript Library

Using Highcharts JavaScript Library

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 12, 2010

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

More tutorials from Papermashup
Comments
53 discussions around Using Highcharts JavaScript Library
  1. wannie says:

    Please I need one example to get data from Oracle / MS SQL,,
    I am currently working on this case …for highcharts..
    wannieja@hotmail.com

  2. susmit roy says:

    Hi Ashley,
    Thnks for the nice post. Do you have any example of Highchart drill down in .net. If you do have can you plz mail me the same at susmit_roy2000@yahoo.co.in?

  3. Narender Ramavath says:

    I need information about highcharts with MySQL, Oracle, sqland postgresql data records.If anybody having code please share to my mail id:
    narender.ramavath9@gmail.com

  4. Narender Ramavath says:

    Please I need one example to get data from Oracle / MS SQL,,
    I am currently working on this case …for highcharts..

    narender.ramavath9@gmail.com

  5. Adrian says:

    Please someone can provide a example of how send data from server side to plot with highchart, if can be using asp.net mvc 3 it would be a great help, thanks to all!

    albalat@capiro.vcl.sld.cu

  6. Faris says:

    Please I need one example to get data from Oracle / MS SQL,,
    I am currently working on this case ,,
    Any body has the example please send it to me ,,
    My Email : faris_rjoup@hotmail.com ..
    Thanks in advanced ..
    Faris

  7. soft says:

    hello ash,
    i am in great panic need your support,
    can you send me an example from where we get data from the db.
    i had try each loop actually i dont know asp.net
    i am trying this for a week ,but nothing comes just waste of time,
    can you help me.please..
    i am really waiting for reply.

  8. Andrew says:

    Hello :) , as I see people loking for a solution to import data directly from dbase. If it can be possible, please, send your example to me. I think it can help me with my figth with this problem.

    brgs, Andrew dab4ma@wp.eu

  9. prasad says:

    Hi Ashley,
    Please send me the code for , fetch mysql data in highcharts.
    Thanks in advance.

  10. ghouse says:

    ghouse.mohd16@gmail.com this is my email id send me a simple example…

  11. ghouse says:

    HI,
    somebody can explain how to use highcharts with data from mysql ?? thanks ….

  12. Rahul says:

    Hi Ashley, I need information about highcharts with MySQL data records.
    May you send me an example please. Thank you.
    –Rahul
    my email :rahul.9269@gmail.com

    Its urgent ,,i m stuck in my project

    Thanks in advance

  13. s2 says:

    I am trying to use ‘Ajax loaded data, clickable points’ example in my java application. This example works fine as it is with analytics.tsv file. But i want to use data from given arraylists. I have read Highcharts API reference library and tried various ways to build series data but chart simple refuses to display.
    I need your help. Is there any example to show data in this chart taken out of an array etc rather than .TSV file.

  14. Ichabod says:

    Directly from the Highcharts forum :

    var chart = new Highcharts.Chart({
    chart: {
    renderTo: ‘container’
    },
    series: [{
    data: []
    }]
    });

  15. raji says:

    please forward one example to my mail id how to give Dynamic data into J query Script. (i have very urgency)
    Mail Id: raji.sforce@gmail.com

    Advance thanks

  16. raji says:

    How to use this javascript in my VF page(Salesforce ) or Html

  17. Pablo says:

    Hi Ashley, I need information about highcharts with MySQL data records.
    May you send me an example please. Thank you.

    Greetings from Chile.
    PD: my email son_gokuh_jr17@hotmail.com

  18. andrzej says:

    Hi Ashley,
    great article, it was very helpful.
    I have a problem with labels of xaxis and spent hours trying to solve it. My xaxis represents names of RNA molecules (e.g. mir989, mir234a, mir547b) and these are just strings. Each molecule has its own expression level in cell and this value is pointed by yaxis. To date, I have more then 300 categories in xAxis, but this number still increases. Consequently, when the chart is in the initial state (scale 1:1), all these guys are crowded and it’s impossible to read anything even if I place them vertically. In this case, a recipe for success would be a column chart with sliding window, so I can move along the xaxis. I’m helpless at this point. I was trying to modify the following example: http://www.highcharts.com/demo/dynamic-master-detail but all the efforts failed. Any help would be appreciated.

  19. alex says:

    Hi ashley, i need the example code of retrieving mysql data for highchart too. please send it to me. Cheers :)

  20. rpwit says:

    For everyone who wanted to know how to dynamically load data into a Highchart (or any other graphing area), I used the extremely simple jQuery .get ajax call. This code snippet just requests the server (ColdFusion in my case) to return the chart HTML into the #PriceGraph div. The chart HTML is generated by dynamically invoking the Highcharts.Chart object in the PriceGraph_Issues.cfm (not shown) in another page. The data is pulled from SQL Server but could be from any other supported DB type.

    $(function() {
    var issueList = [#URL.Issues#];
    for ( i in issueList ) {
    var chk_id = ‘chk_’ + issueList[i];
    $(‘#’ + chk_id).attr(‘checked’,true);
    };
    $.get( ‘/common/CompanyDetails/PriceGraph_Issues.cfm’,
    { Issues: “#URL.Issues#” },
    function(data) {
    $(‘#PriceGraph’).html(data);
    }
    );
    })

  21. Tim says:

    Can data be dynamically added via an html form on submit?

  22. willi says:

    hey ashley, can you share the sample how to pull data from mysql to highcharts?
    thanx

  23. Hadi Akmal says:

    Hello everyone,

    I found one website that could help linking database and highchart but its in Indonesian language. Use google translate if you still interested :)

    http://translate.google.com/translate?js=y&prev=_t&hl=ms&ie=UTF-8&layout=1&eotf=1&u=http%3A%2F%2Fri32.wordpress.com%2F2010%2F05%2F18%2Fmembuat-grafik-dinamis-dengan-highcharts%2F&sl=id&tl=en&act=url

  24. AndrewP says:

    Hey Ashley…

    Can you please, send me your sample or link where I can read about how to populate a highchart with MySQL data records?

    Thank you in advance!

    Andrew Puig !

  25. Parag - Java Developer says:

    Is HighChart supported on iPhone,BlackBerry and Android ?
    Or Can anyone plzz temme which all JavaScript Charting libraries are supprted by these mobile devices ?

  26. vincent says:

    HI,
    somebody can explain how to use highcharts with data from mysql ?? thanks :)

    vincent0258[@]aol.com

  27. henry says:

    Hi Ashley,
    Please, share your code to populate data from mysql.
    my e-mail is baghiras@gmail.com. thanks….

  28. Steve Butler says:

    Hi Ashley, I aslo would request if you could send me the php sample code to read from mysql. I will greatly appreciate. thanks in Advance

  29. johnzan says:

    Hi Ashley, I’d appreciate a copy of the code to read data from MySQL as well.

    Thanks,
    J

  30. Michael says:

    Ashley,
    Nice site, I’ve bookmarked it
    any chance you could email me the sample that reads from the db and into the chart

    thanks
    Michael

  31. zak says:

    Hi!
    Can this work on mobile platforms – iphone, blackberry

    Can you also send me the sample for the while loop

    Thanks

  32. pae says:

    Hi,
    How to use javascript print function to print highcharts?
    I’m trying to print using window.print(), the dotted point for scatter graph not printed out. The only things that come out is the x-axis and y-axis and the title. Can somebody help me?

    Thank you….

  33. So many peaple asking to send a working example Ashley . come on , paste to code right here dude ^^

  34. pae says:

    Hi,
    Can i get the lopp example also? I need to read data from mysql.

    Thanks

  35. mirodeniro says:

    Hi Ashley,

    Me too please, email me a good example.
    Need data from oracle database.
    Thanks

  36. Ryan says:

    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.

  37. Pingback: Linkhub – Woche 05-2010 « pehbehbeh

  38. Alex says:

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

  39. Jay says:

    Hi Ashley,

    Me to please email me a good example. Thanks

  40. Debbie says:

    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

  41. sasa says:

    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

  42. Scott says:

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

    • Ashley says:

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

  43. Pingback: uberVU - social comments

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

  45. Jason says:

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

  46. Jason says:

    Why not google chart api?

  47. Jay says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

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

Looking for a registry cleaner to speed up your PC and show a full diagnostics?
Faster surfing with Dish Network High Speed Internet

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in touch.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com you can find details here Or use the contact link below for further advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.