Extending your Charts > Resizing Charts
 

There are two ways in which you could resize a chart:

  1. By changing the size of the HTML container itself
  2. By changing the size of the actual Flash movie.

Let’s study them one by one.

By changing the size of the HTML container itself
You could change the size of the HTML container to change the visual dimensions of the graph. For example, in the code below, we have changed the size to 452x336:
<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="452" HEIGHT="336" id="FC2Column" ALIGN="">
<PARAM NAME=movie VALUE="../../Graphs/FC2Column.swf?dataUrl=Data.xml">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="../../Graphs/FC2Column.swf?dataUrl=Data.xml" quality=high bgcolor=#FFFFFF WIDTH="452" HEIGHT="336" NAME="FC2Column" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
If you now see the graph in a browser, you’ll see distorted text as under:
So, to ensure that the text isn’t distorted when scaled, you need to increase the value of baseFontSize attribute of the graph element. Let’s change it to baseFontSize=’12’ in Data.xml. With this attribute in place, if you now have a look at the graph, it would look as under:
Thus, you saw how to resize the graph by changing the size of the HTML container.
 
By changing the size of the actual Flash movie
You can also change the size of the chart by changing the size of the actual Flash movie. However, for this you need to be proficient in Flash and ActionScript.

Follow the steps listed below to change the size of the actual Flash movie:

  1. Change the size of the Flash document to the required size
    e.g., 400 x 400
  2. Proportionately change the loading bar size and position in the Scene > Loading, Layers > Bar Mask, Loading Objects and Bar.
  3. Switch to the Graph scene and adjust the position/size of the Loading Data dialog box.
  4. Change the size of the canvas in Scene> Graph > Layer > Canvas > Object > MovGridBg and Mov Canvas
    Let's say for the graph size 400x400
    An ideal MovGridBg size would be 312x280
    The same for MovCanvas would be 336x56
  5. Re-position and re-size the various textboxes present on the Textboxes layer in the scene graph.
  6. Now, resize the div lines, trend lines and the zero plane.
    The div lines, trendlines and the zero plane's width should be the same as that of the MovGridBg (or 2-3 pixels less).
  7. Now, finally you need to alter the ActionScript position of the elements (present in FCChart.as for all charts).
    Open FCChart.as and alter the following positions:
    this.Constants.plotAreaX = 70;
    Change the value of 70 to the new starting X of the MovGridBg.
    this.Constants.plotAreaY = 343;
    Change the value of 343 to the new ending Y of the MovGridBg.
    this.Constants.stageWidth = 565;
    Change the value of 565 to the new stage width i.e., 400 (which we had earlier resized the stage to).
    this.Constants.plotAreaWidth = Number(_root.Functions.getCorrectValue(_root.plotAreaWidth, 462));
    Change the value of 462 to the new plot area width (i.e., width of MovGridBg-Shadow Width) - 309 in our case (312-3)
    this.Constants.plotAreaHeight = Number(_root.Functions.getCorrectValue(_root.plotAreaHeight, 300));
    Change the value of 300 to the new plot area height (i.e., height of MovGridBg) - 280 in our case
    this.Constants.spacingArea = Number(_root.Functions.getCorrectValue(_root.spacingArea, 50));
    This value of 50 controls the spacing between two points. So increasing or decreasing it would increase/decrease the spacing area.
    this.Constants.totalNameCharDisplay = Number(_root.Functions.getCorrectValue(_root.totalNameCharDisplay, 70));
    This value determines the total number of characters that can be displayed on the graph in one horizontal line. If you have decreased the graph size, you should decrease this value also. We decrease it to 45.
  8. And, now finally export the movie and relish!

An example looks as under: