new FusionCharts(options)

Create new instances of charts, gauges and maps using this function.

The preferred way to draw charts, gauges and maps using FusionCharts is to pass the chart configurations and data to this constructor and call render() on the returned instance. You can provide all the properties, data and event bindings of charts through the parameters passed to this function.

You can call methods of the FusionCharts class on the returned instance. For all practical purposes, this is the first step to creating a chart, gauges and maps using FusionCharts.

Accessing existing charts using FusionCharts() constructor:

The FusionCharts function has a dual behavior - other than creating new charts, it can also be used to access already created charts. This is done by dropping the new operator and passing only the chart id as a parameter. For example, var salesChart = FusionCharts('sales-chart'); will return the instance of the chart with the id "sales-chart". The previous code snippet is equivalent to var salesChart = FusionCharts.items['sales-chart'];. Refer to FusionCharts.items to know more.

Parameters:
Parameter Description
options
Type:
object

While creating a new instance of FusionCharts, you can pass an options object with all configuration parameters for that instance. All configurations passed through this object are referred to as "construction parameters". Through these parameters, you can customize the look and feel of a chart, pass data to the chart, configure its dimensions and bind to events.

Each of this object's properties correspond to a configuration option.

Properties
Parameter Description
type
Type:
string
Attributes:
<optional>

Provide the name of the chart type to be rendered. Full list of charts is available at List of Charts.

This parameter controls what chart will be rendered. The data passed to the chart has to be compatible with the chart type specified here.

Alternatively, you can also call FusionCharts#chartType on the chart instance to provide the chart type.
id
Type:
string
Attributes:
<optional>

This name is used to refer to the current instance after the chart has been created. The chart instance is available under this name in FusionCharts.items. If no id is provided, FusionCharts automatically generates an id for each chart.
width
Type:
numeric or percent
Attributes:
<optional>
Default:
"400"

Set the width in pixels or percent such as 640 or '50%'. If width is in pixels, there is no need to provide the px unit suffix. You can call FusionCharts#resizeTo function on the chart instance to set the width later on.
height
Type:
numeric or percent
Attributes:
<optional>
Default:
"300"

Set the height in pixels or percent such as 640 or '50%'. If height is in pixels, there is no need to provide the px unit suffix. You can call FusionCharts#resizeTo function on the chart instance to set the height later on.
renderAt
Type:
string or DOMElement
Attributes:
<optional>

A chart needs reference to a DOM element on the page where it will be rendered. You can provide the HTML ID of the element as a string to this option, or you can pass a reference of the DOMElement itself where the chart needs to be rendered.

For example, if you have a DOMElement like <div class='chart-1' id='chart-container'></div>, you can provide the value of the div's id attribute to this option as a string. Alternatively, you can pass direct reference to the DOMElement like: renderAt: document.getElementByClassName("chart-1").

Instead of providing the DOMElement here, it can also be passed as the first parameter to the FusionCharts.render function. Setting the DOMElement in FusionCharts.render function overrides the value set here.
dataFormat
Type:
FusionCharts~dataFormats
Attributes:
<optional>

This is the name of the format of data passed to the dataSource option below. Currently, FusionCharts accepts only JSON and XML data. The value for this option is one of the formats specified in FusionCharts~dataFormats.
dataSource
Type:
string or object
Attributes:
<optional>

Provide the source of data and configuration of the chart. FusionCharts accepts data in the formats specified in FusionCharts~dataFormats.

This is the preferred way to set data and configuration of the chart. The data and configuration can also be updated or set using the functions FusionCharts#setChartData and FusionCharts#setChartDataUrl.
events
Type:
object
Attributes:
<optional>

You can bind multiple events to this particular chart instance through this option. You need to pass an object to this option, where each key is an event name fired by FusionCharts and value for that key is a callback in the format of FusionCharts~eventListener.

To bind multiple charts to the same event, you need to use FusionCharts#addEventListener function instead.
link
Type:
object
Attributes:
<optional>

Provide LinkedCharts configuration. See FusionCharts#configureLink for details.
showDataLoadingMessage
Type:
boolean
Attributes:
<optional>
Default:
false

FusionCharts shows a message while it is retrieving data from a url provided as dataSource. While displaying the message the chart is grayed out and interaction on it is blocked. This can be prevented by setting this option to false.
showChartLoadingMessage
Type:
boolean
Attributes:
<optional>
Default:
true

Shows Loading chart... message in renderAt container if the chart needs to load additional resource/JS files. This can be turned off by setting this option to false.
baseChartMessageFont
Type:
string
Attributes:
<optional>
Default:
'Verdana'

Allows to set the common custom font face for all chart messages.
baseChartMessageFontSize
Type:
string
Attributes:
<optional>
Default:
'10'

Allows to set the common custom font size for all chart messages.
baseChartMessageColor
Type:
hexcolor
Attributes:
<optional>
Default:
'#666666'

Allows to set the common custom font color for all chart messages.
dataLoadStartMessage
Type:
string
Attributes:
<optional>
Default:
'Retrieving data. Please wait.'

Allows to set the message to be displayed before the chart data begins loading. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
dataLoadErrorMessage
Type:
string
Attributes:
<optional>
Default:
'Error in loading data.'

Allows to set the message to be displayed when there is an error loading the chart data. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
dataInvalidMessage
Type:
string
Attributes:
<optional>
Default:
'Invalid data.'

Allows to set the message to be displayed when the data loaded for the chart is invalid. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
dataEmptyMessage
Type:
string
Attributes:
<optional>
Default:
'No data to display.'

Allows to set the message to be displayed if data loaded for the chart is empty. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
typeNotSupportedMessage
Type:
string
Attributes:
<optional>
Default:
'Chart type not supported.'

Allows to set the message to be displayed if specified chart type is not supported. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
loadMessage
Type:
string
Attributes:
<optional>
Default:
'Loading chart. Please wait.'

Allows to set the message to be displayed when the chart begins to load. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
renderErrorMessage
Type:
string
Attributes:
<optional>
Default:
'Unable to render chart.'

Allows to set the message to be displayed if there was an error while rendering the chart. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
containerBackgroundColor
Type:
hexcolor
Attributes:
<optional>
Default:
"#ffffff"

Sets the background color of the chart's container HTML DOM element. It is not same as bgColor chart attribute. To see this background color, a chart's own background alpha must be set to 0 by setting bgAlpha attribute to "0" in chart attributes.
containerBackgroundOpacity
Type:
opacity
Attributes:
<optional>
Default:
1

Sets the opacity of the container element. Useful if the chart has underlying HTML elements or background image that needs to be made visible. If opacity is reduced, you need to configure the chart itself to be transparent by setting the bgAlpha chart attribute.
containerClassName
Type:
string
Attributes:
<optional>

Sets the CSS class that will be set on the container DOM element of the rendered chart. Default is fusioncharts-container.
Example
<html>
<head>
<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
    // Create a new instance of FusionCharts for rendering inside an HTML
    // `&lt;div&gt;` element with id `my-chart-container`.
    var myChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',

        dataFormat: 'json',
        dataSource: {
            chart: {
                caption: "Harry's SuperMart",
                subCaption: "Top 5 stores in last month by revenue",
            },
            data:[{
                label: "Bakersfield Central",
                value: "880000"
            },
            {
                label: "Garden Groove harbour",
                value: "730000"
            },
            {
                label: "Los Angeles Topanga",
                value: "590000"
            },
            {
                label: "Compton-Rancho Dom",
                value: "520000"
            },
            {
                label: "Daly City Serramonte",
                value: "330000"
            }]
        }
    });

    // Render the chart.
    myChart.render();
});
</script>
<body>
    <div id="chart-container">FusionCharts will load here...</div>
</body>
</html>