Jump to content


Using Percentage For Width And Height


  • Please log in to reply
1 reply to this topic

#1 Rajeshwar

Rajeshwar

    Forum Newbie

  • Members
  • 3 posts

Posted 20 April 2012 - 01:13 PM

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?

#2 Guest_Bindhu_*

Guest_Bindhu_*
  • Guests

Posted 21 April 2012 - 04:27 AM

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.fusionch...centResize.html

Hope this helps !

Edited by Bindhu, 21 April 2012 - 04:28 AM.