Highcharts Pie Chart from Ajax - php

Question

I have a page that uses highcharts pie chart, and I am trying to update the chart with a date selector drop down. I have a similar implementation for a bar chart and its working great. Please note (this is coming from a PHP class, hence the concatenation and what not).
<script type='text/javascript'>
function drawPie(data)
{
var chart;
alert('called');
var options = {
chart: {
renderTo: 'PieChart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 350
},
title: {
text: 'Product Popularity'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {enabled: false},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Product Popularity',
data: data
}]
}
chart = new Highcharts.Chart(options);
$('#ProductPieMod div.mod_content').css('height', $('#PieChart').css('height'));
}
$(document).ready(function(){
drawPie(" . $this->get_data($this->date) . ");
$('#ProductPieMod_date').on('change', function(){
var val = parseInt($(this).val());
switch(val)
{
case 0:
var date = Date.today();
break;
case 1:
var date = Date.parse('last week');
break;
case 2:
var date = Date.today().moveToFirstDayOfMonth();
break;
case 3:
var date = Date.parse('January').moveToFirstDayOfMonth();
break;
default:
var date = Date.today();
}
var info;
$.ajax({
type: 'POST',
url: '". matry::base_to('utilities/dhs/manager_dash') . "',
async: false,
dataType: 'json',
data: {date: date.toString('M/dd/yyyy'), module: 'ProductPieMod'},
success: function(data)
{
drawPie(data);
}
});
});
});
</script>
My ajax returns the following string:
[['FASTCLIX LANCING DEVICE', 62.5],['FREESTYLE LANCING DEVICE', 25],['ONETOUCH DELICA LANCING DEVICE', 12.5]]
In addition, this chart is initially built, using the exact same method, just fine. Its just when I use the dropdown (run the onChange event) that it breaks.
Update
I have created a fiddle for this as well: http://jsfiddle.net/SHReZ/1/

Answer 1

Firts, you need to place chart var to document.ready handler scope, next, you need to destroy chart before draw.
$(document).ready(function () {
var chart;
function drawPie(data) {
console.log('called');
var options = {
chart: {
renderTo: 'PieChart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 350
},
title: {
text: 'Product Popularity'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Product Popularity',
data: data
}]
};
if (chart !== undefined) chart.destroy();
chart = new Highcharts.Chart(options);
$('#ProductPieMod div.mod_content').css('height', $('#PieChart').css('height'));
}
drawPie([
['ONETOUCH DELICA LANCING DEVICE', 27.78],
['FREESTYLE LANCING DEVICE', 20.83],
['Nova Max Ketone Test Strips Health and', 11.11],
['ONETOUCH ULTRASOFT LANCING DEVICE 2PK', 11.11]
]);
//get data from https://gist.github.com/zba/4712055 , delay 4
$.post('/gh/gist/response.html/4712055', {
delay: 4
}, function (data) {
drawPie(data);
}, 'json');
});
fiddle
also here is demo which not destroy chart, but it change colors to much