This is going to be
a bare bones how to install and use Highstock.
But first of all
what is Highstock?
To quote the site
Highstock lets you create stock or
general timeline charts in pure JavaScript, including sophisticated navigation
options like a small navigator series, preset date ranges, date picker,
scrolling and panning. [1]
It is highly
compatible with different browsers even going so far back as to support
IE6. Its free to use for non-commercial
work. For a commercial license you can
go to this page http://shop.highsoft.com/highstock.html [3]. I think their licensing is very
reasonable and gives you a lot of control.
To see a demo of
what it can do go to this site.
Here is highcharts how to page http://www.highcharts.com/documentation/how-to-use [4] This document is based off this document.
Download Highstock
from their web site http://www.highcharts.com/download
[4]
Click on highstock
1.1.6
The zip file
downloaded has lots of examples as well as the code
Expand the zip
folder and copy the js folder to a new folder.
In that folder
create a new document called test.html
Highcharts requires
JQuery, MooTools, or Prototype. For this
example I will keep it simple and use JQuery.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/highstock.js"></script>
</head>
<body>
</body>
</html>
|
Now within the body
add in a div to place the graph in.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/highstock.js"></script>
</head>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
|
Next add in the
javascript code to add a highchart graph
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/highstock.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
// Create the chart
window.chart
= new
Highcharts.StockChart({
chart
: {
renderTo
: 'container'
},
rangeSelector
: {
selected
: 1
},
title
: {
text
: 'Example'
},
series
: [{
name
: 'Data',
data
: [1, 2, 3, 4, 3, 1],
tooltip:
{
valueDecimals:
2
}
}]
})
})
//]]>
</script>
</head>
<body>
<div id="container"
style="height: 500px; min-width: 500px"></div>
</body>
</html>
|
The chart is
rendered to ‘container’ and its data
points are [1, 2, 3, 4, 3, 1]
This makes a very
uninteresting graph. In fact the data is
not really appropriate for Highchart.
It lacks dates for the data.
It does not
specifically mention it in the API but if you feed in data with epoch time and
data as shown below it will graph it with dates.
series : [{
name : 'Data',
data : [
[1343779200000,1],
[1343865600000,2],
[1343952000000,3],
[1344211200000,4],
[1344297600000,3],
[1344384000000,1],
[1344470400000,2]
],
tooltip: {
valueDecimals: 2
}
}]
|
Hovering over a
point now shows the date.
This gives you the
barebones of Highchart.
References
[1] Highstock page
Visited 8/2012
[2] Highstock demo
Visited 8/2012
[3] Highstock
licensing
Visited 8/2012
[3] Download page
Visited 8/2012
[4] Highcharts – How
to Use
Visited 8/2012
[5] Highcharts – Api
reference
Visited 8/2012
dear sir.... good tutorial... but can you help me how to read data on mysql and show it on chart? thank you very much
ReplyDelete