Bubble and Scatter Charts
These chart types belong to FusionCharts XT.
Bubble and Scatter charts are used for plotting data that can be defined in terms of multiple numeric parameters. In these charts, the x and y axes are numeric. So, the position of a data point is an indicator of two distinct numeric values.
Scatter Chart#
Scatter charts are used for plotting data that is defined in terms of two numeric parameters. Scatter charts are multi-series charts, but their data format is slightly different from that of conventional multi-series charts.
Note: Click on the bubbles below to know more about different chart components.
- 1 Caption
- 2 Subcaption
- 3 Canvas Area
- 4 X-Axis
- 5 X-Axis Title
- 6 X-Axis Labels
- 7 Y-Axis
- 8 Y-Axis Title
- 9 Data Plot
- 10 Legend
- 11 Tooltip
The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.
The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for subcaption, as well as configure its font properties.
Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.
X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it here.
X-Axis refers to title of the x-axis. Learn more about it here.
X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it here.
Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them here.
Y-Axis refers to the title of the y-axis. Learn more about it here.
Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.
- You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage here.
A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.
- You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it here.
- You can customize legend position on the chart either to right or bottom of the chart. Learn more about it here.
- You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it here.
A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered. here.
Let's create a scatter chart plotted for two numeric values - the average day temperature (plotted on the x-axis and the sales (in USD) of beer and ice-cream (plotted on the y-axis); the chart shows how the temperature affects the sales revenue of beer and ice-cream.
To create a scatter chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"
format.Specify the chart type using the
type
attribute. To render a scatter chart, setscatter
.Set the container object using
renderAt
attribute.Specify the dimension of the chart using
width
andheight
attributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormat
attribute.
For a detailed list of attributes, refer to the chart attributes page of scatter chart.
A scatter chart looks like:
{
"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",
"showYAxisLine": "1",
"theme": "fusion"
},
"categories": [
{
"verticalLineDashed": "1",
"verticalLineDashLen": "1",
"verticalLineDashGap": "1",
"verticalLineThickness": "1",
"verticalLineColor": "#000000",
"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",
"alpha": "0",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Cold"
},
{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Moderate"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Hot"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very hot"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}
]
}
]
}
<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="&deg; F" showyaxisline="1" theme="fusion">
<categories verticallinedashed="1" verticallinedashlen="1" verticallinedashgap="1" verticallinethickness="1" verticallinecolor="#000000">
<category x="23" label="23° F" showverticalline="0" />
<category x="32" label="32° F" showverticalline="1" />
<category x="50" label="50° F" showverticalline="1" />
<category x="68" label="68° F" showverticalline="1" />
<category x="80" label="80° F" showverticalline="1" />
<category x="95" label="95° F" showverticalline="1" />
</categories>
<dataset seriesname="Ice Cream" showregressionline="1">
<set x="23" y="1560" />
<set x="24" y="1500" />
<set x="24" y="1680" />
<set x="25" y="1780" />
<set x="25" y="1620" />
<set x="26" y="1810" />
<set x="27" y="2310" />
<set x="29" y="2620" />
<set x="31" y="2500" />
<set x="32" y="2410" />
<set x="35" y="2880" />
<set x="36" y="3910" />
<set x="34" y="3960" />
<set x="38" y="4080" />
<set x="40" y="4190" />
<set x="41" y="4170" />
<set x="42" y="4280" />
<set x="54" y="5180" />
<set x="53" y="5770" />
<set x="55" y="5900" />
<set x="56" y="5940" />
<set x="58" y="6090" />
<set x="61" y="6086" />
<set x="67" y="6100" />
<set x="68" y="6200" />
<set x="70" y="6360" />
<set x="75" y="6450" />
<set x="79" y="6650" />
<set x="80" y="6710" />
<set x="79" y="6975" />
<set x="82" y="7000" />
<set x="85" y="7150" />
<set x="86" y="7160" />
<set x="86" y="7200" />
<set x="88" y="7230" />
<set x="87" y="7210" />
<set x="86" y="7480" />
<set x="89" y="7540" />
<set x="89" y="7400" />
<set x="90" y="7500" />
<set x="92" y="7640" />
</dataset>
<dataset seriesname="Beer" showregressionline="1">
<set x="23" y="3160" />
<set x="24" y="3000" />
<set x="24" y="3080" />
<set x="25" y="3680" />
<set x="25" y="3320" />
<set x="26" y="3810" />
<set x="27" y="5310" />
<set x="29" y="3620" />
<set x="31" y="4100" />
<set x="32" y="3910" />
<set x="35" y="4280" />
<set x="36" y="4210" />
<set x="34" y="4160" />
<set x="38" y="4480" />
<set x="40" y="4890" />
<set x="41" y="4770" />
<set x="42" y="4880" />
<set x="54" y="4980" />
<set x="53" y="4770" />
<set x="55" y="4900" />
<set x="56" y="4940" />
<set x="58" y="4990" />
<set x="61" y="5086" />
<set x="67" y="5100" />
<set x="68" y="4700" />
<set x="70" y="5360" />
<set x="75" y="5150" />
<set x="79" y="5450" />
<set x="80" y="5010" />
<set x="79" y="4975" />
<set x="82" y="5400" />
<set x="85" y="5150" />
<set x="86" y="5460" />
<set x="86" y="5000" />
<set x="88" y="5200" />
<set x="87" y="5410" />
<set x="86" y="5480" />
<set x="89" y="5440" />
<set x="89" y="5300" />
<set x="90" y="5500" />
<set x="92" y="5240" />
</dataset>
<vtrendlines>
<line startvalue="23" endvalue="32" istrendzone="1" displayvalue=" " color="#adebff" alpha="25" />
<line startvalue="23" endvalue="32" istrendzone="1" alpha="0" displayvalue="Very cold" />
<line startvalue="32" endvalue="50" istrendzone="1" displayvalue=" " color="#adebff" alpha="15" />
<line startvalue="32" endvalue="50" istrendzone="1" alpha="0" displayvalue="Cold" />
<line startvalue="50" endvalue="68" istrendzone="1" alpha="0" displayvalue="Moderate" />
<line startvalue="68" endvalue="80" istrendzone="1" alpha="0" displayvalue="Hot" />
<line startvalue="68" endvalue="80" istrendzone="1" displayvalue=" " color="#f2a485" alpha="15" />
<line startvalue="80" endvalue="95" istrendzone="1" alpha="0" displayvalue="Very hot" />
<line startvalue="80" endvalue="95" istrendzone="1" displayvalue=" " color="#f2a485" alpha="25" />
</vtrendlines>
</chart>
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'scatter',
renderAt: 'chart-container',
width: '550',
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",
"showYAxisLine": "1",
"theme": "fusion"
},
"categories": [{
"verticalLineDashed": "1",
"verticalLineDashLen": "1",
"verticalLineDashGap": "1",
"verticalLineThickness": "1",
"verticalLineColor": "#000000",
"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",
"alpha": "0",
"displayvalue": "Very cold"
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Cold"
}, {
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Moderate"
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Hot"
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very hot"
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
Click here to edit the scatter chart.
Bubble Charts#
Bubble charts are used for plotting data that is defined in terms of three numeric parameters. The third numeric parameter is indicated by the diameter of the bubble. The JSON/XML format of a bubble chart is slightly different from that of a scatter chart, and this is because the bubble chart plots an additional numeric parameter.
Note: Click on the bubbles below to know more about different chart components.
- 1 Caption
- 2 Subcaption
- 3 Canvas Area
- 4 X-Axis
- 5 X-Axis Title
- 6 X-Axis Labels
- 7 Y-Axis
- 8 Y-Axis Title
- 9 Data Plot
- 10 Tooltip
The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics.
The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for subcaption, as well as configure its font properties.
Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.
X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it here.
It refers to title of the x-axis. Learn more about it here.
X-Axis labels are the names of the data points that are displayed on the X-axis of a chart. Learn more about it here.
Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them here.
It refers to the title of the Y-axis. Learn more about it here.
Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart, and so on.
- You can customize the way your data plot looks using colors, gradients and hover effects using available attributes. Learn more about their usage here.
A tooltip is displayed when the mouse cursor hovers over a particular data point. It displays valuable information about the data plot hovered. here.
So let's create a bubble chart showing sales analysis of shoes of different brands for Harry's SuperMart for last month. Specify the chart type using the type
attribute. To render a bubble chart, set bubble
.
For a detailed list of attributes, refer to the chart attributes page of bubble chart.
A bubble chart for the above code looks like:
{
"chart": {
"caption": "Sales Analysis of Shoe Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "30000",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues": "1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"drawQuadrant": "1",
"quadrantLineAlpha": "80",
"quadrantLineThickness": "3",
"quadrantXVal": "50",
"quadrantYVal": "15000",
"quadrantLabelTL": "Low Price / High Sale",
"quadrantLabelTR": "High Price / High Sale",
"quadrantLabelBL": "Low Price / Low Sale",
"quadrantLabelBR": "High Price / Low Sale",
"yAxisLineThickness": "1",
"yAxisLineColor": "#999999",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"theme": "fusion"
},
"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",
"x": "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"
}
]
}
],
"vTrendlines": [
{
"line": [
{
"startValue": "44",
"isTrendZone": "0",
"color": "#0066cc",
"thickness": "1",
"dashed": "1",
"displayValue": "Gross Avg."
}
]
}
]
}
<chart caption="Sales Analysis of Shoe Brands" subcaption="Last Quarter" xaxisminvalue="0" xaxismaxvalue="100" yaxisminvalue="0" yaxismaxvalue="30000" xaxisname="Average Price" yaxisname="Units Sold" numdivlines="2" showvalues="1" showtrendlinelabels="0" plottooltext="$name : Profit Contribution - $zvalue%" drawquadrant="1" quadrantlinealpha="80" quadrantlinethickness="3" quadrantxval="50" quadrantyval="15000" quadrantlabeltl="Low Price / High Sale" quadrantlabeltr="High Price / High Sale" quadrantlabelbl="Low Price / Low Sale" quadrantlabelbr="High Price / Low Sale" yaxislinethickness="1" yaxislinecolor="#999999" xaxislinethickness="1" xaxislinecolor="#999999" theme="fusion">
<categories>
<category label="$0" x="0" />
<category label="$20" x="20" showverticalline="1" />
<category label="$40" x="40" showverticalline="1" />
<category label="$60" x="60" showverticalline="1" />
<category label="$80" x="80" showverticalline="1" />
<category label="$100" x="100" showverticalline="1" />
</categories>
<dataset color="#00aee4">
<set x="80" y="15000" z="24" name="Nike" />
<set x="60" y="18500" z="26" name="Adidas" />
<set x="50" y="19450" z="19" name="Puma" />
<set x="65" y="10500" z="8" name="Fila" />
<set x="43" y="8750" z="5" name="Lotto" />
<set x="32" y="22000" z="10" name="Reebok" />
<set x="44" y="13000" z="9" name="Woodland" />
</dataset>
<trendlines>
<line startvalue="20000" endvalue="30000" istrendzone="1" color="#aaaaaa" alpha="14" />
<line startvalue="10000" endvalue="20000" istrendzone="1" color="#aaaaaa" alpha="7" />
</trendlines>
<vtrendlines>
<line startvalue="44" istrendzone="0" color="#0066cc" thickness="1" dashed="1" displayvalue="Gross Avg." />
</vtrendlines>
</chart>
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'bubble',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales Analysis of Shoe Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "30000",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues":"1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"drawQuadrant" : "1",
"quadrantLineAlpha" : "80",
"quadrantLineThickness" : "3",
"quadrantXVal" : "50",
"quadrantYVal": "15000",
//Quadrant Labels
"quadrantLabelTL": "Low Price / High Sale",
"quadrantLabelTR": "High Price / High Sale",
"quadrantLabelBL": "Low Price / Low Sale",
"quadrantLabelBR": "High Price / Low Sale",
//Cosmetics
"yAxisLineThickness" : "1",
"yAxisLineColor" : "#999999",
"xAxisLineThickness" : "1",
"xAxisLineColor" : "#999999",
"theme" : "fusion"
},
"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",
"x": "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"
}]
}],
"vTrendlines": [{
"line": [{
"startValue": "44",
"isTrendZone": "0",
"color": "#0066cc",
"thickness": "1",
"dashed": "1",
"displayValue": "Gross Avg."
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
Click here to edit the bubble chart.
In case of the bubble and scatter charts, categories are optional because the x-axis is numeric. Categories can, however, be used to define customized x-axis labels for any location on the x-scale.
A category can define numeric or non-numeric labels for the x-axis. Unlike other multi-series charts where each dataset contains the same number of objects present in the data array as the number of categories, scatter and bubble charts can have a varying number of objects present in the data array elements under each dataset array.
In case categories are not defined, the x-axis displays an automatically-calculated numeric scale with vertical divisional lines and values of the divisional lines as x-axis labels.
However, you can also explicitly define categories of your choice and show only those categories as x-axis labels. Moreover, you can also combine the categories and automatically-generated x-axis labels using a mixed mode. All of this will be explained in this section.
Now, let's customize the appearance and properties of the charts.
Display Value Labels on Bubbles#
By default, data labels are not rendered on the bubbles in a bubble chart. To show individual labels for the bubbles in the chart, set the showValues
attribute to 1
.
Refer to the code given below:
{
"chart": {
"showValues": "1"
}
}
A bubble chart with data labels rendered on bubbles looks like this:
Click here to edit the above chart.
Segment the x-axis into Categorical Zones#
The x-axis of the bubble/scatter chart can be segmented into categorical zones using vertical trend lines. To set the categorical zones follow the steps given below:
Set the
isTrendZone
attribute to display the trendzone instead of the line.Set the
startValue
attribute to specify the starting value of the trendzone.Set the
endValue
attribute to specify the ending value of the trendzone.Set the
color
attribute inline
object to specify the color of the trendzone.Set the
alpha
attribute inline
object to specify the transparency of the trendzone.
Refer to the code below:
{
"chart": {
...
},
"data": {
...
},
"vtrendlines": [{
"line": [{
"startValue": "0",
"endValue": "20",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "25"
},
{
"startValue": "20",
"endValue": "40",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "15"
},
{
"startValue": "40",
"endValue": "60",
"isTrendZone": "1"
},
{
"startValue": "60",
"endValue": "80",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "25"
},
{
"startValue": "80",
"endValue": "100",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "15"
}
]
}]
}
A bubble chart with the x-axis segmented looks like this:
Click here to edit the above chart.
Configure X-axis Labels#
You can configure the display mode of the x-axis labels for bubble and scatter charts. You can either choose to make the chart automatically generate the x-axis labels along with vertical divisional lines or you can explicitly define each x-axis label. Additionally, you can also opt to mix these two modes.
To configure the x-axis labels set the xAxisLabelMode
attribute to specify the mode to render the x-axis labels. This attribute takes three values:
Auto (default)
Categories
Mixed
Auto Mode#
In the auto mode, the chart automatically calculates and displays the x-axis labels. In this mode, the chart ignores the categories
object array and allows the x-axis to inherit the properties similar to that of the vertical y-Axis.
A bubble chart with the x-axis labels rendered in the auto mode looks like this:
Click here to edit the above chart.
In the above chart, you can see that the x-axis labels are automatically calculated and displayed. These x-axis labels are based on x-axis values which in turn are generated using the x
values of the chart data. Additionally, along with each label, a vertical divisional line is also rendered.
Categories Mode#
In this mode, the x-axis display labels explicitly defined by the objects in the category
array within the categories
object array.
A bubble chart with the x-axis labels rendered in the categories mode looks like this:
Click here to edit the above chart.
In the above chart, you can see that the labels explicitly defined in the category
object array within the categories
object array are displayed. The automatically calculated labels are not displayed.
To render the x-axis labels in the categories, set the value of the xAxisLabelMode
attribute to CATEGORIES.
Mixed Mode#
This mode is a combination of the auto mode and the category mode. It allows the x-axis to display the automatically calculated x-axis labels as well as the explicitly defined x-axis labels simultaneously.
A bubble chart with the x-axis labels rendered in the mixed mode looks like this:
Click here to edit the above chart.
In the above chart, you can see that the x-axis displays the automatically calculated labels as well as the explicitly defined labels.
To render the x-axis labels in the categories, set the value of the xAxisLabelMode
attribute to MIXED
.
By default, when
xAxisLabelMode
attribute is not defined, and when categories are not explicitly defined in the data, the chart displays x-axis labels in theauto
mode.
In case, categories are defined (and the
xAxisLabelMode
attribute is not defined), the chart switches to thecategories
mode. You can also force any of the above three modes by explicitly defining the mode using thexAxisLabelMode
attribute.
Configure the x-axis Vertical Divisional Lines#
X-axis vertical divisional lines are vertical lines running through the canvas in the chart. These lines are important in case of bubble charts as they divide the canvas into different sections. You can configure these lines as per your requirement.
Configure the vertical divisional lines, by following the points below:
Set the
adjustDiv
attribute to explicitly set the lower and upper limit values and the number of divisional lines for this x-axis. By default, this is done automatically. Set this attribute to0
to disable the automatic adjustment. To enable it, set this attribute to1
.To show the divisional lines' values along the x-axis, set the value of
showXAxisValues
to1
.Set the
numVDivLines
attributes to specify the number of vertical axis divisional lines to be rendered on the chart.By default, all divisional lines show their values. However, opt to skip every x(th) divisional line values using
xAxisValuesStep
attribute.
{
"chart": {
"adjustVDiv": "1",
"showXAxisValues": "1",
"numVDivlines": "5",
"xAxisValuesStep": "1"
}
}
Set the
vDivlineColor
attribute to specify the hex color code for the vertical divisional lines.Set the
vDivlineThickness
attribute to specify the thickness of the vertical divisional lines. This attribute takes values between1
(thinnest) and5
(thickest).Set the
vDivlineAlpha
attribute to specify the transparency for the vertical divisional lines. This attribute takes values between0
(transparent) and100
(opaque).To render the vertical divisional lines as dashed lines, set the value of
vDivlineIsDashed
attribute to1
. The default value of this attribute is0
, which renders the normal divisional line.Set the
vDivlineDashLen
attribute to specify the length of each dash.Set the
vDivlineDashGap
attribute to specify the gap between each dash.
{
"chart": {
"vDivlineColor": "ff0000",
"vDivlineThickness": "2",
"vDivlineAlpha": "70",
"vDivlineIsDashed": "1",
"vDivlineDashLen": "4",
"vDivlineDashGap": "3"
}
}
Set the
showAlternateVGridColor
attribute to specify the alternate color for the vertical grid bands. The hex color code for the vertical grids is specified inalternateVGridColor
attribute.Set the
alternateVGridAlpha
attribute to specify the transparency for the alternate vertical grid bands. This attribute takes values between0
(transparent) and100
(opaque).
Refer to the code below:
{
"chart": {
"showAlternateVGridColor": "1",
"alternateVGridColor": "0ffff0",
"alternateVGridAlpha": "40"
}
}
The chart will look like as shown below:
Click here to edit the above chart.
Connect Scatter Plots by a Line#
In scatter charts, you can connect the scatter plots by a line. Set the drawLine
attribute to 1
, which will connect the data points using a line. The default value for this attribute is 0
. This attribute belongs to the dataset
object.
Refer to the code given below:
{
"chart": {
"drawLine": "1"
}
}
A scatter chart with all the data points connected by a line looks like this:
Click here to edit the above chart.
Draw Regression Lines#
In scatter and bubble charts, each data point has two distinct numeric values: the x value for the x-axis and the y value for the y-axis.
A regression line, rendered as a straight line, is used to show the trend of y values for the x values or the trend of x values for the y values. A regression line, therefore, can be used to derive a particular trend from the scattered data points in the chart canvas and predict values accordingly. For example, regression lines can be used to find trends and predict future sales, stock prices, currency exchange rates, productivity gains resulting from a training program, and so on.
For scatter and bubble charts, regression lines can be drawn based on the values provided in the charts.
There are several methods to calculate and draw regression lines; scatter charts, using linear regression, use the least-squares deviation method (also known as the least absolute deviation method). This method calculates the best-fitting straight-line for the observed data by minimizing the sum of the squares of the vertical deviation of each data point from the line (if a point lies on the fitted line exactly, then its vertical deviation is 0). As the deviation values are first squared and then summed, there are no cancellations between positive and negative values.
To show the regression lines in the chart, set the showRegressionLine
attribute to 1
. The default value of this attribute is 0
, which hides the line. This attribute belongs to the dataset
object.
Refer to the code given below:
{
"chart": {
...
},
"dataset": [{
"showRegressionLine": "1"
}]
}
A scatter chart with regression lines looks like this:
Click here to edit the above chart.
Modes of Regression#
Regression lines can be drawn in one of the following modes:
Y on X: (Default mode) When y values are predicted, or a trend of y values is calculated, based on the xvalues
X on Y: When x values are predicted, or a trend of x values is calculated, based on the y values
The scatter chart with regression lines shown above uses the Y on X mode.
Here, let's try out the same chart with the regression lines drawn using the X on Y mode. A brief description of the attributes used to set the mode and customize regression lines are:
Setting the
showYonX
attribute to0
will draw the regression lines in X on Y mode. The default value for this attribute is1
, which draws the regression lines in Y on X mode. This attribute belongs to thedataset
object.To set the color in which regression line will be drawn, specify the hex color code to
regressionLineColor
attribute.Set the thickness of the regression line using
regressionLineThickness
attribute.Set the transparency of the regression line using
regressionLineAlpha
attribute.
Refer to the code below:
{
"chart": {
"showYonX": "1",
"regressionLineColor": "ff0000",
"regressionLineThickness": "5",
"regressionLineAlpha": "70"
}
}
The same chart with regression lines drawn using the X on Y mode looks like this:
Click here to edit the above chart.
The formulae used to draw the regression lines for both the modes are given below:
Y on X: The regression equation of Y on X is the equation of the best fitting straight line in the form y=a+bx, where x is the explanatory variable and y is the dependent variable and b=(n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σx² – (Σx)²).
X on Y: The regression equation of X on Y is the equation of the best fitting straight line in the form x=a+by, where y is the explanatory variable and x is the dependent variable and b=(n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σy² – (Σy)²).
Draw Quadrants#
Dividing the canvas of a bubble/scatter chart into quadrants makes the analysis of the chart easier. Set the value of drawQuadrant
attribute to 1
to draw quadrants for the chart. The default value of this attribute is 0
.
Refer to the code given below:
{
"chart": {
"drawQuadrant": "1"
}
}
A bubble chart rendered with quadrants looks like this:
Click here to edit the above chart.
A bubble chart rendered with quadrants can also be drawn at user-defined positions. To specify the position of the vertical and horizontal quadrant lines, set the value to quadrantXVal
and quadrantYVal
attribute respectively. The value of these attribute should be within the range of its corresponding relative axis (and not pixels).
Refer to the code given below:
{
"chart": {
//Drawing quadrants on chart
"drawQuadrant": "1",
//Setting x quadrant value to 54
"quadrantXVal": "54",
//Setting y quadrant value to 12000
"quadrantYVal": "12000"
}
}
A bubble chart rendered with quadrants drawn at user-defined positions looks like this:
Click here to edit the above chart.
Display Quadrant Labels#
In XY charts you can also set the label for all individual quadrants. To add labels the charts, follow the points given below:
Set the
quadrantLabelTL
attribute to specify the label of the top-left quadrant.Set the
quadrantLabelTR
attribute to specify the label of the top-right quadrant.Set the
quadrantLabelBL
attribute to specify the label of the bottom-left quadrant.Set the
quadrantLabelBR
attribute to specify the label of the bottom-right quadrant.
Refer to the code given below:
{
"chart": {
"quadrantLabelTL": "Low Price / High Sale",
"quadrantLabelTR": "High Price / High Sale",
"quadrantLabelBL": "Low Price / Low Sale",
"quadrantLabelBR": "High Price / Low Sale"
}
}
A bubble chart with quadrant labels displayed looks like this:
Click here to edit the above chart.
Customize Quadrant Labels#
The quadrant labels shown in the above chart can be customized according to the use case. Each cosmetic property can be customized by setting the attribute for it. You can customize the font, font color, the transparency and the size of the font. The cosmetics of the label border and the background can also be customized if required.
We'll create a sample using some of the cosmetic properties for the quadrant labels. Refer to the code given below:
{
"chart": {
"quadrantLabelFontItalic": "1",
"quadrantLabelFontBold": "1",
"quadrantLabelTLFontColor": "#123456",
"quadrantLabelTRFontColor": "#ABCDEF",
"quadrantLabelBLFontColor": "#123ABC",
"quadrantLabelBRFontColor": "#DEF456"
}
}
A bubble chart showcasing the above cosmetic attributes for quadrant labels is shown below:
Click here to edit the above chart.
Customize Quadrant Lines#
Customize the quadrant lines in the bubble chart using the list of attributes given below:
Set the
quadrantLineThickness
attribute to specify the thickness of the quadrant lines.Set the value of
quadrantLineAlpha
attribute to specify the transparency of the quadrant lines between0
(transparent) and100
(opaque).Set the
quadrantLineColor
attribute to specify the hex color code for the quadrant lines.To render the quadrant lines as dashed lines, set the
quadrantLineIsDashed
attribute to1
.Set the
quadrantLineDashLen
attribute to specify the length of each dash.Set the
quadrantLineDashGap
attribute to specify the gap between each dash.Set the
quadrantLabelPadding
attribute to specify the space between quadrant labels and the associated quadrant lines.
Refer to the code given below:
{
"chart": {
"quadrantLineThickness": "2",
"quadrantLineAlpha": "30",
"quadrantLineColor": "#ac3d44",
"quadrantLineIsDashed": "1",
"quadrantLineDashLen": "2",
"quadrantLineDashGap": "3",
"quadrantLabelPadding": "5"
}
}
A bubble chart rendered with customized quadrant lines looks like this:
Click here to edit the above chart.