Best way to draw chart with dynamically changing data?

13 posts, 0 answers
  1. Kevin
    Kevin avatar
    2 posts
    Member since:
    Jun 2012

    Posted 26 Jan 2013 Link to this post

    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.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 29 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Kevin
    Kevin avatar
    3 posts
    Member since:
    May 2003

    Posted 02 Feb 2013 Link to this post

    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);
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 04 Feb 2013 Link to this post

    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!
  6. john
    john avatar
    21 posts
    Member since:
    Dec 2013

    Posted 07 Jan 2014 Link to this post

    but it's cannot working
  7. john
    john avatar
    21 posts
    Member since:
    Dec 2013

    Posted 07 Jan 2014 Link to this post

    how to change bar chat values dynamically using javascript/jquery
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 07 Jan 2014 Link to this post

    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!
  9. john
    john avatar
    21 posts
    Member since:
    Dec 2013

    Posted 07 Jan 2014 Link to this post

    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>

  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 07 Jan 2014 Link to this post

    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!
  11. john
    john avatar
    21 posts
    Member since:
    Dec 2013

    Posted 08 Jan 2014 Link to this post

    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
  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 08 Jan 2014 Link to this post

    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!
  13. john
    john avatar
    21 posts
    Member since:
    Dec 2013

    Posted 09 Jan 2014 Link to this post

    Thanks for your reply
    Here i attached my files 
    i want to get data from json file and display 
    please help me?
  14. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 09 Jan 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready