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:
Chart destroy function:
HTML:
I am using JQuery 1.9.1 and KendoUI v2013.1.514, in Chrome.
Could you please advise? Thankyou, Kate.
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 #"
}
});
}
function
handleCloseClick() {
$(
'.analytics-chart.k-chart'
).each(
function
(){
var
id = $(
this
).attr(
'id'
);
var
chart = $(
'#'
+id).data(
"kendoChart"
);
chart.destroy();
$(
'#'
+id).empty();
});
}
<
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
>
Could you please advise? Thankyou, Kate.