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

Best way to draw chart with dynamically changing data?

12 Answers 964 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 26 Jan 2013, 09:48 PM
Hello,

We're evaluating tools for drawing data that will be dynamically changing (streams of data being pushed to the client).  We tried setting up a page using the Kendo UI Graph. The data renders and updates, but the redraw is noticeably slow and flickers.  We're currently calling the refresh() method on the chart to redraw after we append new values to the data source.  Is there are more efficient method for redrawing streaming data or some parameters that affect the redraw behavior that I haven't been able to locate?  For comparison, the Flot library for jQuery is noticeably smooth when rendering.

Thank you.

12 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 29 Jan 2013, 12:21 PM
Hi Kevin,

In order to achieve this you can bind your Chart to a DataSource (like in most of the online demos). Hence when the DataSource is changed the Chart widget will automatically refresh. For your convenience I prepared a jsBin example which demonstrates the suggested approach in action.

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin
Top achievements
Rank 1
answered on 02 Feb 2013, 06:46 PM
Hi Iliana,

Thank you for your response. The use case we're looking at has to do with a rapidly changing "window" of data.  To mimic our scenario in your jsBin example, add a call to append data that's triggered on an interval (see below).  We'd be using a line chart rather than a bar chart and limiting the number of values drawn to some max size, but that doesn't affect the issue.  I'm guessing that the refresh will always re-render the entire graph. Is the optimization of this something you may be looking into in the future?

Thank you

var intervalId = setInterval(function() {
    $("#chart").data("kendoChart").dataSource.add({
     "country": "United States",
     "year": "2010",
     "value": 55
     })
}, 500);
0
Iliana Nikolova
Telerik team
answered on 04 Feb 2013, 08:24 PM
Hello Kevin,

I am not quite sure if I understand you correctly - could you please elaborate a bit more? This way I would be able to advice you further and suggest the most appropriated solution for your scenario (if such is possible). Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 07 Jan 2014, 08:54 AM
but it's cannot working
0
John
Top achievements
Rank 1
answered on 07 Jan 2014, 09:00 AM
how to change bar chat values dynamically using javascript/jquery
0
Iliana Nikolova
Telerik team
answered on 07 Jan 2014, 10:20 AM
Hi John,

Did you try the suggestion from my first post? If yes - did you observe any difficulties?

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 07 Jan 2014, 10:33 AM
i used your coding below it's working only refreshing page again and again,but cannot change values.
<body>
    <div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart" style="background: center no-repeat url('../../content/shared/styles/world-map.png');"></div>
    </div>
    <script>
        function createChart() {
        
            $("#chart").kendoChart({
                title: {
                    text: "Site Visitors Stats /thousands/"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar"
                },
            
                series: [{
                    name: "Total Visits",
                    data: [56000, 63000, 74000, 91000, 117000, 138000]
                }, {
                    name: "Unique visitors",
                    data: [52000, 34000, 23000, 48000, 67000, 83000]
                }],
                valueAxis: {
                    max: 140000,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    }
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
        
    function ok()
    {
        var intervalId = setInterval(function() {
    $("#chart").data("kendoChart").dataSource.add({
     "name": "Total Visits",
     "data": "40000",
     "categories":"july"
     })
}, 5000);
    }    
    </script>
    <style scoped>
        .chart-wrapper, .chart-wrapper .k-chart {
            height: 350px;
        }
    </style>
</div>
<b onclick="ok()">click</b>

</body>

0
Iliana Nikolova
Telerik team
answered on 07 Jan 2014, 01:49 PM
Hello again John,

My example is due to a chart bound to dataSource, however from the provided code it appears you are using a chart with inline data. In this case you could change the values through series.options and refresh the chart. For your convenience here is the updated example.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 08 Jan 2014, 06:31 AM
It's working thanks for your reply and,
I have  chart for sales report ,It display p1 and p2 sales report month wise,(bar chart)
if i click Jan P1 sales report ,
it display that details separate chart date wise,
you have any idea for that
0
Iliana Nikolova
Telerik team
answered on 08 Jan 2014, 03:47 PM
Hello John,

I am not quite sure if I understand correctly what the issue is. Is it possible to provide a simple jsBin / jsFiddle example which demonstrates your current implementation? This way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 09 Jan 2014, 07:33 AM
Thanks for your reply
Here i attached my files 
i want to get data from json file and display 
please help me?
0
Iliana Nikolova
Telerik team
answered on 09 Jan 2014, 04:34 PM
Hi John,

I already replied to the same question in your other thread, however I am pasting my answer here too:

I believe the issue is caused by the data is not a valid JSON. For your convenience I modified the files and attached them back.


Regards,
Iliana Nikolova
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
Kevin
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Kevin
Top achievements
Rank 1
John
Top achievements
Rank 1
Share this question
or