FusionWidgets 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'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 the 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 the configure() function before rendering the chart. e.g.,
<div id="chartContainer">FusionWidgets XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("AngularGauge.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 an angular gauge and set blank data to the chart. But, before rendering the chart we also called configure() and passed the message type - ChartNoDataText. The ChartNoDataText message 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!
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 the configure() function multiple times and set one message at a time. e.g.,
<div id="chartContainer">FusionWidgets XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("AngularGauge.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 e.g.,
<div id="chartContainer">FusionWidgets XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("AngularGauge.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.,
<div id="chartContainer">FusionWidgets XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("AngularGauge.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 e.g., if you wish to set, say, the color purple as the background color while the messages are being shown, your code should be as shown below:
<div id="chartContainer">FusionWidgets XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Pyramid.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 the hidden color below by setting the bgAlpha attribute of XML or JSON of the chart, to a value lower than 100.