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.
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
typeattribute. To render a scatter chart, setscatter.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
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.
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
isTrendZoneattribute to display the trendzone instead of the line.Set the
startValueattribute to specify the starting value of the trendzone.Set the
endValueattribute to specify the ending value of the trendzone.Set the
colorattribute inlineobject to specify the color of the trendzone.Set the
alphaattribute inlineobject 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
xAxisLabelModeattribute is not defined, and when categories are not explicitly defined in the data, the chart displays x-axis labels in theautomode.
In case, categories are defined (and the
xAxisLabelModeattribute is not defined), the chart switches to thecategoriesmode. You can also force any of the above three modes by explicitly defining the mode using thexAxisLabelModeattribute.
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
adjustDivattribute 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 to0to 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
showXAxisValuesto1.Set the
numVDivLinesattributes 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
xAxisValuesStepattribute.
{
"chart": {
"adjustVDiv": "1",
"showXAxisValues": "1",
"numVDivlines": "5",
"xAxisValuesStep": "1"
}
}Set the
vDivlineColorattribute to specify the hex color code for the vertical divisional lines.Set the
vDivlineThicknessattribute to specify the thickness of the vertical divisional lines. This attribute takes values between1(thinnest) and5(thickest).Set the
vDivlineAlphaattribute 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
vDivlineIsDashedattribute to1. The default value of this attribute is0, which renders the normal divisional line.Set the
vDivlineDashLenattribute to specify the length of each dash.Set the
vDivlineDashGapattribute to specify the gap between each dash.
{
"chart": {
"vDivlineColor": "ff0000",
"vDivlineThickness": "2",
"vDivlineAlpha": "70",
"vDivlineIsDashed": "1",
"vDivlineDashLen": "4",
"vDivlineDashGap": "3"
}
}Set the
showAlternateVGridColorattribute to specify the alternate color for the vertical grid bands. The hex color code for the vertical grids is specified inalternateVGridColorattribute.Set the
alternateVGridAlphaattribute 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
showYonXattribute to0will 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 thedatasetobject.To set the color in which regression line will be drawn, specify the hex color code to
regressionLineColorattribute.Set the thickness of the regression line using
regressionLineThicknessattribute.Set the transparency of the regression line using
regressionLineAlphaattribute.
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
quadrantLabelTLattribute to specify the label of the top-left quadrant.Set the
quadrantLabelTRattribute to specify the label of the top-right quadrant.Set the
quadrantLabelBLattribute to specify the label of the bottom-left quadrant.Set the
quadrantLabelBRattribute 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
quadrantLineThicknessattribute to specify the thickness of the quadrant lines.Set the value of
quadrantLineAlphaattribute to specify the transparency of the quadrant lines between0(transparent) and100(opaque).Set the
quadrantLineColorattribute to specify the hex color code for the quadrant lines.To render the quadrant lines as dashed lines, set the
quadrantLineIsDashedattribute to1.Set the
quadrantLineDashLenattribute to specify the length of each dash.Set the
quadrantLineDashGapattribute to specify the gap between each dash.Set the
quadrantLabelPaddingattribute 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.