Highcharts Demo
author(s):
Torstein Hønsi
by Korah Babu Varghese
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 550px;"></div>
JavaScript
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked Bar'
},
xAxis: {
categories: ['America', 'Asia'],
labels: {
style: {
fontWeight: 'normal',
fontSize: '12px',
fontFamily: 'Segoe UI',
color: 'black'
}
}
},
legend: {
// enabled: false
reversed: true
},
yAxis: {
type: "datetime",
min : Date.UTC(2012, 0, 1),
title: { "text": "" },
tickInterval: 24 * 3600 * 1000 * 30 * 3,
labels: {
formatter: function () {
var d = new Date(this.value);
var month = d.getMonth();
var monArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
return monArr[month] + " - " + d.getFullYear();
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [
{ "name": 'Active',
"data": [{ "low": 1325808000000, "y": 1335808000000 },
{ "low": 1335808000000, "y": 1343652000000 }
]
},
{ "name": 'New',
"data": [{ "low": 1335808000000, "y": 1351814400000 },
{ "low": 1343652000000, "y": 1348952000000 }
]
}
]
};
var chart = new Highcharts.Chart(options);
});