Percent Width/height

[jmaxsin]

<div id="chartContainer" width="100%" height="100%">FusionCharts will load here!</div>

 

<!-- load view specific JS file -->

<script src="/js/fusioncharts/FusionCharts.js"></script>

<script language="JavaScript">

var myChart = new FusionCharts( "/fusioncharts/Bar2D.swf", "myChartId", "800", "100%", "0", "1" );

myChart.setJSONData('<?php echo $this->jsonData; ?>');

myChart.render("chartContainer");

</script>

 

 

I've tried setting the height using precentage, and it stops rendering the chart. If i leave it at say 400, it works just fine.

 

Why does my chart stop rendering when using the % ?

[Guest Angshu]

Hi,

 

Welcome to FusionCharts Forum!

 

Since,you have specified the width of the chart to be 100% and height -100%. The DIV with id - "chartContainer" is the container element of the chart. Hence, its width and height would be derived in percentage from the DIV's dimension, not in pixels.

For more details, please refer to the link: http://www.fusioncha...centResize.html

Hope this helps.

[jmaxsin]

I have read through the documentation. I've updated my code to using all percent's and it does not render the chart.

 

<div id="chartContainer" style="width:100%; height:100%;">FusionCharts will load here!</div>

 

<!-- load view specific JS file -->

<script src="/js/fusioncharts/FusionCharts.js"></script>

<script language="JavaScript">

var myChart = new FusionCharts( "/fusioncharts/Bar2D.swf", "myChartId", "100%", "100%", "0", "1" );

myChart.setJSONData('<?php echo $this->jsonData; ?>');

myChart.render("chartContainer");

</script>

 

If i change it back to pixels, it works just fine.

 

<div id="chartContainer" style="width:800px; height:800px;">FusionCharts will load here!</div>

 

<!-- load view specific JS file -->

<script src="/js/fusioncharts/FusionCharts.js"></script>

<script language="JavaScript">

var myChart = new FusionCharts( "/fusioncharts/Bar2D.swf", "myChartId", "800", "800", "0", "1" );

myChart.setJSONData('<?php echo $this->jsonData; ?>');

myChart.render("chartContainer");

</script>

 

 

It shouldn't stop rendering the chart, simply because i'm using a percentage, but it is.

[FusionCharts Support]

Seems your Div is not getting the converted actual height when you are using 100% height.

 

Please try once setting absolute height (rest % values can remain as it is) ?

 

<div id="chartContainer" style="width:100%; height:800px;">FusionCharts will load here!</div>

 

<!-- load view specific JS file -->

<script src="/js/fusioncharts/FusionCharts.js"></script>

<script language="JavaScript">

var myChart = new FusionCharts( "/fusioncharts/Bar2D.swf", "myChartId", "100%", "100%", "0", "1" );

myChart.setJSONData('<?php echo $this->jsonData; ?>');

myChart.render("chartContainer");

 

</script>

[jmaxsin]

This change atleast makes the page render. however it does not accomplish what i'm trying to do. I need the page height to be 100% so that i don't have to worry about data overlapping on large charts.