Resizing a Chart

Often in our web pages, for various reasons we need to either increase or decrease the size of the chart. Here, we'll see how to resize a chart.

We'll take our previous Column (Monthly sales summary) Chart example and see how it can be resized.
 
Using HTML Embedding method
To resize a chart, all we need to do is change a few parameters in the HTML code which embeds the chart. Like, if we had to change the column chart size to 400x250 pixels, we would use the following HTML code:

 
<html>
...
  <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="250" id="Column3D" >
   <param name="movie" value="../FusionCharts/FCF_Column3D.swf" />
   <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=400&chartHeight=250">
   <param name="quality" value="high" />
   <embed src="../FusionCharts/FCF_Column3D.swf" quality="high" name="Column3D"      flashVars="&dataURL=Data.xml&chartWidth=400&chartHeight=250" width="400" height="250"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
...
</html>

All in all, we need to change the width and height at 4 places:

  1. In the width and height properties of the <OBJECT> Tag
  2. In the width and height properties of the <EMBED> Tag
  3. We also introduce two new parameters under the FlashVars parameter of OBJECT Tag- chartWidth and chartHeight.
  4. The above two parameters also get introduced in the FlashVars parameter of EMBED Tag.

In HTML Embedding method it is mandatory to provide the new parameters chartWidth and chartHeight else the chart will not be resized - only the container will.

Here we change the size to 400x250 pixels and get the chart (shown below) with smaller dimension :

 
Using JavaScript Embedding method

Resizing a chart using JavaScript Embedding Method is easier. We just need to specify the width and height parameters of the chart while defining. Let us modify our previous JavaScript Embedded sample :

<html>
<head>
   <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
   <div id="chartdiv" align="center">The chart will appear within this DIV</div>
     <script type="text/javascript">
       var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "400", "250");
       myChart.setDataURL("Data.xml");
       myChart.render("chartdiv");
     </script>
</body>
</html>

In the code above we have modified the required width and the height of the chart and we get the desired result. This code will produce the same chart shown above.

 
Note that FusionCharts can accept size only in pixels and not in percentage or any other units.