If you ever need to create
dynamic interactive charts for you’re
projects and you don’t know exactly how to do it or what to use, then Highstock may be a good solution for you. Highstock is a
charting library written in pure JavaScript that lets you create stock or
general timeline charts with sophisticated navigation options, preset date
ranges, date picker, scrolling and panning.Highstock needs only three JavaScript files to run: the highstock.js, exporting.js (if you want to export the chart as .PDF, .JPEG or .PNG file) and either jQuery, MooTools or Prototype framework. You don’t need to use PHP, ASP.NET or client side plugins like Flash or Java to make Highstock work.
Highstock supports line, spline, area, areaspline, column, scatter, OHLC, candlestick and flags chart types. The best thing of Highstock is that you can combine any of these char types in one chart. To test it, I’ve use two CSV files with data statistics for two websites.
The CSV files contain a date and a value per each row and it looks like this:
...
1-6-2012,10
2-6-2012,30
3-6-2012,50
4-6-2012,40
5-6-2012,67
6-6-2012,89
...
And the code is:
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Highstock
Example</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
type="text/javascript">
var site01
=[];
var site02 =
[];
$(function()
{
jQuery.ajax({
url:
'site02.csv',
success:
function(data) {
// Split
the lines
var lines
= data.split('\n');
$.each(lines, function(lineNo, line) {
var index
= line.indexOf(",");
var dm =
line.substr(0,index);
var
valoare = line.substr(index+1);
valoare =
$.trim(valoare);
var
points = dm.split('-');
if
(valoare=='null'){
site02.push([Date.UTC(points[2],(points[1]-1),points[0]),null]);
}else{
site02.push([Date.UTC(points[2],(points[1]-1),points[0]),parseFloat(valoare)]);
}
});
if(data.isOk == false)
alert("Error loading site02.csv !");
},
async:
false
});
jQuery.ajax({
url:
'site01.csv',
success:
function(data) {
// Split
the lines
var lines
= data.split('\n');
$.each(lines, function(lineNo, line) {
var index
= line.indexOf(",");
var dm =
line.substr(0,index);
var
valoare = line.substr(index+1);
valoare =
$.trim(valoare);
var
points = dm.split('-');
if
(valoare=='null'){
site01.push([Date.UTC(points[2],(points[1]-1),points[0]),null]);
}else{
site01.push([Date.UTC(points[2],(points[1]-1),points[0]),parseFloat(valoare)]);
}
});
if(data.isOk == false) {
alert("Error loading site01.csv !");
} else {
createChart();
}
},
async:
false
});
// create
the chart when all data is loaded
function
createChart() {
chart = new
Highcharts.StockChart({
chart: {
renderTo:
'container',
zoomType:
'x'
},
plotOptions: {
series: {
marker:
{
enabled: true
}
}
},
credits: {
enabled:
false
},
navigation: {
buttonOptions: {
align:
'right'
}
},
exporting:
{
width:
1000
},
title: {
text:
'Highstock demo'
},
subtitle:
{
text:
'Introducing Highstock JavaScript library'
},
rangeSelector: {
selected:
1
},
tooltip: {
valueSuffix: ' views/day'
},
yAxis: {
labels: {
formatter: function() {
return
this.value +' views';
}
},
title: {
text:
'Values'
}
},
series: [{
name:
'www.site-01.com',
data:
site01,
connectNulls: false,
pointStart: Date.UTC(1970, 0, 1),
pointInterval: 3600 * 1000
},
{
name:
'www.site-02.com',
data:
site02,
connectNulls: false,
pointStart: Date.UTC(1970, 0, 1),
pointInterval: 3600 * 1000
}
]
});
}
});
</script>
<script
type="text/javascript" src="highstock.js"></script>
<script
type="text/javascript" src="exporting.js"></script>
</head>
<body>
<div
id="container" style="height: 450px; width: 1000px"></div>
</body>
</html>
At the end, the chart will look like this:
