Choose an item

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:

  • Set custom messages
  • Use style for chart messages
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