FusionCharts v3 allows you to change the various messages that gets displayed to the user like "No data to display", "Loading Chart", "Retrieving data" etc.

The following attributes define the different messages for the chart:

Let's quickly see an example where we edit the chart's "No data to display" message. This can be effectively useful when you want to start the chart with empty data and then populate the data on user.

It is recommended to use configure() function to set chart messages. For instance, if you wish to set chart ChartNoDataText message, you need to pass the attribute name and the message text to configure() before rendering the chart. e.g.,

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

In the above code we have created a Column2D chart and set blank data to the chart. But, before rendering the chart we also called configure() and pass the message type - ChartNoDataText. ChartNoDataText sets a custom message when data is not enough for chart to plot any graphic. As the second parameter of the function we pass the custom message that is to be shown in this situation. and the message text. When you run this chart, you'll get the following message instead of the normal message, which is way more intuitive for the user:

See it live!

Setting multiple messages

It is very easy again to set multiple messages. You can opt to call configure() function multiple times and set one message at a time. e.g.,

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

See it live!

In case you wish to set all the messages at one go, you can also achieve it calling configure() function once. You need to pass an object to the function, where each message type will be property name and the custom message will be the respective value. e.g.,

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

See it live!

You can also use the deprecated function addVariable() instead of configure() to do the same things shown above.

You can also use the deprecated method by passing the message as querystring values to the chart SWF path in chart's constructor. e.g.,

If you wish to set a background color for the chart when these messages are shown, you can do this by setting the bgColor parameter of the FusionCharts JavaScript constructor. e.g., if you wish to set, say, Red as the background color while the messages are being shown, your code should be as shown below:

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

See it live!

Note that this color actually stays below each chart when the chart renders with its own background color. You can blend the background color of chart and hidden color below by setting the bgAlpha attribute of XML or JSON of the chart, to a value lower than 100.