ElementStacks
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 300px"></div>
<script src="http://code.highcharts.com/master/highcharts.src.js"></script>
JavaScript
$(document).ready(function() {
var chart4 = null;
//var interval4 = setInterval(graphicReload4, 5000);
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: 'Title'
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFFFF',
connectorColor: '#FFFFFF',
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: []
}
function graphicReload4() {
var json = '[{"key":"a","value":5,"color":"red"},{"key":"b","value":1,"color":"green"},{"key":"c","value":3,"color":"blue"}]';
var series = {
type: 'pie',
name: 'Browser Share',
data: []
};
json = $.parseJSON(json);
jQuery.each(json, function(itemNo, item) {
series.data.push({
name: item.key,
color: item.color,
y: parseFloat(item.value)
})
});
options.series.push(series);
if (chart4) {
chart4.destroy();
}
chart4 = new Highcharts.Chart(options);
console.log(chart4, series);
//chart4.render();
}
});