Creating Bubble and XY Charts
Bubble and XY 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.
The XY charts available in the FusionCharts Suite XT are:
Scatter Charts
Scatter charts are used for plotting data that is defined in terms of two numeric parameters.
A simple scatter chart looks like this:
{
"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": "fint"
},
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'scatter',
renderAt: 'chart-container',
width: '600',
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": "fint"
},
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The above scatter chart is 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.
Scatter charts are multi-series charts, but their data format is slightly different from that of conventional multi-series charts.
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.
A simple bubble chart looks like this:
{
"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%",
"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",
"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",
"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."
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = 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",
"plotFillAlpha": "70",
"plotFillHoverColor": "#6baa01",
"showPlotBorder": "0",
"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",
"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",
"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."
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The JSON/XML format of a bubble chart is slightly different from that of a scatter chart, this is because the bubble chart plots an additional numeric parameter.
In case of 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 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.
Brief Explanation of the JSON Data Structure
In the JSON data, the attributes and their corresponding values are written in the following key-value pair format:
Given below is a brief description of the data structure used to create a bubble chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the type of chart you want to render. For example, to render a bubble chart, the value for this attribute will be |
|
It is used to specify the container object where the chart will be rendered. |
|
It is used to specify the width of the chart. |
|
It is used to specify the height of the chart. |
|
It is used to specify the type of data that will passed to the chart object. This attribute takes two values: |
|
It specifies the source from where the data will be fetched, depending on the value passed to the |
|
It is used to specify the chart caption. This attribute belongs to the |
|
It is used to specify the chart sub-caption. This attribute belongs to the |
|
It is used to specify the name for the x-axis. |
|
It is used to specify the name for the y-axis. |
|
It is used to specify the lower limit for the x-axis. |
|
It is used to specify the upper limit for the x-axis. |
|
It is used to specify the lower limit for the y-axis. |
|
It is used to specify the upper limit for the y-axis. |
|
It is used to specify the transparency for the plot fill color. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
|
It is used to specify the hex code for the plot fill color when the mouse pointer is hovered over it. |
|
It is used to specify whether the plot border will be shown. Setting this attribute to |
|
It is used to specify the number of horizontal axis divisional lines to be rendered on the chart. |
|
It is used to specify whether the data values will be shown for their corresponding data plots. Setting this attribute to |
|
It is used to specify whether trendline labels will be shown. Setting this attribute to |
|
It is used to specify the tool text for data plots. |
|
It is used to specify the label for a data item. The label appears on the x-axis. This attribute belongs to the |
|
It is used to specify the x-axis position for a category/data item. To specify the x-axis position for a category, this attribute is used with the |
|
It is used to specify the y-axis value for a data item. This attribute belongs to the |
|
It is used to specify the z-axis value for a data item. This attribute belongs to the |
|
For a bubble chart, it is used to specify the name that will be rendered on the bubble. This attribute belongs to the |
|
It is used to specify whether a vertical line should be shown for a category. Setting this attribute to |
|
It is used to specify the hex code of the color that will be used to render the data plots for a dataset. This attribute belongs to the |
|
It is used to specify the theme for the chart. |