graph_ondemand-highstock
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="selApp">
<label for ="drpApp"> Select Application : </label>
<select id="drpApp">
<option value="g1" selected>app1</option>
<option value="g2">app2</option>
<option value="g1">app3</option>
</select>
<label for ="drpType"> Select Type : </label>
<select id="drpType">
<option value="series" selected>Series</option>
<option value="series">Spider</option>
<option value="column">column</option>
</select>
</div>
<div id="container" style="height: 400px"></div>
CSS
label {
margin-left:15px;
}
JavaScript
$(function () {
//load graph also on click of app
$("#drpApp").on("change", function (e) {
loadGraph();
});
$("#drpType").on("change", function (e) {
loadGraph();
});
// loadGraph();
});
function loadGraph() {
seriesCounter = 0
var seriesOptions =[];
var names = ["data1","data2","data3","data4"];
var g1curve1 = [],
g1curve2 = [],
g1curve3 = [],
g1curve4 = [];
var g2curve1 = [],
g2curve2 = [],
g2curve3 = [],
g2curve4 = [];
// for series data week
var data1, data2, data3, data4;
//preparing dummy data
// starting with timestamp value from 05-01-2014 0:0 1388880000
//apending 604800 to get
for (i = 0; i <= 52; i++) {
var tempArr = [],
tempArr1 = [],
tempArr2 = [],
tempArr3 = [];
var tempArr4 = [],
tempArr5 = [],
tempArr6 = [],
tempArr7 = [];
tempArr[0] = 1388880000000 + (i*604800);
tempArr1[0] = 1388880000000 + (i*604800);
tempArr2[0] = 1388880000000 + (i*604800);
tempArr3[0] = 1388880000000 + (i*604800);
tempArr4[0] = 1388880000000 + (i*604800);
tempArr5[0] = 1388880000000 + (i*604800);
tempArr6[0] = 1388880000000 + (i*604800);
tempArr7[0] = 1388880000000 + (i*604800);
tempArr[1] = Math.round((Math.random() * 5));
tempArr1[1] = Math.random() * .5;
tempArr2[1] = Math.random() * .25;
tempArr3[1] = Math.random() * .5;
tempArr4[1] = Math.random() * 1.0;
tempArr5[1] = Math.random() * 1.6;
tempArr6[1] = Math.random() * 2;
tempArr7[1] = Math.random() * 2.5;
g1curve1.push(tempArr);
g1curve2.push(tempArr1);
g1curve3.push(tempArr2);
g1curve4.push(tempArr3);
g2curve1.push(tempArr4);
g2curve2.push(tempArr5);
...