Using Percentage For Width And Height

[Rajeshwar]

Hi,

 

I am using Fusion charts (PHP) with Jquery mobile framework. I want fusion charts to be resized according to the phone the user is using.

 

For this, i am trying to use the percentage for width and height as shown below.

 

 

 

 

<div id="wrapper">

<div class="content-area">

<div id="content-area-inner-main">

<div class="gen-chart-render" style="width:100%; height:100%;">

<?php

$strXML = "<chart labelDisplay='Rotate' slantLabels='1' caption='Product Vs Sales' numberPrefix='' formatNumberScale='0' animation='0'>";

foreach ($arrData as $arSubData)

{

$strXML .= "<set label='" .$arSubData[1]. "' value='" . $arSubData[2] . "' link='". urlencode(index.php) . "'/>";

}

/* Close <chart> element */

$strXML .= "</chart>";

/* Create the chart - Column 2D Chart with data contained in strXML */

echo renderChart("lib/FusionCharts_Evaluation/FusionCharts_Evaluation/Code/FusionCharts/Column2D.swf", "", $strXML, "productSales", "100%", "100%", false, false);

?>

</div>

</div>

</div>

 

When i specify, width & height as 100% in renderChart() function, it is expecting width and height to be specified for its parent container i.e gen-chart-render. When i set width and height as 100% for gen-chart-render , it is not generating chart.

 

It is generating chart only if i explicitly specify height in pixels for gen-chart-render. This way my chart is fitting to the mobile device in terms of width but not fitting in terms of height. User has to scroll vertically to see the complete chart.

 

Can anyone suggest me what is work around solution for this?

[Guest Bindhu]

Hi,

 

Welcome to the FusionCharts Forum

 

Thank you for the post.

 

Starting v3.2, FusionCharts can dynamically resize itself when the parent container resizes. For this you will need to :

• Set the chart's size in percentage, and
• Set your HTML chart container such that its dimension changes dynamically when the browser resizes or changes, due to some other changes made in a web page (like when an element is added or removed)

Whenever the container element resizes, the chart will also dynamically resize itself instantly.

 

For more details on 'Resizing Charts in Percentage', please refer to the link below,

 

http://docs.fusioncharts.com/charts/contents/?advanced/PercentResize.html

 

Hope this helps !

Edited April 21, 2012 by Bindhu