Refresh all charts on-screen

2 posts, 1 answers
  1. Answer
    Sam
    Sam avatar
    4 posts
    Member since:
    Jul 2013

    Posted 10 Jul 2013 Link to this post

    Hi guys

    As we know, there's a problem with Kendo UI charts (and gauges and other widgets) being rendered that are underneath tabs. On load, the chart is unable to detect the size of it's parent container and defaults to 600 width.

    So as a workaround, I'd like to bind an event to my tabs (Bootstrap NavBar) that refreshes EVERY Kendo UI chart/gauge etc onscreen at once. This code will go into a controller that will control multiple dashboards with configurable charts - so it's impossible to know ahead of time the IDs of the charts, or the count. There may be no charts, or 50.

    That means I need some method of retrieving all Kendo UI objects (or all charts, all gauges, whatever) on the screen at once, preferably as an array so that I can iterate through this array and call refresh() on them.

    The pages are being generated by PHP, so I don't have any selectors available. I'd like to place this code onto the bottom of the template so it's a 'drop-in', if possible.

    I tried looking at the common classes, such as k-chart, when but I pushed that into a jQuery selector I was unable to call refresh(). 

    Does anyone have any ideas on how I might accomplish this?
  2. Sam
    Sam avatar
    4 posts
    Member since:
    Jul 2013

    Posted 10 Jul 2013 Link to this post

    OK, after a lot of tinkering I've got enough for my needs. Turned out I was on the right track, just struggling a bit with the .data() aspect, and the fact that some widgets use refresh() and some use redraw()

    For the benefit of anyone in a similar situation, I've created a jsfiddle with the code that works for me. It only covers radial gauges, charts and sparklines - other control types will need to be added manually, but it's not a difficult process

    http://jsfiddle.net/jNJsx/
Back to Top