Loading

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.

Message Type What it does? Default Value

dataLoadStartMessage

Sets a custom message when data is being loaded.

Retrieving data. Please wait.

dataLoadErrorMessage

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.

dataInvalidMessage

Sets a custom message when data is found to be invalid (post-load).

Invalid data.

dataEmptyMessage

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.

typeNotSupportedMessage

Sets a custom message when specified chart type is not supported.

Chart type not supported.

loadMessage

Sets a custom message when chart is loading.

Loading chart. Please wait.

renderErrorMessage

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:

FusionCharts will load here..

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

baseChartMessageFont

Sets custom font for all chart messages.

baseChartMessageFontSize

Sets custom font-size for all chart messages.

baseChartMessageColor

Sets custom font color for all chart messages.

A column 2D chart that has custom style for all messages looks like this:

FusionCharts will load here..

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

dataLoadStartMessage

dataLoadStartMessageFont
dataLoadStartMessageFontSize
dataLoadStartMessageColor

dataLoadErrorMessage

dataLoadErrorMessageFont
dataLoadErrorMessageFontSize
dataLoadErrorMessageColor

dataInvalidMessage

dataInvalidMessageFont
dataInvalidMessageFontSize
dataInvalidMessageColor

dataEmptyMessage

dataEmptyMessageFont
dataEmptyMessageFontSize
dataEmptyMessageColor

typeNotSupportedMessage

typeNotSupportedMessageFont
typeNotSupportedMessageFontSize
typeNotSupportedMessageColor

loadMessage

loadMessageFont
loadMessageFontSize
loadMessageColor

renderErrorMessage

renderErrorMessageFont
renderErrorMessageFontSize
renderErrorMessageColor

Top