Changing chart properties

You are viewing documentation for an older version. For current documentation - click here.

PowerCharts XT uses FusionCharts JavaScript Class that takes care of all the products of FusionCharts Suite XT including PowerCharts XT.

The FusionCharts JavaScript Class allows you to change various settings and properties of an existing chart. You can dynamically update chart's root properties (also known as "chart attributes" which are passed through the <chart> element in chart XML data or through chart property in chart's JSON data) on-the-fly. This feature would come handy when you wish to change the chart titles, theme colors, number formatting or scaling setup, divisional line and grid configurations and other functional and cosmetic features of an existing chart. While the API allows you to update selective properties, internally, FusionCharts re-draws the entire chart.

Moreover, you can also change chart's width and height at run-time.

All the chart attributes are listed under "<chart> element attributes" section of the Chart XML Sheet of respective chart.

You need to use the setChartAttribute() function to set a chart attribute. All you need to do is pass the name of the attribute and its new value to this function. This function is available in all the instances of FusionCharts JavaScript Class. If you wish to change more than one chart attributes at one go, you can pass multiple attributes and their respective values as an Object. Each property name of the Object will take the name of the attribute. Value of each property will take the new value of the attribute.

Note that the SetChartAttribute function re-draws the chart with the initial data when updating attributes. Hence, it does not work on Drag Node, Drag Column, Drag Line, Drag Area and Select Scatter charts since these charts are modifiable at run-time.

Let's take some samples to illustrate the working of the function:

Change chart caption

myChart.setChartAttribute( "caption" , "Latest sales report" );

See it live!

In the above code we pass the attribute name as the first parameter and the new value as the second parameter.

Let us create a small sample that changes color theme of an existing chart as shown in the images below:


The chart after rendered for the first time	Chart with changed theme

See it live!

<html>
  <head>
    <title>Update Chart data</title>
    <script type="text/javascript" src="../../Charts/FusionCharts.js">
    </script>
  </head>
  <body>
    <center>
    <div id="chartContainer">PowerCharts XT will load here!</div>
    <script type="text/javascript"><!--

      var myChart = new FusionCharts( "../../Charts/Spline.swf", 
        "myChartId", "300", "240", "0", "1" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");

	  function changeAttribute()
	  {
		  // get chart reference
		  var chartReference = FusionCharts( "myChartId" ); 
		  
		  // change palette, palette colors and set glass effect to chart
		  chartReference.setChartAttribute( { "palette" : "2", paletteColors : "ACBF72" } );
	  }
    // -->
    </script>

    <input type="button" onClick="changeAttribute();" value="Change Chart Theme" >
    </center>
  </body>
</html>

In the above code, we do the following:

Create a chart
Place a button that calls the changeAttribute()function
Get chart reference using the FusionCharts("myChartId")function
Pass an object containing new attribute values to the setChartAttribute()function. The object contains three attributes as three properties - palette, paletteColors. If you have to update multiple properties of the chart at once, it is recommended to use the object notation as used in this code and pass all of them at once. This eliminates the need for multiple re-draws.

In case you wish to remove an attribute from the data, you can pass null as the value of the attribute. For example, setChartAttribute( "palette" , null ) will remove the palette attribute from the data.

Change chart sub-caption

var chartReference = FusionCharts("myChartId"); 
chartReference.setChartAttribute({"subCaption" : "new sub-title"});

See it live!

In the above code, we pass an object as the parameter.

Change number formatting settings

var chartReference = FusionCharts("myChartId"); 
chartReference.setChartAttribute({formatNumberScale : 1, decimals : 2, yAxisForceDecimals : 1});

See it live!

Change grid settings

var chartReference = FusionCharts("myChartId"); 
chartReference.setChartAttribute({showAlternateHGridColor : 1, alternateHGridColor : "ACBF72"});

See it live!

Set tooltips off

var chartReference = FusionCharts("myChartId"); 
chartReference.setChartAttribute("showTooltip",0);

See it live!

Set off shadow and lighting effects

var chartReference = FusionCharts("myChartId"); 
chartReference.setChartAttribute({"showShadow" : "0", "use3DLighting" : "0"});

See it live!

Limitations:

Listed below are the few limitations of the setChartAttribute()function:

setChartAttribure() works only using FusionCharts JavaScript Object reference. This function is not available if you use FusionCharts HTML Object reference.
You can update only those attribute which are available in <chart> element of a chart's XML data or "chart" property of a chart's JSON data.

Please note that the chart reloads itself with changed data when new attribute is set. During re-draw the chart forces animation='0'. If you wish to re-animate after property change, explicitly specify "animation": "1" in JSON update.

FusionCharts JavaScript Class provides an easy function to set chart messages. For this you need to use the configure() function.

When you wish to set a chart message this function takes the message attribute name and the custom message that you wish to set. Let's take a sample as shown below:

<div id="chartContainer">PowerCharts XT will load here</div>
<script type="text/javascript"><!--
  var myChart = new FusionCharts("Spline.swf", "myChartId", "300", "250", "0", "1");
  myChart.setXMLUrl("<chart></chart>");
  myChart.configure("ChartNoDataText", "Please select a record above");
  myChart.render("chartContainer");
// --></script>

The line myChart.configure("ChartNoDataText", "Please select a record above") sets a custom chart message when the chart does not find any data to plot.

There are advanced ways to use the configure()function while setting the chart messages. For details read Advanced Charting > Changing Chart Messages page.

FusionCharts JavaScript Class allows you to resize an existing chart using the resizeTo() function. You can pass the new width and height of the chart in pixels or percent parameters of the resizeTo()function. You can also change the width and height properties of the chart object and then call the resizeTo()function. The code samples below shows how you can do this:

Please note that the resizeTo()function, width and height properties only work using FusionCharts JavaScript object. It is not available in FusionCharts HTML Object.

Resize chart using pixel values

var chartReference = FusionCharts( "myChartId" ); 
chartReference.resizeTo( "500", "350" );

See it live!

Resize chart using percent values

var chartReference = FusionCharts( "myChartId" ); 
chartReference.resizeTo( "80%", "75%" );

See it live!

Resize chart setting width and height properties

var chartReference = FusionCharts( "myChartId" ); 
chartReference.width = "500";
chartReference.height = "80%";
chartReference.resizeTo();

Note that the resizeTo function is not available on the interactive charts like Drag Column, Drag Line, Drag Area, Drag Node and Select Scatter chart.

Code examples discussed in this section are present in Download Package > Code > JavaScript > Basics folder.