Using JSON in highcharts column, clickable
Using HIGHCHARTS , fed by JSON and traversing the nodes to get the data required to make the chart
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="departchart" style="width: 430px; height: 250px; margin: 0 auto;"></div>
JavaScript
var chart;
$(function () {
//Second chart
options1 = {
chart: {
//inverted: true,
backgroundColor: 'transparent',
renderTo: 'departchart',
defaultSeriesType: 'column'
},
title: {
text: '12 Month Projection'
},
subtitle: {
text: ''
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
xAxis: {
//type: 'month',
// categories: [],
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Departures'
}
},
tooltip: {
formatter: function () {
return '' + this.y + ' items';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert("Trigger Booking list for month of " + this.category + ". ");
}
}
}
}
},
series: [{}]
}
aData =...