FusionCharts

Often in our web pages, we've a constrained space for the chart demanding us to either increase or decrease the size of the chart. Here, we'll see how to resize a FusionCharts chart.

We'll take our previous Column (Monthly sales summary) Chart example and see how it can be resized.

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 400x300 pixels, we would use the following HTML code:

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

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

This would be all - when you now view the HTML page, the chart is all resized with all the elements of the chart being proportionately resized. Shown below is the output for above:

As you can see above, the columns have reshaped themselves to the new size (with increased depth but less width). Also, the canvas has become smaller and names have squeezed up.

Similarly, if we wanted to increase the chart area (say to 700x350), we create an HTML page BigResizedChart.html and use the following HTML code:

And when you now see the chart, it would look as under (image has been reduced below!):

As visible above, the columns have grown wider and adequate spacing is now present between each one of them.

Now, suppose we wanted to resize the chart to a very small size (say 200x150 pixels). With this kind of size, placing the names, values, columns, div line values, limit values and all other chart elements would be too illegible. You won't be able to make out anything. So, we undertake the following before resizing it to such a small size:

Hide chart caption and subcaption to give more vertical space
Reduce data names length (like January to J, February to F and so on.) for clarity
Add hoverText attribute for each set to show more information on tool tips
Hide data values to to avoid cluttering
Reduce all chart margins (top, left, right and bottom) to optimum (as required)
Remove the div line values and the limit values (if required)
Remove the x-axis and y-axis names

All of the above can be done via XML (we'll learn more on XML attributes later). We modify our previous XML data to the one below and save it as SmallChartData.xml.

As you can see above, we've followed every possible way to get most space on the chart, but in no way cut the information to be present to the end viewer. Next, we code our HTML container - SmallResizedChart.html to embed this chart with the following code:

And when you now see the output, it would look as under:

Exactly what we were looking for - small chart and all information present as hover caption (tool tip)!

Thus you just saw how easy FusionCharts makes it for us to resize the chart to any dimensions that we need to.