HI everyone,
i am making a portal. Here i am creating a stacked bar chart with help of high charts. i need to enhance the code in such a way that if i click on any part of bar it opens a new page and displays the containing data. I have somehow improved the code but the graph is not now stacked. It is now displayed as different three vertical bars. I have provided the code below. i Have attached iamge of current result. But i want result as second image.
[code]
Stacked column chart with data from MySQL using Highcharts $(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'column', marginRight: 130, marginBottom: 25 }, title: { text: 'Account Status', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { categories: [] }, yAxis: { title: { text: 'No of Accounts' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return ''+ this.series.name +''+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } },
series: [],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
document.location.href = 'page.php?cat=' + this.category;
}
}
}
}
},
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
