Configure Chart Messages
You can change the text and style of the chart status messages that appear throughout the life cycle of the chart.
Below is a list of status and error messages that can be set for any chart in the FusionCharts constructor.
In this section, you will be shown how yoou can:
Message Type | What it does? | Default Value |
---|---|---|
|
Sets a custom message when data is being loaded. |
Retrieving data. Please wait. |
|
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. |
|
Sets a custom message when data is found to be invalid (post-load). |
Invalid data. |
|
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. |
|
Sets a custom message when specified chart type is not supported. |
Chart type not supported. |
|
Sets a custom message when chart is loading. |
Loading chart. Please wait. |
|
Sets a custom message when an error is encountered while rendering the chart. |
Unable to render chart. |
Setting custom messages
A simple column 2D chart that displays custom dataLoadStartMessage is shown below:
The constructor for the chart is shown below:
var revenueChart = new FusionCharts({
type: 'column2d',
dataLoadStartMessage: "Fetching revenue data for the previous year",
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'xmlurl',
dataSource: 'columndata.php'
});
Simlarly, other chart messages can be set using constructor parameters.
Styling chart messages
Custom styles can also be applied to these messages, i.e. setting custom text font, font-size and color.
To apply common styling to all chart messages, use these attributes:
Attribute Name | Description |
---|---|
|
Sets custom font for all chart messages. |
|
Sets custom font-size for all chart messages. |
|
Sets custom font color for all chart messages. |
A column 2D chart that has custom style for all messages looks like this:
The constructor data for the chart is shown below:
var revenueChart = new FusionCharts({
type: 'column2d',
dataLoadStartMessage: "Fetching revenue data for the previous year",
baseChartMessageFont: "Arial",
baseChartMessageFontSize: "18",
baseChartMessageColor: "#FC0000",
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'xmlurl',
dataSource: 'columndata.php'
});
To override styling for individual chart messages, there are attributes corresponding to each type of message. These attributes use a common scheme. Append Font, FontSize or Color to the specific chart message constructor parameter to customise the font, font-size or color of the message respectively.
For example, to customise styling of dataLoadStartMessage, the attributes will be:
dataLoadStartMessageFont: 'Helvetica',
dataLoadStartMessageFontSize: '24',
dataLoadStartMessageColor: ‘#00FF00'
Given below is a table of all the attributes for applying styles for each of these messages:
Message Type | Style Attributes |
---|---|
|
dataLoadStartMessageFont |
|
dataLoadErrorMessageFont |
|
dataInvalidMessageFont |
|
dataEmptyMessageFont |
|
typeNotSupportedMessageFont |
|
loadMessageFont |
|
renderErrorMessageFont |