Papermashup

Subscribe


Tweets


"@ParceIForceUK waited in all day. Driver didn't even bother ringing bell. Told he would come back on phone. Never showed up. Awful service!"

@ashleyford 1 day ago

"The ultimate guide to product photography. https://t.co/NleYQtkitr https://t.co/QFvajpi2cp"

@ashleyford 1 day ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Using Highcharts JavaScript Library

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 56
  • Magda
    Posted on

    Magda Magda

    Reply Author

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


  • Alvin
    Posted on

    Alvin Alvin

    Reply Author

    Hello, can do you have an example of your database array setup for the charts, very nice website..thanks


  • dedye
    Posted on

    dedye dedye

    Reply Author

    how to show button print and export image in highchart. because this chart show about this feature. thanks


  • wannie
    Posted on

    wannie wannie

    Reply Author

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


  • susmit roy
    Posted on

    susmit roy susmit roy

    Reply Author

    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?


  • Narender Ramavath
    Posted on

    Narender Ramavath Narender Ramavath

    Reply Author

    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


  • Narender Ramavath
    Posted on

    Narender Ramavath Narender Ramavath

    Reply Author

    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


  • Adrian
    Posted on

    Adrian Adrian

    Reply Author

    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


  • Faris
    Posted on

    Faris Faris

    Reply Author

    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


  • soft
    Posted on

    soft soft

    Reply Author

    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.


  • Andrew
    Posted on

    Andrew Andrew

    Reply Author

    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


  • prasad
    Posted on

    prasad prasad

    Reply Author

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


  • ghouse
    Posted on

    ghouse ghouse

    Reply Author

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


  • ghouse
    Posted on

    ghouse ghouse

    Reply Author

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


  • Rahul
    Posted on

    Rahul Rahul

    Reply Author

    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


  • s2
    Posted on

    s2 s2

    Reply Author

    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.


  • Ichabod
    Posted on

    Ichabod Ichabod

    Reply Author

    Directly from the Highcharts forum :

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


  • raji
    Posted on

    raji raji

    Reply Author

    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


  • raji
    Posted on

    raji raji

    Reply Author

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


  • Pablo
    Posted on

    Pablo Pablo

    Reply Author

    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


  • andrzej
    Posted on

    andrzej andrzej

    Reply Author

    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.


  • alex
    Posted on

    alex alex

    Reply Author

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


  • rpwit
    Posted on

    rpwit rpwit

    Reply Author

    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);
    }
    );
    })


  • Tim
    Posted on

    Tim Tim

    Reply Author

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


  • willi
    Posted on

    willi willi

    Reply Author

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


  • Jeremie
    Posted on

    Jeremie Jeremie

    Reply Author

  • Hadi Akmal
    Posted on

    Hadi Akmal Hadi Akmal

    Reply Author

    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


  • AndrewP
    Posted on

    AndrewP AndrewP

    Reply Author

    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 !


  • Parag – Java Developer
    Posted on

    Parag – Java Developer Parag – Java Developer

    Reply Author

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


  • vincent
    Posted on

    vincent vincent

    Reply Author

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

    vincent0258[@]aol.com


  • henry
    Posted on

    henry henry

    Reply Author

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


  • Steve Butler
    Posted on

    Steve Butler Steve Butler

    Reply Author

    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


  • johnzan
    Posted on

    johnzan johnzan

    Reply Author

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

    Thanks,
    J


  • Michael
    Posted on

    Michael Michael

    Reply Author

    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


  • zak
    Posted on

    zak zak

    Reply Author

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

    Can you also send me the sample for the while loop

    Thanks


  • pae
    Posted on

    pae pae

    Reply Author

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


  • Hayder Abbass
    Posted on

    Hayder Abbass Hayder Abbass

    Reply Author

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


  • pae
    Posted on

    pae pae

    Reply Author

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

    Thanks


  • mirodeniro
    Posted on

    mirodeniro mirodeniro

    Reply Author

    Hi Ashley,

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


  • Ryan
    Posted on

    Ryan Ryan

    Reply Author

    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.


  • Alex
    Posted on

    Alex Alex

    Reply Author

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


  • Jay
    Posted on

    Jay Jay

    Reply Author

    Hi Ashley,

    Me to please email me a good example. Thanks


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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


  • Debbie
    Posted on

    Debbie Debbie

    Reply Author

    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
      Posted on

      Ashley Ashley

      Reply 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


  • sasa
    Posted on

    sasa sasa

    Reply Author

    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


  • Scott
    Posted on

    Scott Scott

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

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


  • Jason
    Posted on

    Jason Jason

    Reply Author

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


  • Jason
    Posted on

    Jason Jason

    Reply Author

    Why not google chart api?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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


  • Jay
    Posted on

    Jay Jay

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Jay thanks for the comment and feedback!