Using Highcharts JavaScript Library
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.
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.
$(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
Great will be using this soon. Im a big fan of your blog! keep it up! Great content!.
Why not google chart api?
@Jay thanks for the comment and feedback!
@Jason don’t get me wrong, the Google Chart API is great but it’s not the only chart framework on the market
for my suck computer, it works a bit slow and delay
[...] 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 [...]
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…
Can the data be pulled from a database (mysql)?
@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.
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
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
@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
Hi Ashley,
Me to please email me a good example. Thanks
@Jay, no problem, i’ll email you the code when I’m back home tonight.
Hi Ashley,
Could you e-mail me an example as well for using a loop to set up data:
Thanks in advance.
Alex
[...] Eine nützliche JavaScript Library, um Charts zu erstellen: JavaScript Highcharts Library [...]
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.
Hi Ashley,
Me too please, email me a good example.
Need data from oracle database.
Thanks
Hi,
Can i get the lopp example also? I need to read data from mysql.
Thanks
So many peaple asking to send a working example Ashley . come on , paste to code right here dude ^^
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….
Hi!
Can this work on mobile platforms – iphone, blackberry
Can you also send me the sample for the while loop
Thanks
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
Hi Ashley, I’d appreciate a copy of the code to read data from MySQL as well.
Thanks,
J
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
Hi Ashley,
Please, share your code to populate data from mysql.
my e-mail is baghiras@gmail.com. thanks….
HI,
somebody can explain how to use highcharts with data from mysql ?? thanks
vincent0258[@]aol.com
Is HighChart supported on iPhone,BlackBerry and Android ?
Or Can anyone plzz temme which all JavaScript Charting libraries are supprted by these mobile devices ?
Leave a comment...
Connect
Latest Poll
Recent Posts