I have multiple charts on the screen, each in a div. I am resizing the divs that contain them when the iPad orientation switches, landscape to portrait or back, and I want the charts contained within the divs to resize to match their containing div size. I have googled, and not found an example that works for me yet. Is there one available you could point me to?
Thanks!
Thanks!
4 Answers, 1 is accepted
0
Hello Jon,
Once rendered, the Chart cannot be resized due to browser limitations. What you can do is call the refresh() method of the Chart's client object, so that the widget is recreated with the new dimensions.
Greetings,
Dimo
the Telerik team
Once rendered, the Chart cannot be resized due to browser limitations. What you can do is call the refresh() method of the Chart's client object, so that the widget is recreated with the new dimensions.
Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jon
Top achievements
Rank 1
Rank 1
answered on 13 Apr 2012, 04:22 PM
We have a kind of dashboard layout on our page, which includes many "widget" divs that can each contain a Kendo grid or chart. We have implemented resize logic at the page level so that when the window is resized, each of the "widget" divs is resized to retain its proportion to the new page size. When this happens, our grid controls within the divs automatically resize to the div container both horizontally and vertically. The chart controls resize only *horizontally* within their divs based on resizing of the div - they do *not* resize vertically.
The inconsistency of the behavior of the controls, specifically and only in the vertical direction of the chart controls, happens no matter which browser we do this in. Please add a request to the queue for your dev team to make the vertical resizing behavior of the charts consistent with grids, and consistent across horizontal and vertical behavior?
Meanwhile, I am attempting to work around this by manually setting the height of the chart, and then asking for a refresh() on the chart. I understand that's what you want me to do, but I am new at Kendo, new at jQuery and new at JavaScript, and have not yet been able to make any of the examples or recommendations work for my particular page.
In pseudocode, this is what I think I need to do:
1) Hook the resize event of the parent divs for each chart control. At runtime, after a page-level resize of the widget divs is handled, this parent div resize event should be triggered.
2) In the resize event handler for the parent divs, get the chart object within the div, set its height based on the new parent div height, and invoke refresh() on the chart to get it to redraw
If I haven't explained my page layout and behavior clearly enough, please let me know.
The first way you could help me is by confirming that the psuedocode logic of what I'm trying to do to make the chart resize vertically with the parent div is the optimum way to dynamically resize a chart using jQuery and JavaScript.
The second way you could help me, if that logic is correct, is by pointing me at any more complete examples of how to accomplish the essential pieces of the logic, which I think are:
1) Hook a resize event on a div containing a Kendo control
2) A resize event handler which gets the size of a parent div, assigns height to a chart based on it, and refreshes the chart
Thanks!
Jon
The inconsistency of the behavior of the controls, specifically and only in the vertical direction of the chart controls, happens no matter which browser we do this in. Please add a request to the queue for your dev team to make the vertical resizing behavior of the charts consistent with grids, and consistent across horizontal and vertical behavior?
Meanwhile, I am attempting to work around this by manually setting the height of the chart, and then asking for a refresh() on the chart. I understand that's what you want me to do, but I am new at Kendo, new at jQuery and new at JavaScript, and have not yet been able to make any of the examples or recommendations work for my particular page.
In pseudocode, this is what I think I need to do:
1) Hook the resize event of the parent divs for each chart control. At runtime, after a page-level resize of the widget divs is handled, this parent div resize event should be triggered.
2) In the resize event handler for the parent divs, get the chart object within the div, set its height based on the new parent div height, and invoke refresh() on the chart to get it to redraw
If I haven't explained my page layout and behavior clearly enough, please let me know.
The first way you could help me is by confirming that the psuedocode logic of what I'm trying to do to make the chart resize vertically with the parent div is the optimum way to dynamically resize a chart using jQuery and JavaScript.
The second way you could help me, if that logic is correct, is by pointing me at any more complete examples of how to accomplish the essential pieces of the logic, which I think are:
1) Hook a resize event on a div containing a Kendo control
2) A resize event handler which gets the size of a parent div, assigns height to a chart based on it, and refreshes the chart
Thanks!
Jon
0
Hello Jon,
I am not sure how you make the Chart resize automatically, since this should normally not happen. SVG graphics simply do not resize, which depends on the browsers.
Generally, you don't need to intercept resizing of <div> elements, it's a lot easier to subscribe to the browser window's resize event. Given that the width and height of the Chart's outer element (the one that it is initialized from) are defined in percent, the only thing you should do is call the refresh() or redraw() method of the the Chart's client object. The difference between the two methods is that redraw() does not read the data from the datasource again.
Greetings,
Dimo
the Telerik team
I am not sure how you make the Chart resize automatically, since this should normally not happen. SVG graphics simply do not resize, which depends on the browsers.
Generally, you don't need to intercept resizing of <div> elements, it's a lot easier to subscribe to the browser window's resize event. Given that the width and height of the Chart's outer element (the one that it is initialized from) are defined in percent, the only thing you should do is call the refresh() or redraw() method of the the Chart's client object. The difference between the two methods is that redraw() does not read the data from the datasource again.
$(window).resize(function(){ $("#chart").data("kendoChart").redraw();});Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Prashant
Top achievements
Rank 1
Rank 1
answered on 25 Apr 2012, 12:01 PM
Hi Guys,
I am facing the same situation while building a mobile application.
I want to show pie charts in Grid with vertical scroll view only. but when i am running application on desktop(chrome) and mobile(ios) browser, grid is showing correct but pie charts inside grid is truncating. I dont know why this is happening.
What i have to use to show pie chart in grid column so that chart will fix the column size.
thanks
Prashant
I am facing the same situation while building a mobile application.
I want to show pie charts in Grid with vertical scroll view only. but when i am running application on desktop(chrome) and mobile(ios) browser, grid is showing correct but pie charts inside grid is truncating. I dont know why this is happening.
What i have to use to show pie chart in grid column so that chart will fix the column size.
thanks
Prashant