1. demo1 composite indicator graph
<html>
<head>
<meta name="viewport" content="width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script>
$(document).ready(function() {
//array of 24 hours a day
var mycars=new Array();
for(var i = 0;i < 24; i++) {
mycars[i] = i+":00-" + (i+1) + ":00" ;
}
//traffic (customer flow)
var traffic_data = eval("[20, 34, 59, 26, 54, 56, 42, 38, 47, 59, 75, 12, 23, 59, 109, 0, 55, 452, 75, 236, 14, 44, 2, 8]");
//sales
var cumulative_sales_data = eval("[420, 758, 594, 366, 459, 252, 446, 381, 417, 549, 715, 112, 231, 591, 149, 145, 505, 125, 715, 276, 140, 414, 241, 801]");
//traget Sales (target sales)
var target_cumulative_sale_data = eval("[411, 525, 424, 452, 445, 441, 774, 568, 147, 414, 444, 222, 478, 145, 758, 414, 444, 789, 236, 456, 257, 478, 412, 236]");
$("#container2").highcharts({
chart: {
zoomType: 'xy',
height: 465,
marginBottom: 130,
resetZoomButton: {
position: {
align: 'center',
and: 400
},
relativeTo: 'chart'
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
and: 10
},
title: {
text: 'Real-time report',
style: {
color: '#89A54E',
fontWeight: 'bold'
}
},
xAxis: [{
title: {text: 'Real-time report/hour'},
gridLineWidth: 1,
categories: mycars //display an array of x-axis data
}],
yAxis: [{
gridLineWidth: 0,
title: {
text: 'SALES',
style: {
color: '#000'
}
},
labels: {
formatter: function() {
return '$' + this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.00';
},
style: {
color: '#000',
fontWeight: 'bold'
}
},
opposite: true,
min: 0
},
{
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#000',
fontWeight: 'bold'
}
},
title: {
text: 'TRAFFIC',
style: {
color: '#000',
fontWeight: 'bold'
}
},
min: 0,
gridLineWidth: 0
}],
tooltip: {
shared: true
},
series: [{
name: 'Sales',
color: '#89A54E',
type: 'spline',
marker: {
enabled: false
},
data: cumulative_sales_data,
tooltip: {
valuePrefix: '$'
}
},
{
name: 'Target Sales',
type: 'spline',
color: '#7a7a7a',
marker: {
enabled: false
},
data: target_cumulative_sale_data,
tooltip: {
valuePrefix: '$'
}
},
{
name: 'Traffic',
color: '#4572A7',
type: 'spline',
marker: {
enabled: false
},
yAxis: 1,
data: traffic_data,
tooltip: {
valueSuffix: ''
}
}],
lang: {
noData: 'No data available. '
}
});
});
</script>
</head>
<body scroll="auto">
<div id="container2"></div>
</body>
</html>