Loading
XY and Bubble Charts
Scatter Chart
Harry wants to measure whether temperature has a direct co-relation on sales of ice-creams and beers. He wants to plot a chart that measures temperature in that store, against sale of ice-cream and beers.To plot such co-relation between two data series, both of which are numeric, a scatter/XY plot chart is best suited.
A scatter chart is used when independent parameters with numerical values have to be displayed on a chart. It is basically used to determine the relationship between those two independent parameters. For example, the height and weight of a person can be correlated to the age.
This data, when converted into a scatter chart for Harry, would look as under:
The above chart clearly shows that increase in temperature leads to more sales of ice-creams, compared to beer.
The data used to create the chart is shown below:
| Temperature | Ice Cream Sales | Beer Sales |
|---|---|---|
| 23 F | $1,560 K | $3,160 K |
| 24 F | $1,500 K | $3,000 K |
| 24 F | $1,680 K | $3,080 K |
| … | … | … |
| … | … | … |
| 89 F | $7,400 K | $5,900 K |
| 90 F | $7,500 K | $5,500 K |
| 92 F | $7,640 K | $5,240 K |
Let’s begin
Creating this chart involves the following steps
- Installing FusionCharts Suite XT for your application
- Converting your data to a JSON or XML format. FusionCharts Suite XT accepts both data formats, and can read it as a string, or from a file, local or remote
- Including the FusionCharts Suite XT JavaScript library in your HTML page
- Creating a container
<div>for the chart - Using the new
FusionCharts()constructor to create the map instance, and then calling therender()method
Including FusionCharts Suite in your application
To include the FusionCharts Suite XT JavaScript library in your HTML page, you use the <script> tag as under. Next, we include a theme file to style the chart. The theme is called fint (FusionCharts internal) and it is present in themes folder of your download.
<html>
<head>
<title>My First Scatter Chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
</head>
</html>It informs the browser where to load the FusionCharts Suite XT library from. We recommend using a relative path to the library hosted on the same domain as your web application.
Converting your data to FusionCharts Suite XT JSON/XML format
For this example, our dataset, when converted to FusionCharts Suite XT JSON/XML format, looks as under.
{
"chart": {
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subcaption": "Los Angeles Topanga",
"xaxisname": "Average Day Temperature",
"yaxisname": "Sales (In USD)",
"xaxisminvalue": "23",
"xaxismaxvalue": "95",
"ynumberprefix": "$",
"xnumbersuffix": "° F",
"theme": "fint"
},
"categories": [
{
"category": [
{
"x": "23",
"label": "23° F",
"showverticalline": "0"
},
{
"x": "32",
"label": "32° F",
"showverticalline": "1"
},
{
"x": "50",
"label": "50° F",
"showverticalline": "1"
},
{
"x": "68",
"label": "68° F",
"showverticalline": "1"
},
{
"x": "80",
"label": "80° F",
"showverticalline": "1"
},
{
"x": "95",
"label": "95° F",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"seriesname": "Ice Cream",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "1560"
},
{
"x": "24",
"y": "1500"
},
{
"x": "24",
"y": "1680"
},
{
"x": "25",
"y": "1780"
},
{
"x": "25",
"y": "1620"
},
{
"x": "26",
"y": "1810"
},
{
"x": "27",
"y": "2310"
},
{
"x": "29",
"y": "2620"
},
{
"x": "31",
"y": "2500"
},
{
"x": "32",
"y": "2410"
},
{
"x": "35",
"y": "2880"
},
{
"x": "36",
"y": "3910"
},
{
"x": "34",
"y": "3960"
},
{
"x": "38",
"y": "4080"
},
{
"x": "40",
"y": "4190"
},
{
"x": "41",
"y": "4170"
},
{
"x": "42",
"y": "4280"
},
{
"x": "54",
"y": "5180"
},
{
"x": "53",
"y": "5770"
},
{
"x": "55",
"y": "5900"
},
{
"x": "56",
"y": "5940"
},
{
"x": "58",
"y": "6090"
},
{
"x": "61",
"y": "6086"
},
{
"x": "67",
"y": "6100"
},
{
"x": "68",
"y": "6200"
},
{
"x": "70",
"y": "6360"
},
{
"x": "75",
"y": "6450"
},
{
"x": "79",
"y": "6650"
},
{
"x": "80",
"y": "6710"
},
{
"x": "79",
"y": "6975"
},
{
"x": "82",
"y": "7000"
},
{
"x": "85",
"y": "7150"
},
{
"x": "86",
"y": "7160"
},
{
"x": "86",
"y": "7200"
},
{
"x": "88",
"y": "7230"
},
{
"x": "87",
"y": "7210"
},
{
"x": "86",
"y": "7480"
},
{
"x": "89",
"y": "7540"
},
{
"x": "89",
"y": "7400"
},
{
"x": "90",
"y": "7500"
},
{
"x": "92",
"y": "7640"
}
]
},
{
"seriesname": "Beer",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "3160"
},
{
"x": "24",
"y": "3000"
},
{
"x": "24",
"y": "3080"
},
{
"x": "25",
"y": "3680"
},
{
"x": "25",
"y": "3320"
},
{
"x": "26",
"y": "3810"
},
{
"x": "27",
"y": "5310"
},
{
"x": "29",
"y": "3620"
},
{
"x": "31",
"y": "4100"
},
{
"x": "32",
"y": "3910"
},
{
"x": "35",
"y": "4280"
},
{
"x": "36",
"y": "4210"
},
{
"x": "34",
"y": "4160"
},
{
"x": "38",
"y": "4480"
},
{
"x": "40",
"y": "4890"
},
{
"x": "41",
"y": "4770"
},
{
"x": "42",
"y": "4880"
},
{
"x": "54",
"y": "4980"
},
{
"x": "53",
"y": "4770"
},
{
"x": "55",
"y": "4900"
},
{
"x": "56",
"y": "4940"
},
{
"x": "58",
"y": "4990"
},
{
"x": "61",
"y": "5086"
},
{
"x": "67",
"y": "5100"
},
{
"x": "68",
"y": "4700"
},
{
"x": "70",
"y": "5360"
},
{
"x": "75",
"y": "5150"
},
{
"x": "79",
"y": "5450"
},
{
"x": "80",
"y": "5010"
},
{
"x": "79",
"y": "4975"
},
{
"x": "82",
"y": "5400"
},
{
"x": "85",
"y": "5150"
},
{
"x": "86",
"y": "5460"
},
{
"x": "86",
"y": "5000"
},
{
"x": "88",
"y": "5200"
},
{
"x": "87",
"y": "5410"
},
{
"x": "86",
"y": "5480"
},
{
"x": "89",
"y": "5440"
},
{
"x": "89",
"y": "5300"
},
{
"x": "90",
"y": "5500"
},
{
"x": "92",
"y": "5240"
}
]
}
],
"vtrendlines": [
{
"line": [
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
},
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": "Cold"
},
{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"displayvalue": "Moderate"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": "Hot"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": "Very hot"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}
]
}
]
}Creating a container for your chart in the web page
Next, you will need to create a container for your chart in the form of a <div> element, as under:
Creating an instance of the chart
The JavaScript code needed to create an instance of this chart would look like:
<script>
FusionCharts.ready(function () {
var tempVsSalesChart = new FusionCharts({
"type": "scatter",
"renderAt": "chartContainer",
"width": "650",
"height": "350",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subcaption": "Los Angeles Topanga",
"xaxisname": "Average Day Temperature",
"yaxisname": "Sales (In USD)",
"xaxisminvalue": "23",
"xaxismaxvalue": "95",
"ynumberprefix": "$",
"xnumbersuffix": "° F",
"theme": "fint"
},
"categories": [{
"category": [{
"x": "23",
"label": "23\xB0 F",
"showverticalline": "0"
}, {
"x": "32",
"label": "32\xB0 F",
"showverticalline": "1"
}, {
"x": "50",
"label": "50\xB0 F",
"showverticalline": "1"
}, {
"x": "68",
"label": "68\xB0 F",
"showverticalline": "1"
}, {
"x": "80",
"label": "80\xB0 F",
"showverticalline": "1"
}, {
"x": "95",
"label": "95\xB0 F",
"showverticalline": "1"
}]
}],
"dataset": [{
"seriesname": "Ice Cream",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "1560"
},
{
"x": "24",
"y": "1500"
},
{
"x": "24",
"y": "1680"
},
{
"x": "25",
"y": "1780"
},
{
"x": "25",
"y": "1620"
},
{
"x": "26",
"y": "1810"
},
{
"x": "27",
"y": "2310"
},
{
"x": "29",
"y": "2620"
},
{
"x": "31",
"y": "2500"
},
{
"x": "32",
"y": "2410"
},
{
"x": "35",
"y": "2880"
},
{
"x": "36",
"y": "3910"
},
{
"x": "34",
"y": "3960"
},
{
"x": "38",
"y": "4080"
},
{
"x": "40",
"y": "4190"
},
{
"x": "41",
"y": "4170"
},
{
"x": "42",
"y": "4280"
},
{
"x": "54",
"y": "5180"
},
{
"x": "53",
"y": "5770"
},
{
"x": "55",
"y": "5900"
},
{
"x": "56",
"y": "5940"
},
{
"x": "58",
"y": "6090"
},
{
"x": "61",
"y": "6086"
},
{
"x": "67",
"y": "6100"
},
{
"x": "68",
"y": "6200"
},
{
"x": "70",
"y": "6360"
},
{
"x": "75",
"y": "6450"
},
{
"x": "79",
"y": "6650"
},
{
"x": "80",
"y": "6710"
},
{
"x": "79",
"y": "6975"
},
{
"x": "82",
"y": "7000"
},
{
"x": "85",
"y": "7150"
},
{
"x": "86",
"y": "7160"
},
{
"x": "86",
"y": "7200"
},
{
"x": "88",
"y": "7230"
},
{
"x": "87",
"y": "7210"
},
{
"x": "86",
"y": "7480"
},
{
"x": "89",
"y": "7540"
},
{
"x": "89",
"y": "7400"
},
{
"x": "90",
"y": "7500"
},
{
"x": "92",
"y": "7640"
}]
}, {
"seriesname": "Beer",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "3160"
},
{
"x": "24",
"y": "3000"
},
{
"x": "24",
"y": "3080"
},
{
"x": "25",
"y": "3680"
},
{
"x": "25",
"y": "3320"
},
{
"x": "26",
"y": "3810"
},
{
"x": "27",
"y": "5310"
},
{
"x": "29",
"y": "3620"
},
{
"x": "31",
"y": "4100"
},
{
"x": "32",
"y": "3910"
},
{
"x": "35",
"y": "4280"
},
{
"x": "36",
"y": "4210"
},
{
"x": "34",
"y": "4160"
},
{
"x": "38",
"y": "4480"
},
{
"x": "40",
"y": "4890"
},
{
"x": "41",
"y": "4770"
},
{
"x": "42",
"y": "4880"
},
{
"x": "54",
"y": "4980"
},
{
"x": "53",
"y": "4770"
},
{
"x": "55",
"y": "4900"
},
{
"x": "56",
"y": "4940"
},
{
"x": "58",
"y": "4990"
},
{
"x": "61",
"y": "5086"
},
{
"x": "67",
"y": "5100"
},
{
"x": "68",
"y": "4700"
},
{
"x": "70",
"y": "5360"
},
{
"x": "75",
"y": "5150"
},
{
"x": "79",
"y": "5450"
},
{
"x": "80",
"y": "5010"
},
{
"x": "79",
"y": "4975"
},
{
"x": "82",
"y": "5400"
},
{
"x": "85",
"y": "5150"
},
{
"x": "86",
"y": "5460"
},
{
"x": "86",
"y": "5000"
},
{
"x": "88",
"y": "5200"
},
{
"x": "87",
"y": "5410"
},
{
"x": "86",
"y": "5480"
},
{
"x": "89",
"y": "5440"
},
{
"x": "89",
"y": "5300"
},
{
"x": "90",
"y": "5500"
},
{
"x": "92",
"y": "5240"
}
]
}],
"vtrendlines": [{
"line": [{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
},{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": "Very cold",
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": "Cold",
},{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"displayvalue": "Moderate",
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": "Hot",
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": "Very hot",
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}]
}]
}
});
tempVsSalesChart.render();
});
</script>In the above code, we:
-
Created an instance of
FusionChartsobject in thetempVsSalesChartvariable. Each chart or gauge in your HTML page needs to have a separate variable. The initialization code is wrapped withinFusionCharts.readymethod. This safeguards your chart instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page. -
Next, we created an instance of
scatterchart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart. -
Next, we specified the width and height of chart (in pixels) using
widthandheightproperty of the constructor. -
To specify the data format as JSON, we set the
dataFormatparameter tojson. -
The actual JSON data is embedded as string as value of
dataSourceparameter. -
The temperature ranges are present in the
categoryarray withxwith key with X-axis value andlabelwith key with display value. Theshowverticallineattribute is set at 1, to display vertical lines at the specified values on the X-Axis -
Each series of the data is present within the dataset array, with name of the series as
seriesname. The data itself is present within thedataarray, withxandywith key as value. -
Call the
render()method to draw the chart in chartContainer<div>element.
There! You have now configured a scatter chart to display the temperature vs icecream/beer sales in Harry’s supermarket.
To get a sense of the trend, we have enabled regression line of this dataset on the scatter chart.
The full HTML code needed for this example looks as under:
<html>
<head>
<title>My First Scatter Chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
var tempVsSalesChart = new FusionCharts({
"type": "scatter",
"renderAt": "chartContainer",
"width": "650",
"height": "350",
"dataFormat": "json",
"dataSource":{
"chart": {
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subcaption": "Los Angeles Topanga",
"xaxisname": "Average Day Temperature",
"yaxisname": "Sales (In USD)",
"xaxisminvalue": "23",
"xaxismaxvalue": "95",
"ynumberprefix": "$",
"xnumbersuffix": "° F",
"theme": "fint"
},
"categories": [{
"category": [{
"x": "23",
"label": "23\xB0 F",
"showverticalline": "0"
}, {
"x": "32",
"label": "32\xB0 F",
"showverticalline": "1"
}, {
"x": "50",
"label": "50\xB0 F",
"showverticalline": "1"
}, {
"x": "68",
"label": "68\xB0 F",
"showverticalline": "1"
}, {
"x": "80",
"label": "80\xB0 F",
"showverticalline": "1"
}, {
"x": "95",
"label": "95\xB0 F",
"showverticalline": "1"
}]
}],
"dataset": [{
"seriesname": "Ice Cream",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "1560"
},
{
"x": "24",
"y": "1500"
},
{
"x": "24",
"y": "1680"
},
{
"x": "25",
"y": "1780"
},
{
"x": "25",
"y": "1620"
},
{
"x": "26",
"y": "1810"
},
{
"x": "27",
"y": "2310"
},
{
"x": "29",
"y": "2620"
},
{
"x": "31",
"y": "2500"
},
{
"x": "32",
"y": "2410"
},
{
"x": "35",
"y": "2880"
},
{
"x": "36",
"y": "3910"
},
{
"x": "34",
"y": "3960"
},
{
"x": "38",
"y": "4080"
},
{
"x": "40",
"y": "4190"
},
{
"x": "41",
"y": "4170"
},
{
"x": "42",
"y": "4280"
},
{
"x": "54",
"y": "5180"
},
{
"x": "53",
"y": "5770"
},
{
"x": "55",
"y": "5900"
},
{
"x": "56",
"y": "5940"
},
{
"x": "58",
"y": "6090"
},
{
"x": "61",
"y": "6086"
},
{
"x": "67",
"y": "6100"
},
{
"x": "68",
"y": "6200"
},
{
"x": "70",
"y": "6360"
},
{
"x": "75",
"y": "6450"
},
{
"x": "79",
"y": "6650"
},
{
"x": "80",
"y": "6710"
},
{
"x": "79",
"y": "6975"
},
{
"x": "82",
"y": "7000"
},
{
"x": "85",
"y": "7150"
},
{
"x": "86",
"y": "7160"
},
{
"x": "86",
"y": "7200"
},
{
"x": "88",
"y": "7230"
},
{
"x": "87",
"y": "7210"
},
{
"x": "86",
"y": "7480"
},
{
"x": "89",
"y": "7540"
},
{
"x": "89",
"y": "7400"
},
{
"x": "90",
"y": "7500"
},
{
"x": "92",
"y": "7640"
}]
}, {
"seriesname": "Beer",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "3160"
},
{
"x": "24",
"y": "3000"
},
{
"x": "24",
"y": "3080"
},
{
"x": "25",
"y": "3680"
},
{
"x": "25",
"y": "3320"
},
{
"x": "26",
"y": "3810"
},
{
"x": "27",
"y": "5310"
},
{
"x": "29",
"y": "3620"
},
{
"x": "31",
"y": "4100"
},
{
"x": "32",
"y": "3910"
},
{
"x": "35",
"y": "4280"
},
{
"x": "36",
"y": "4210"
},
{
"x": "34",
"y": "4160"
},
{
"x": "38",
"y": "4480"
},
{
"x": "40",
"y": "4890"
},
{
"x": "41",
"y": "4770"
},
{
"x": "42",
"y": "4880"
},
{
"x": "54",
"y": "4980"
},
{
"x": "53",
"y": "4770"
},
{
"x": "55",
"y": "4900"
},
{
"x": "56",
"y": "4940"
},
{
"x": "58",
"y": "4990"
},
{
"x": "61",
"y": "5086"
},
{
"x": "67",
"y": "5100"
},
{
"x": "68",
"y": "4700"
},
{
"x": "70",
"y": "5360"
},
{
"x": "75",
"y": "5150"
},
{
"x": "79",
"y": "5450"
},
{
"x": "80",
"y": "5010"
},
{
"x": "79",
"y": "4975"
},
{
"x": "82",
"y": "5400"
},
{
"x": "85",
"y": "5150"
},
{
"x": "86",
"y": "5460"
},
{
"x": "86",
"y": "5000"
},
{
"x": "88",
"y": "5200"
},
{
"x": "87",
"y": "5410"
},
{
"x": "86",
"y": "5480"
},
{
"x": "89",
"y": "5440"
},
{
"x": "89",
"y": "5300"
},
{
"x": "90",
"y": "5500"
},
{
"x": "92",
"y": "5240"
}
]
}],
"vtrendlines": [{
"line": [{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
},{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": "Very cold",
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": "Cold",
},{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"displayvalue": "Moderate",
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": "Hot",
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": "Very hot",
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}]
}]
}
});
tempVsSalesChart.render();
});
</script>
</head>
<body>
<div id="chartContainer">A scatter chart will load here!</div>
</body>
</html>Bubble Chart
While a scatter chart can plot data with 2 numeric parameters, the bubble chart is used for plotting data with three numeric parameters. The third numeric parameter is indicated by the diameter of the bubble.
Let’s say Harry wants to visualize the sales of all the shoe brands in his store, to see whether the average price of a shoe has a correlation with the units sold. On top of that, he wants to see the total revenue per brand.
This chart, when complete, would appear as under:
A table containing the data used in the chart is given below:
| Brand Name | Average Price | Units Sold | Profit Contribution |
|---|---|---|---|
| Nike | $80 | 15,000 | 24% |
| Adidas | $60 | 18,500 | 26% |
| Puma | $50 | 19,450 | 19% |
| Fila | $65 | 10,500 | 8% |
| Lotto | $43 | 8,750 | 5% |
| Reebok | $32 | 22,000 | 10% |
| Woodland | $44 | 13,000 | 9% |
Let’s Begin
Creating this chart involves the following steps
- Installing FusionCharts Suite XT for your application
- Converting your data to a JSON or XML format. FusionCharts Suite XT accepts both data formats, and can read it as a string, or from a file, local or remote
- Including the FusionCharts Suite XT JavaScript library in your HTML page
- Creating a container
<div>for the chart - Using the new
FusionCharts()constructor to create the map instance, and then calling therender()method
Including FusionCharts Suite in your application
To include the FusionCharts Suite XT JavaScript library in your HTML page, you use the <script> tag as under. Next, we include a theme file to style the chart. The theme is called fint (FusionCharts internal) and it is present in themes folder of your download.
<html>
<head>
<title>My First Bubble Chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js">
</script>
</head>
</html>It informs the browser where to load the FusionCharts Suite XT library from. We recommend using a relative path to the library hosted on the same domain as your web application.
Converting your data to FusionCharts Suite XT JSON/XML format
For this example, our dataset, when converted to FusionCharts Suite XT JSON/XML format, looks as under.
{
"chart": {
"caption": "Sales Analysis of Shoe Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "30000",
"plotFillAlpha": "70",
"plotFillHoverColor": "#6baa01",
"showPlotBorder": "0",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues": "1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "0",
"x": "0"
},
{
"label": "$20",
"x": "20",
"showverticalline": "1"
},
{
"label": "$40",
"x": "40",
"showverticalline": "1"
},
{
"label": "$60",
"x": "60",
"showverticalline": "1"
},
{
"label": "$80",
"x": "80",
"showverticalline": "1"
},
{
"label": "$100",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"color": "#00aee4",
"data": [
{
"x": "80",
"y": "15000",
"z": "24",
"name": "Nike"
},
{
"x": "60",
"y": "18500",
"z": "26",
"name": "Adidas"
},
{
"x": "50",
"y": "19450",
"z": "19",
"name": "Puma"
},
{
"x": "65",
"y": "10500",
"z": "8",
"name": "Fila"
},
{
"x": "43",
"y": "8750",
"z": "5",
"name": "Lotto"
},
{
"x": "32",
"y": "22000",
"z": "10",
"name": "Reebok"
},
{
"x": "44",
"y": "13000",
"z": "9",
"name": "Woodland"
}
]
}
],
"trendlines": [
{
"line": [
{
"startValue": "20000",
"endValue": "30000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
},
{
"startValue": "10000",
"endValue": "20000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}
]
}
]
}Creating a container for your chart in the web page
Next, you will need to create a container for your chart in the form of a <div> element, as under:
Creating an instance of the chart
The JavaScript code needed to create an instance of this chart would look like:
<script>
FusionCharts.ready(function () {
var conversionChart = new FusionCharts({
"type": "bubble",
"renderAt": "chartContainer",
"width": "650",
"height": "350",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Sales Analysis of Shoe Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "30000",
"plotFillAlpha": "70",
"plotFillHoverColor": "#6baa01",
"showPlotBorder": "0",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues":"1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "0",
"x": "0"
}, {
"label": "$20",
"x": "20",
"showverticalline": "1"
}, {
"label": "$40",
"x": "40",
"showverticalline": "1"
}, {
"label": "$60",
"x": "60",
"showverticalline": "1"
}, {
"label": "$80",
"x": "80",
"showverticalline": "1"
}, {
"label": "$100",
"showverticalline": "1"
}]
}],
"dataset": [{
"color":"#00aee4",
"data": [{
"x": "80",
"y": "15000",
"z": "24",
"name": "Nike"
}, {
"x": "60",
"y": "18500",
"z": "26",
"name": "Adidas"
}, {
"x": "50",
"y": "19450",
"z": "19",
"name": "Puma"
}, {
"x": "65",
"y": "10500",
"z": "8",
"name": "Fila"
}, {
"x": "43",
"y": "8750",
"z": "5",
"name": "Lotto"
}, {
"x": "32",
"y": "22000",
"z": "10",
"name": "Reebok"
}, {
"x": "44",
"y": "13000",
"z": "9",
"name": "Woodland"
}]
}],
"trendlines": [{
"line": [{
"startValue": "20000",
"endValue": "30000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
}, {
"startValue": "10000",
"endValue": "20000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}]
}]
}
});
conversionChart.render();
});
</script>In the above code, we:
-
Created an instance of FusionCharts object in the
conversionChartvariable. Each chart or gauge in your HTML page needs to have a separate variable. The initialization code is wrapped withinFusionCharts.readymethod. This safeguards your chart instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page. -
Next, we created an instance of
bubblechart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart. -
Then, we specified the width and height of the chart (in pixels) using the
widthandheightproperty of the constructor. -
To specify the data format as JSON, we set the
dataFormatparameter tojson. -
The actual JSON data is embedded as string as value of
dataSourceparameter. -
The price of the shoes are present in the
categoryarray withxwith key with shoe price andlabelwith key with display value. Theshowverticallineattribute is set at 1, to display vertical lines at the specified values on the X-Axis. -
Each series of the data is present within the
datasetarray, with name of the series asseriesname. The data itself is present within the data array, withx,yandzwith key as value and brand name with key asname. Here thezvalue is the radius of the bubbles. -
Call the
render()method to draw the chart in chartContainer<div>element.
And this gets you the bubble chart that we just saw!
The full HTML code needed for this example looks as under:
<html>
<head>
<title>My First Bubble Chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
var conversionChart = new FusionCharts({
"type": "bubble",
"renderAt": "chartContainer",
"width": "650",
"height": "350",
"dataFormat": "json",
"dataSource":{
"chart": {
"caption": "Sales Analysis of Shoe Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "30000",
"plotFillAlpha": "70",
"plotFillHoverColor": "#6baa01",
"showPlotBorder": "0",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues":"1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "0",
"x": "0"
}, {
"label": "$20",
"x": "20",
"showverticalline": "1"
}, {
"label": "$40",
"x": "40",
"showverticalline": "1"
}, {
"label": "$60",
"x": "60",
"showverticalline": "1"
}, {
"label": "$80",
"x": "80",
"showverticalline": "1"
}, {
"label": "$100",
"showverticalline": "1"
}]
}],
"dataset": [{
"color":"#00aee4",
"data": [{
"x": "80",
"y": "15000",
"z": "24",
"name": "Nike"
}, {
"x": "60",
"y": "18500",
"z": "26",
"name": "Adidas"
}, {
"x": "50",
"y": "19450",
"z": "19",
"name": "Puma"
}, {
"x": "65",
"y": "10500",
"z": "8",
"name": "Fila"
}, {
"x": "43",
"y": "8750",
"z": "5",
"name": "Lotto"
}, {
"x": "32",
"y": "22000",
"z": "10",
"name": "Reebok"
}, {
"x": "44",
"y": "13000",
"z": "9",
"name": "Woodland"
}]
}],
"trendlines": [{
"line": [{
"startValue": "20000",
"endValue": "30000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
}, {
"startValue": "10000",
"endValue": "20000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}]
}]
}
});
conversionChart.render();
});
</script>
</head>
</html>
<body>
<div id="chartContainer">A bubble chart will load here!</div>
</body>Was there a problem rendering the chart?
In case something went wrong and you are unable to see the chart, check for the following:
-
If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.
-
If the chart does not show up at all, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if
fusioncharts.jswas loaded. Check if the path tofusioncharts.jsfile is correct, and whether the file exists in that location. -
If you get a Loading Data or Error in loading data message, check whether your JSON data structure is correct, and there are no conflicts related to quotation marks in your code.
Click here for more information on Troubleshooting.