Only Show Chart When It Has Data

2 posts, 1 answers
  1. Kieren
    Kieren avatar
    6 posts
    Member since:
    Jun 2013

    Posted 26 Aug 2013 Link to this post


    What is the recommended approach for showing a chart - only when it has data. 

    By default, the chart draws without any data. This means there's a bit of a flicker when it redraws to show the data loaded from a remote source. All my chart initialization is currently in the jQuery.ready( event...

    Is there any easy way to only show the chart when it has data? Ideally, this is a just a property rather than having to wire up this behaviour every time?

  2. Answer
    T. Tsonev
    T. Tsonev avatar
    2834 posts

    Posted 26 Aug 2013 Link to this post


    There's no built-in functionality that can be used to achieve the desired effect directly.
    Nonetheless we can use the dataBound event to show (the initially hidden) widget.

    -- Live example --

    <div id="chart" style="visibility: hidden;" />

        // ...
        dataBound: function() {
            $(this.element).css("visibility", "visible");

    I hope this helps.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top