Loading
Creating a chart object
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 items to know more.
Parameters
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.
options
: {
Provide the name of the chart type to be rendered. Full list of charts is available at tutorials/setup-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 chartType on the chart instance to provide the chart type.
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 items. If no id is provided, FusionCharts automatically generates an id for each chart.
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 resizeTo function on the chart instance to set the width later on.
“400”
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 resizeTo function on the chart instance to set the height later on.
“300”
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 render function. Setting the DOMElement in render function overrides the value set here.
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 dataFormats.
Provide the source of data and configuration of the chart. FusionCharts accepts data in the formats specified in 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 setChartData and setChartDataUrl.
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 eventListener.
To bind multiple charts to the same event, you need to use addEventListener function instead.
Provide LinkedCharts configuration. See configureLink for details.
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.
false
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.
true
Allows to set the common custom font face for all chart messages.
‘Verdana’
Allows to set the common custom font size for all chart messages.
‘10’
Allows to set the common custom font color for all chart messages.
‘#666666’
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.
Now using a prefix ‘i-‘, an image URL can be specified and the corresponding image will be displayed in place of the message. Alignment and properties of the image can be configured using attributes such as dataLoadStartMessageHAlign, dataLoadStartMessageVAlign, dataLoadStartMessageAlpha and so on.
‘Retrieving data. Please wait.’
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. dataLoadErrorMessageFont, dataLoadErrorMessageFontSize, dataLoadErrorMessageColor. If message keys are not specified, base cosmetics are used.
Now using a prefix ‘i-‘, an image URL can be specified and the corresponding image will be displayed in place of the message. Alignment and properties of the image can be configured using attributes such as dataLoadErrorMessageHAlign, dataLoadErrorMessageVAlign, dataLoadErrorMessageAlpha and so on.
‘Error in loading 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. dataInvalidMessageFont, dataInvalidMessageFontSize, dataInvalidMessageColor. If message keys are not specified, base cosmetics are used.
Now using a prefix ‘i-‘, an image URL can be specified and the corresponding image will be displayed in place of the message. Alignment and properties of the image can be configured using attributes such as dataInvalidMessageHAlign, dataInvalidMessageVAlign, dataInvalidMessageAlpha and so on.
‘Invalid data.’
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. dataEmptyMessageFont, dataEmptyMessageFontSize, dataEmptyMessageColor. If message keys are not specified, base cosmetics are used.
Now using a prefix ‘i-‘, an image URL can be specified and the corresponding image will be displayed in place of the message. Alignment and properties of the image can be configured using attributes such as dataEmptyMessageHAlign, dataEmptyMessageVAlign, dataEmptyMessageAlpha and so on.
‘No data to display.’
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. typeNotSupportedMessageFont, typeNotSupportedMessageFontSize, typeNotSupportedMessageColor. If message keys are not specified, base cosmetics are used.
Now using a prefix ‘i-‘, an image URL can be specified and the corresponding image will be displayed in place of the message. Alignment and properties of the image can be configured using attributes such as typeNotSupportedMessageHAlign, typeNotSupportedMessageVAlign, typeNotSupportedMessageAlpha and so on.
‘Chart type not supported.’
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. loadStartMessageFont, loadStartMessageFontSize, loadStartMessageColor. If message keys are not specified, base cosmetics are used.
Now using a prefix ‘i-‘, an image URL can be specified and the corresponding image will be displayed in place of the message. Alignment and properties of the image can be configured using attributes such as loadMessageHAlign, loadMessageVAlign, loadMessageAlpha and so on.
‘Loading chart. Please wait.’
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. renderErrorMessageFont, renderErrorMessageFontSize, renderErrorMessageColor. If message keys are not specified, base cosmetics are used.
Now using a prefix ‘i-‘, an image URL can be specified and the corresponding image will be displayed in place of the message. Alignment and properties of the image can be configured using attributes such as renderErrorMessageHAlign, renderErrorMessageVAlign, renderErrorMessageAlpha and so on.
‘Unable to render chart.’
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.
“#ffffff”
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.
1
Sets the CSS class that will be set on the container DOM element of the rendered chart. Default is fusioncharts-container.
Allows to set the horizontal alignment for all chart message images, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
‘middle’
Allows to set the vertical alignment for all chart message images, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
‘middle’
Allows to set the common alpha value for all chart message images, helps to set the opacity of the image. Value can range from 0 to 100.
‘100’
Allows to set the common scaling for all chart message images, helps to magnify the image. Value can range from 0 to 300.
‘100’
Allows to set the horizontal alignment for image in type not supported chart message, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
baseChartMessageImageHAlign
Allows to set the vertical alignment for image in type not supported chart message, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
baseChartMessageImageVAlign
Allows to set the alpha value for image in type not supported chart message, helps to set the opacity of the image. Value can range from 0 to 100.
baseChartMessageImageAlpha
Allows to set the scaling for image in type not supported chart message, helps to magnify the image. Value can range from 0 to 300.
baseChartMessageImageScale
Allows to set the horizontal alignment for image in data load error chart message, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
baseChartMessageImageHAlign
Allows to set the vertical alignment for image in data load error chart message, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
baseChartMessageImageVAlign
Allows to set the alpha value for image in data load error chart message, helps to set the opacity of the image. Value can range from 0 to 100.
baseChartMessageImageAlpha
Allows to set the scaling for image in data load error chart message, helps to magnify the image. Value can range from 0 to 300.
baseChartMessageImageScale
Allows to set the horizontal alignment for image in data load start chart message, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
baseChartMessageImageHAlign
Allows to set the vertical alignment for image in data load start chart message, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
baseChartMessageImageVAlign
Allows to set the alpha value for image in data load start chart message, helps to set the opacity of the image. Value can range from 0 to 100.
baseChartMessageImageAlpha
Allows to set the scaling for image in data load start chart message, helps to magnify the image. Value can range from 0 to 300.
baseChartMessageImageScale
Allows to set the horizontal alignment for image in data invalid chart message, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
baseChartMessageImageHAlign
Allows to set the vertical alignment for image in data invalid chart message, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
baseChartMessageImageVAlign
Allows to set the alpha value for image in data invalid chart message, helps to set the opacity of the image. Value can range from 0 to 100.
baseChartMessageImageAlpha
Allows to set the scaling for image in data invalid chart message, helps to magnify the image. Value can range from 0 to 300.
baseChartMessageImageScale
Allows to set the horizontal alignment for image in data empty chart message, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
baseChartMessageImageHAlign
Allows to set the vertical alignment for image in data empty chart message, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
baseChartMessageImageVAlign
Allows to set the alpha value for image in data empty chart message, helps to set the opacity of the image. Value can range from 0 to 100.
baseChartMessageImageAlpha
Allows to set the scaling for image in data empty chart message, helps to magnify the image. Value can range from 0 to 300.
baseChartMessageImageScale
Allows to set the horizontal alignment for image in render error chart message, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
baseChartMessageImageHAlign
Allows to set the vertical alignment for image in render error chart message, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
baseChartMessageImageVAlign
Allows to set the alpha value for image in render error chart message, helps to set the opacity of the image. Value can range from 0 to 100.
baseChartMessageImageAlpha
Allows to set the scaling for image in render error chart message, helps to magnify the image. Value can range from 0 to 300.
baseChartMessageImageScale
Allows to set the horizontal alignment for image in load chart message, helps to horizontally align the image in the canvas. Possible values are left, right and middle.
baseChartMessageImageHAlign
Allows to set the vertical alignment for image in load chart message, helps to vertically align the image in the canvas. Possible values are top, bottom and middle.
baseChartMessageImageVAlign
Allows to set the alpha value for image in load chart message, helps to set the opacity of the image. Value can range from 0 to 100.
baseChartMessageImageAlpha
Allows to set the scaling for image in load chart message, helps to magnify the image. Value can range from 0 to 300.
baseChartMessageImageScale
}
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
// `<div>` 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>