Bug? Datasource data not cleared after chart is destroyed

3 posts, 0 answers
  1. Kate | D-Flo
    Kate | D-Flo avatar
    24 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    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. Kate | D-Flo
    Kate | D-Flo avatar
    24 posts
    Member since:
    Jun 2013

    Posted 23 Jul 2013 Link to this post

    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?
  3. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 24 Jul 2013 Link to this post

    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!
Back to Top