ElementStacks
HTML
<div id="container" style="height: 400px"></div>
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
JavaScript
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)';
}
},
plotOptions: {
series: {
dataLabels: {
align: 'right',
color: '#fff',
enabled: true,
x: -5,
y: 15,
formatter: function() {
if(this.y > 0){ return Math.round(this.percentage); }
},
style: {
font: 'bold 12px Arial, Helvetica, sans-serif;'
}
},
events: {
legendItemClick: function(event) {
var chart = this.chart;
var clicked = this;
for(i=0; i<chart.series.length; i++)
{
if(chart.series[i].visible)
{
var data = chart.series[i].data;
for(j=0; j<data.length; j++)
{ var numer = 0 ;
for(k=0; k<chart.series.length ;k++){
if(chark.series != clicked){
if(chart.series[k].visible){
numer = numer + chart.series[k].data[j].y;
}}
}
alert("mun " +numer+" value "+data[j].y) //$(data[j].dataLabel.element).text(Math.round((data[j].y/numer)))
//numer = 0
}
}
}
}
}
...