Sign in to follow this  
mauro

Problem with dynamic resize with javascript render

Recommended Posts

Hello.

My company new web application must show dynamic resizeable charts.

To ensure mobile version we are using FusionCharts XT 3.3.1 with javascript render only.

We have encoutered a nasty problem while we were trying to add a charts with dynamic changing height. If we create the chart with percentage size, like:

var chart = new FusionCharts("Bar2D", "myChartId", "100%", "100%", "0");

the chart is correctly created, but if the html element containing the chart <div> changes size only the chart width changes too, and its height stays the same as the creation height was.

 

I've examined the page DOM. It looks like the <span> wrapper created by FusionCharts always has a fixed pixel height instead of the percentage height. Only <span> width is correctly sets at "100%":

<span style="position: relative; text-align: left; line-height: 100%; display: inline-block; width: 100%; height: 334px;" id="myChartId">
  <svg style="overflow: hidden; -moz-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="200" version="1.1" height="334">
  ...
  </svg>
</span>

It's a big issue.

Could the height of a javascript chart be dynamic too? It requires javascript additional handlers?

 

I've attached to this post a almost working example. If you want to try it you only have to modify the fusioncharts javascript inclusion at line:29

 

Thanks for your time,

Mauro

fusioncharts-javascript-render-dynamic-height-fails.zip

Share this post


Link to post
Share on other sites

Hi Mauro,

 

Welcome to FusionCharts Forum  :)

 

We have checked the sample and found that the problem seems to be that the "chartContainer" Div does not resize itself according to its container "layout" Div.  To avoid this problem, please try replacing the Divs in your page with the following code :

<div id="layout" class="big">
      <div id="chartContainer" style="width:100%;height:100%">chart</div>
</div>

By doing this, you are setting the width and height of "chartContainer" to occupy 100% of its container Div. So, when you modify the dimensions of "layout" Div in your CSS, the dimensions of "chartContainer" change too.

 

Hope this helps.

Share this post


Link to post
Share on other sites

[....]

By doing this, you are setting the width and height of "chartContainer" to occupy 100% of its container Div. So, when you modify the dimensions of "layout" Div in your CSS, the dimensions of "chartContainer" change too.

Hope this helps.

 

It did. Thank you very much.

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
Sign in to follow this