Problem with dynamic resize with javascript render

[mauro]

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

[Haritha]

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.

[mauro]

[....]

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.

[Haritha]