PowerCharts 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 data source. 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 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">PowerCharts XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Spline.swf", "myChartId", "300", "250", "0");
myChart.setXMLUrl("<chart></chart>");
myChart.configure("ChartNoDataText", "Please select a record above");
myChart.render("chartContainer");
// --></script>
In the above code we have created a Spline 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 a similar example 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. e.g.,
<div id="chartContainer">PowerCharts XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Spline.swf", "myChartId", "300", "250", "0");
myChart.setXMLUrl("<chart></chart>");
myChart.configure( "ChartNoDataText", "Please select a record above");
myChart.configure( "InvalidXMLText", "Please validate data");
myChart.render("chartContainer");
// --></script>
See a similar example 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">PowerCharts XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Spline.swf", "myChartId", "300", "250", "0");
myChart.setXMLUrl("<chart></chart>");
myChart.configure( {
"ChartNoDataText" : "Please select a record above" ,
"InvalidXMLText" : "Please validate data"
});
myChart.render("chartContainer");
// --></script>
See a similar example 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">PowerCharts XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Spline.swf?ChartNoDataText=Please select a record above", "ChId1", "300", "250", "0");
myChart.setXMLUrl("<chart></chart>");
myChart.render("chartContainer");
// --></script>
This method is not supported 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. e.g., 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">PowerCharts XT will load here</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Spline.swf", "myChartId", "300", "250", "0", "1", "#DCD8EB");
myChart.setXMLUrl("<chart></chart>");
myChart.configure("ChartNoDataText", "Please select a record above");
myChart.render("chartContainer");
// --></script>
See a similar example live!
Note that this color stays as the color of the base-background color of the chart over which the chart renders its own background color. You can blend the background color of chart and with this base-background-color by setting the bgAlpha attribute of XML or JSON of the chart, to a value lower than 100.