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