FusionCharts

Till now you had seen how to control and manipulate the graph functionality and looks by passing attributes via the XML data source. But, there’s more to it – there’s another way of changing the internal coded values in FusionCharts by using the OBJECT/EMBED method. Say, for example, you wished to change the shadow depth of the pie chart – you can’t do this using the XML data source – however the same can be done by passing a hidden value through the OBJECT/EMBED tag.

Let’s first have a look at how we can pass data through the OBJECT/EMBED tag. Consider the following HTML code:

Here, in the above code, we provide the following parameters to the graph: dataUrl legendBoxWidth (with value as 200) and legendBoxHeight (with value as 120).

So, now let’s get rolling and see the various hidden attributes for each graph.

Column 3D/ Line/ Area Chart
The column chart supports the following OBJECT/EMBED parameters:

shadowDarkIntensity: This attribute sets the intensity for the medium dark shadows. Its default value is 0.80. If you increase this value, the shadow will become lighter.
shadowDarkerIntensity: This attribute sets the intensity for the darkest shadows. Its default value is 0.65. If you increase this value, the shadow will become lighter and vice-versa.
plotAreaLeftMargin: This attribute indicates the left space (in pixels) on the canvas to be left unfilled while plotting the chart.
plotAreaRightMargin: This attribute indicates the right space (in pixels) on the canvas to be left unfilled while plotting the chart.
stageWidth: The width of the entire stage (default - 565).
plotAreaWidth: The width of the plotting area i.e., the entire grid.
plotAreaHeight: The height of the plotting area i.e., the entire grid.
spacingArea: Total spacing area available on the canvas. If you increase this value, the columns will become thinner and vice versa.

For the pipe chart, we have the following additional parameters along with the ones earlier discussed for Column Chart:
gradientShadowIntensity: The shadow intensity of the gradient.

lineGradientLightColor: The light gradient color of the pipe – by default FFFFFF.
shadowXShift: The shift in x-position for the shadow – by default 10.
shadowYShift: The shift in y-position for the shadow – by default 10.
shadowColor: The color of the shadow – by default CCCCCC.

For the pie chart, we have the following additional OBJECT/EMBED parameters:

sliceSpacingDistance: If a pie segment is sliced, then this value determines the distance of the slice from other segments.
shadowDepth: The depth of the pie shadow in pixels – by default 12.
yRadiusScale: The y-radius scale (determines the angle of inclination for pie set) – by default 70
xRadius: The radius of each pie in pixels – by default 100
pieOriginX: The X origin in pixels – by default 200
pieOriginY: The Y origin in pixels – by default 270
nameTbDistance: Distance of the value textbox from the pie segments in pixels – by default 25
showLegend: Option to show/hide the legend – accepts 1/0.
legendBoxX: X co-ordinate of the legend box – by default 340
legendBoxY: Y co-ordinate of the legend box – by default 80
legendBoxHeight: Height of the legend box – by default 220
legendBoxWidth: Width of the legend box – by default 175
legendBoxItems: Number of data items to be displayed in the legend box – by default 8
legendItemHorSpacing: The horizontal spacing factor (in pixels) between the legend box walls and the data items – by default 5
legendItemVerSpacing: The vertical spacing factor (in pixels) between the legend box walls and the data items or between two data items– by default 5
navBtnSpacingX: The horizontal spacing factor (in pixels) between the legend box walls and the data table navigation buttons– by default 3

So, now let’s get on with the customization of a pie chart. We first intend to do the following:

Shift the pie to the right of the canvas
Shift the legend box to the left of the pie.

To do this, we’ll have to alter our HTML code to the following:

You’ll get the following output:

Similarly, if we wanted the pie slices to cover the entire area of the chart and to hide the legend box, we would have to write the following code:

And, the output would have been as under: