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

Update Data Source on a button click event

3 Answers 976 Views
Charts
This is a migrated thread and some comments may be shown as answers.
kory
Top achievements
Rank 1
kory asked on 06 Dec 2012, 09:42 PM
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?

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 07 Dec 2012, 07:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
kory
Top achievements
Rank 1
answered on 07 Dec 2012, 02:54 PM
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!
0
T. Tsonev
Telerik team
answered on 10 Dec 2012, 08:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
kory
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
kory
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or