This is a migrated thread and some comments may be shown as answers.

Bug? Datasource data not cleared after chart is destroyed

2 Answers 199 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kate | D-Flo
Top achievements
Rank 1
Kate | D-Flo asked on 22 Jul 2013, 04:56 PM
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.

2 Answers, 1 is accepted

Sort by
0
Kate | D-Flo
Top achievements
Rank 1
answered on 23 Jul 2013, 03:37 PM
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?
0
Hristo Germanov
Telerik team
answered on 24 Jul 2013, 07:58 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Kate | D-Flo
Top achievements
Rank 1
Answers by
Kate | D-Flo
Top achievements
Rank 1
Hristo Germanov
Telerik team
Share this question
or