Hello and thanks for the awesome controls :)
I have the following test code i am playing with right now,
Now when i add more items to 'data' JSON Array I would like to see changes in the chart,
The following are in my mind right now,
1). using observable collection (kendo.data.ObservableObject) as a data source? such that when the data object changes it reflects in the control (or element) via kendo.bind but i am not sure how to implement this without the need to .refresh() everytime the collection is changed when Add Data button is clicked
2). A way where chart.options.data = data is assigned the control must automatically reflect the new chart ( in other words i am looking for a live charts control like how we do in MVVM, where the object changes and since its bound to the control it just reflects the changes ) but not sure how to implement with this scenario
could someone please help?
I have the following test code i am playing with right now,
<!DOCType html>
<
html
>
<
head
>
<
title
></
title
>
<
script
src
=
"js/jquery-1.7.1.js"
></
script
>
<
script
src
=
"js/kendo.all.js"
></
script
>
<
link
href
=
"styles/kendo.common.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.default.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
div
id
=
"chart"
style
=
"height:300px; width:500px"
>
</
div
>
<
input
id
=
"addData"
class
=
"k-button"
type
=
"button"
value
=
"Add Data"
/>
<
script
>
$(function() {
var data = [
{
employee: "Joe Smith",
sales: 2000
},
{
employee: "Jane Smith",
sales: 2250
},
{
employee: "Will Roberts",
sales: 1550
}];
$("#addData").click(function() {
data = data.concat({
employee: "Will Roberts",
sales: Math.floor(Math.random()*10001)
});
//var chart = $("#chart").data("kendoChart");
//chart.options.data = data;
//alert(data)
//chart.refresh();
});
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: new kendo.data.DataSource({
data: data
}),
series: [{
type: "line",
field: "sales",
name: "Sales in Units"
}],
categoryAxis: {
field: "employee"
},
tooltip: {
visible: true,
format: "{0}%"
}
});
})
</
script
>
</
body
>
</
html
>
Now when i add more items to 'data' JSON Array I would like to see changes in the chart,
The following are in my mind right now,
1). using observable collection (kendo.data.ObservableObject) as a data source? such that when the data object changes it reflects in the control (or element) via kendo.bind but i am not sure how to implement this without the need to .refresh() everytime the collection is changed when Add Data button is clicked
2). A way where chart.options.data = data is assigned the control must automatically reflect the new chart ( in other words i am looking for a live charts control like how we do in MVVM, where the object changes and since its bound to the control it just reflects the changes ) but not sure how to implement with this scenario
could someone please help?