Highcharts test tool
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="chart-grid"></div>
CSS
.chart {
width: 350px;
height: 300px;
}
JavaScript
var json = [{
"header": "test1",
"children": [{
"date": "2015-01-02",
"count": "36"
}, {
"date": "2015-01-03",
"count": "29"
}]
}, {
"header": "test2",
"children": [{
"date": "2015-01-02",
"count": "36"
}, {
"date": "2015-01-03",
"count": "129"
}]
}];
$(document).ready(function () {
var options = {
chart: {
type: 'scatter'
},
title: {
text: 'test' // Title for the chart
},
subtitle: {},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return 'x: ' + Highcharts.dateFormat('%d/%m/%Y %H:%M:%S', this.x) + '<br>' + 'y: ' + this.y;
}
},
plotOptions: {
series: {
//pointStart: pointStart,
pointInterval: 24 * 3600 * 1000 * 30
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
minPadding: 0,
maxPadding: 0,
gridLineColor: 'rgba(204,204,204,.25)',
gridLineWidth: 0.5,
title: {
text: 'Access Count',
rotation: 0,
textAlign: 'right',
style: {
color: 'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize: '9px'
}
},
lineWidth: .5,
lineColor: 'rgba(0,0,0,.5)',
tickWidth: .5,
tickLength: 3,
tickColor: 'rgba(0,0,0,.75)'
},
series: []
};
var $chartGrid = $('#chart-grid'),
title = [],
serie,
date,
name;
$.each(json, function (i, item) {
name = 'container-' + i;
$chartGrid.append('<div...