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?