Sign in to follow this  
Rajeshwar

Using Percentage For Width And Height

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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 by Bindhu

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