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

Chart not updating automagically

2 Answers 210 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
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>
    <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>

2 Answers, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 1
answered on 17 Feb 2016, 11:35 AM

UPDATE:

I think it is safe to say that I misinterpreted the post in the forum. Of course, if the dataSource is updated (by calling dataSource.read()), the chart will automatically update.  

 

I will rephrase my question accordingly: 

 

Is it possible for the Chart to poll for changes to remote data, and update automatically when this happens? 

 

Many thanks

 

0
T. Tsonev
Telerik team
answered on 19 Feb 2016, 01:09 PM
Hi,

I'm copying the response to your support here for community reference:

Such type of "push notifications" require a special setup and won't work out of the box.

The most popular solution is SignalR. We have an example with the Chart ready.

I hope this helps.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Paul
Top achievements
Rank 1
Answers by
Paul
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or