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

Chart not updating automagically

2 Answers 262 Views

Charts

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

Paul asked on 17 Feb 2016, 10:32 AM

I have been playing around with a local copy of the pie chart using remote data, as per this demo http://demos.telerik.com/kendo-ui/pie-charts/remote-data-binding

The chart is rendering just fine. However, when I update the data on the server the chart does not update until I prompt it to with this;

$("#chart").data("kendoChart").dataSource.read();

I found this post in the forums, perhaps the wording is misleading, but it suggests that it should "automatically refresh".

http://www.telerik.com/forums/update-datasource#6D639C0ai0Sf57uQiljUug

Maybe I am missing something? Here is my source code;

<!DOCTYPE html><html><head>

<base href="http://demos.telerik.com/kendo-ui/bar-charts/remote-data-binding">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>

<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content wide">

<div id="chart"></div>

</div>

<script>

function createChart() {

$("#chart").kendoChart({

dataSource: {

transport: {

read: {

url: "http://www.jamiekdonnelly.co.uk/stuffs/data.json",

dataType: "json"

}

},

title: {

text: "Title"

},

legend: {

position: "top"

},

seriesDefaults: {

},

series: [{

field: "percent",

categoryField: "resolution",

padding: 0,

type: "pie",

labels: {

visible: true,

background: "transparent",

template: "#= kendo.format('{0:P}', percentage)#"

}

}],

tooltip: {

visible: true,

format: "N0",

template: "#= kendo.format('{0:P}', percentage)#"

}

});

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

// Useing this to update the chart

//$("#chart").data("kendoChart").dataSource.read();

</script>

</div></body></html>

Chart not updating automagically

2 Answers, 1 is accepted