Update Data Source on a button click event

[kory]

We would like to update a data source when a refresh button is clicked. In my javascript file I have the following declared:

var seriesData1 = [{"UnitNumber":"1010", "percent":85, "PMTYPE":"ODOMETER", "CompCode":"000-003"}, {"UnitNumber":"1010", "percent":75, "PMTYPE":"Days", "CompCode":"000-005"}];

I have this defined in my index.html:

<script>
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "black",
dataSource: {
data: seriesData1

},
title: {
text: "PMs Due"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [
{
name: "% Due",
field: "percent"
}
],
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
field: "CompCode"
},
tooltip: {
visible: true,
format: "{0}%"
}
});
}
</script>

When I click on the refresh button I am changing the values as follows in my javascript:

seriesData1 = [{"UnitNumber":"1010", "percent":35, "PMTYPE":"ODOMETER", "CompCode":"000-060"}, {"UnitNumber":"1010", "percent":75, "PMTYPE":"Days", "CompCode":"000-005"}];

$(".chart").data("kendoChart").redraw();

All that has changed is the percent and comp code of the first record .

On first load data is displayed without error however when the button is clicked to redraw the graph, the data is cleared and nothing is updated leaving a blank chart.

Is there anything else that I have to do to update the data source?

[Atanas Korchev]

Hello Kory,

 To properly update the data source you need to use its data method:

var chart = $("#chart").data("kendoChart");
var newData = [];
chart.dataSource.data(newData());
 

All the best,
Atanas Korchev
the Telerik team

[kory]

I attempted to integrate the code snippet into my project, but The chart still does not when go is clicked. I have attached the project perhaps you could take a look and check what I'm doing wrong? Line 34 in Hello-world.js has the script suggested. Line 420 of the html document is where the graph starts. If navigating by browser its under reports>Unit PM due. 

I would really appreciate your looking at it. 

Thanks in advance,

KENDO ROCKS!

[T. Tsonev]

Hi,

It appears that you're updating the data source with an array of numbers. The data source expects objects of the same type as the initial result.

For example:
var newData = [{
    CompCode: "A",
    percent: 42
}, {
    ....
}];

chart.dataSource.data(newData);

I hope this helps. Kind regards,
Tsvetomir Tsonev
the Telerik team