[resolved idea] Charts with 100% width and height of container

Recommended Posts

Why not using by default the width and the height from the container. They are very easily accessible by this.height() and this.width within the jquery plugin.


It might take some more calculation to take into account the padding from the container though.





Share this post

Link to post
Share on other sites

Hi Stephane,




Great suggestion. There are already two ways to make FusionCharts attain the width and height of the parent container.




1. Using percentage width and height.


If you set width: '100%' and height: '100%', it sets the HTML width and height of the chart to 100%. This makes the chart occupy the area of the parent container.




2. Using "auto" for width and height of the chart


This not yet documented (as per plugin version 1.0.0b) as it is an experimental feature.


Here, if you set width: 'auto' and height: 'auto', it sets the dimension of the chart to parent.width() and parent.height() respectively in pixels.




The above two methods have one limitation as we foresee. In case the container has no set dimension or in case the container is not fully rendered, the chart does not receive the proper dimension. And as because FusionCharts v3 does not support native resizing as of now, it might render odd.




As a workaround to the above issue, if we render the chart after the page is loaded using $(document).ready() event, this issue is partially fixed.




Another point to note: Would it be prudent if we set it to occupy 100% by default? Now we have kept it to 320x480 for the reason that in majority of cases, the container element may not have a width or height set. In such situations, the charts will have 0 width or height and will not render. This may lead to confusion for a majority of users who would not understand why the chart is not rendering.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now