Sign in to follow this  
jmaxsin

Percent Width/height

Recommended Posts

<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 % ?

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Welcome to FusionCharts Forum!smile.gif

 

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.smile.gif

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

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