FusionCharts XT 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:
| Attribute Name (message type) | What it does? | What message it controls (default values) |
| PBarLoadingText
or LoadingText(For JavaScript charts only) |
Sets a custom message when chart is loading. | Loading Chart. Please Wait. |
| XMLLoadingText | Sets a custom message when chart data is loading. | Retrieving Data. Please Wait. |
| ParsingDataText | Sets a custom message when data is being parsed by chart. | Reading Data. Please Wait. |
| ChartNoDataText | Sets a custom message when the chart has retrieved data which does not contain any data for chart to plot or the data does not conform to the data structure required by the chart type. | No data to display. |
| RenderingChartText | Sets a custom message when the chart is being drawn. | Rendering Chart. Please Wait. |
| LoadDataErrorText | Sets a custom message when there is error in loading the chart data from the data URL provided as datasource.This may happen when the URL is invalid or inaccessible. | Error in loading data. |
| InvalidXMLText | Sets a custom message when the data which is sent to the chart is invalid as per XML validation rules. | Invalid data. |
Let us 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.
For example,
<div id="chartContainer">FusionCharts XT 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 provided blank data to the chart. But, before rendering the chart we also called configure() and passed the message type - ChartNoDataText. ChartNoDataText sets a custom message when data is not enough to be plotted on the chart. 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 will get the following message instead of the normal message, which is way more intuitive for the user:
See it live!
To hide a chart message please provide a blank space as the custom message. For example, if you wish to disable the chart loading message, you may use myChart.configure("PBarLoadingText", " ");
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.
For example,
<div id="chartContainer">FusionCharts XT 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.
For example,
<div id="chartContainer">FusionCharts XT 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.
For example,
<div id="chartContainer">FusionCharts XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Column2D.swf?ChartNoDataText=Please select a record above", "ChId1", "300", "250", "0", "1");
myChart.setXMLUrl("<chart></chart>");
myChart.render("chartContainer");
// --></script>
The deprecated method does not work in JavaScript charts.
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. For example, if you wish to set, say, purple as the background color while the messages are being shown, your code should be as shown below:
<div id="chartContainer">FusionCharts XT 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.