Bug? Datasource data not cleared after chart is destroyed

[Kate | D-Flo]

Hello,

On a  form submission I am dynamically creating a chart in javascript, using remote datasource (json/GET). When user clicks a "Close" button, I  destroy the chart, and empty the DOM element. When a user submits the form again with different data, I  create the chart again and load it with the new data.

The problem is this: after I  destroyed the chart, when  the form is submitted and I create a chart again - it instantly animates with the previous search data, as if the series have been cached! (Datasource ajax request is shown as Pending at this time on the Network tab in Chrome) Two seconds later, when the ajax request is complete, the chart is refreshed with the new set of data.

Here is my code. Chart creation function:

function createChart(id, search_type, breakdown) {

 

               // Read data from the form

    var data = $('#form-search_analytics').serialize();

 

    $("#loading"+id).show();

    $('#'+id).kendoChart({

        dataSource: {

            transport: {

                read: {

                    url: '<?php echo $this->url('analytics/default', array('controller'=>'index', 'action'=>'ajax-get-chart-data')) ?>?type='+search_type+'&'+data,

                    dataType: "json",

                    type: "GET",

                    cache: false

                }

            }

        },

        dataBound: function(){

            console.log('#loading-'+id);

            $('#loading-'+id).hide();

        },

        seriesClick: function(e) {

            console.log(e.series.name);

            loadSeriesBreakdownPanel(e.series.name, search_type, data);

        },

        title: {

            text: search_type

        },

        legend: {

            position: "right"

        },

        seriesDefaults: {

            type: "area",

            //type: "line"

            stack:true

        },

        series: series[search_type],

        categoryAxis: {

            field: "Date",

            labels: {

                rotation: -30

            }

        },

        valueAxis: {

            labels: {

                format: "N0"

            }

        },

        tooltip: {

            visible: true,

            format: "N0",

            template: "#: series.name #: #: value #"

        }

    });

}

Chart destroy function:

function handleCloseClick() {

    $('.analytics-chart.k-chart').each(function(){
        var id = $(this).attr('id');
        var chart = $('#'+id).data("kendoChart");
        chart.destroy();
        $('#'+id).empty();
    });
}

HTML:

<div id="results">
    <div class="chart-panel">
        <h3>Breakdown by Document</h3>
        <div class="analytics-chart" id="chart-Document" data-type="Document"></div>
        <div id="loading-chart-Document"></div>
    </div>
</div>

I am using JQuery 1.9.1 and KendoUI v2013.1.514, in Chrome.

Could you please advise? Thankyou, Kate.

[Kate | D-Flo]

I have found a way around this problem - if, when destroying the instance of the chart I set the data to empty array, the next time it loads it works as expected.

$('.analytics-chart').each(function(){
        var id = $(this).attr('id');
        var chart = $('#'+id).data("kendoChart");
        if(chart) {
            var d = [];
            chart.dataSource.data(d); // <- the fix
            chart.destroy();
            this.remove();
            console.log('destroying chart '+id);
        }
    });

I'm not understanding how this problem can occur. The chart is destroyed, should the dataSource be emptied and destroyed as well?

[Hristo Germanov]

Hi Kate,

I am not sure that we need to destroy the datasource when you call chart's destroy() because we don't know what is the instance of the datasouce. The chart's datasource might be the same as in the grid or any datasource applicable widget.

Regards,
Hristo Germanov
Telerik