Loading
Configuring Bubble and XY Charts
FusionCharts Suite XT allows you to configure the functional and cosmetic properties of bubble and xy charts.
In this section, you will be shown how you can:
-
Display labels on bubbles
-
Segment the x-axis into categorical zones
-
Configure the x-axis labels
-
Configure the x-axis vertical divisional lines
-
Connect scatter plots in a scatter chart
Displaying Labels on Bubbles
By default, data labels are not rendered on the bubbles in a bubble chart.
A bubble chart with data labels rendered on bubbles looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"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%"
},
"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"
}
]
}
]
}<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": {
"theme": "fint",
"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",
//Showing the labels on Bubbles
"showValues": "1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to show/hide labels on bubbles:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether labels will be displayed on bubbles. Setting this attribute to |
Segmenting the X-axis of Bubble/Scatter Charts into Categorical Zones
The x-axis of the bubble/scatter chart can be segmented into categorical zones using vertical trend lines.
A bubble chart with the x-axis segmented looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"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",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"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"
}
]
}
],
"vtrendlines": [
{
"line": [
{
"startValue": "0",
"endValue": "20",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "25",
"displayValue": " "
},
{
"startValue": "20",
"endValue": "40",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "15",
"displayValue": " "
},
{
"startValue": "40",
"endValue": "60",
"isTrendZone": "1",
"displayValue": " "
},
{
"startValue": "60",
"endValue": "80",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "25",
"displayValue": " "
},
{
"startValue": "80",
"endValue": "100",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "15",
"displayValue": " "
}
]
}
]
}<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": {
"theme": "fint",
"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",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
//x-axis segmented into categorical zone (Average Price)
//ranging 0-20, 20-40, etc.
"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"
}]
}],
"vtrendlines": [{
"line": [{
"startValue": "0",
"endValue": "20",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "25",
"displayValue": " "
}, {
"startValue": "20",
"endValue": "40",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "15",
"displayValue": " "
}, {
"startValue": "40",
"endValue": "60",
"isTrendZone": "1",
"displayValue": " "
}, {
"startValue": "60",
"endValue": "80",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "25",
"displayValue": " "
}, {
"startValue": "80",
"endValue": "100",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "15",
"displayValue": " "
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Configuring the X-axis Labels of Bubble/Scatter Charts
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.
Given below is a brief description of the attribute used to configure the x-axis labels:
| Attribute Name | Description |
|---|---|
|
It is used to specify the mode in which the x-axis labels will be rendered. This attribute takes three values: |
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:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"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",
"xNumberPrefix": "$",
"showValues": "1",
"xAxisLabelMode": "AUTO",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"categories": [
{
"category": [
{
"label": "0",
"x": "0"
},
{
"label": "$10",
"x": "10",
"showverticalline": "1"
},
{
"label": "$20",
"x": "20",
"showverticalline": "1"
},
{
"label": "$30",
"x": "30",
"showverticalline": "1"
},
{
"label": "$40",
"x": "40",
"showverticalline": "1"
},
{
"label": "$50",
"x": "50",
"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"
}
]
}
]
}<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": {
"theme": "fint",
"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",
"xNumberPrefix": "$",
"showValues": "1",
//Setting x-axis label mode to "AUTO"
//which ignores the properties of categories element defined
"xAxisLabelMode": "AUTO",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"categories": [{
"category": [{
"label": "0",
"x": "0"
}, {
"label": "$10",
"x": "10",
"showverticalline": "1"
}, {
"label": "$20",
"x": "20",
"showverticalline": "1"
}, {
"label": "$30",
"x": "30",
"showverticalline": "1"
}, {
"label": "$40",
"x": "40",
"showverticalline": "1"
}, {
"label": "$50",
"x": "50",
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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 displays labels explicitly defined through 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:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"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",
"xAxisLabelMode": "CATEGORIES",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"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"
}
]
}
]
}<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": {
"theme": "fint",
"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",
//Setting x-axis label mode to "CATEGORIES"
//which shows the properties of categories element defined
"xAxisLabelMode": "CATEGORIES",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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:
FusionCharts will load here..
{
"chart": {
"theme": "fint",
"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",
"xNumberPrefix": "$",
"showValues": "1",
"xAxisLabelMode": "MIXED",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"categories": [
{
"category": [
{
"label": "0",
"x": "0"
},
{
"label": "$10",
"x": "10",
"showverticalline": "1"
},
{
"label": "$30",
"x": "30",
"showverticalline": "1"
},
{
"label": "$50",
"x": "50",
"showverticalline": "1"
},
{
"label": "$70",
"x": "70",
"showverticalline": "1"
},
{
"label": "$90",
"x": "90",
"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"
}
]
}
]
}<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": {
"theme": "fint",
"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",
"xNumberPrefix": "$",
"showValues": "1",
//Setting x-axis label mode to "MIXED"
//which shows both automatically calculated x-axis labels
//and the explicitly defined x-axis labels simultaneously
"xAxisLabelMode": "MIXED",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"categories": [{
"category": [{
"label": "0",
"x": "0"
}, {
"label": "$10",
"x": "10",
"showverticalline": "1"
}, {
"label": "$30",
"x": "30",
"showverticalline": "1"
}, {
"label": "$50",
"x": "50",
"showverticalline": "1"
}, {
"label": "$70",
"x": "70",
"showverticalline": "1"
}, {
"label": "$90",
"x": "90",
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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 the auto mode. In case, categories are defined (and the xAxisLabelMode attribute is not defined), the chart switches to the categories mode. You can also force any of the above three modes by explicitly defining the mode using the xAxisLabelMode attribute.
Configuring the X-axis Vertical Divisional Lines
Given below is a brief description of the attributes used to configure the vertical divisional lines related to the x-axis:
| Attribute Name | Description |
|---|---|
|
It is used to allow you 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. Setting this attribute to |
|
It is used to specify whether the divisional lines values for the x-axis will be shown. |
|
It is used to specify the number of vertical axis divisional lines to be rendered on the chart. |
|
By default, all divisional lines show their values. However, you can opt to skip every x(th) divisional line value using this attribute. |
|
It is used to specify the hex code for the color that will be used to render the vertical divisional lines. |
|
It is used to specify the thickness of the vertical divisional lines. This attribute takes values between 1 (thinnest) and 5 (thickest). |
|
It is used to specify the transparency for the vertical divisional lines. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 20. |
|
It is used to specify whether the vertical div lines will be rendered as dashed lines. Setting this attribute to |
|
It is used to specify the length of each dash, if the vertical divisional lines are to be rendered as dashed lines. |
|
It is used to specify the gap between each dash, if the vertical divisional lines are to be rendered as dashed lines. |
|
It is used to specify whether alternate-colored vertical grid bands will be shown. |
|
It is used to specify the hex code for the color that will be used to render the alternate vertical grid bands. |
|
It is used to specify the transparency for the alternate vertical grid bands. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 20. |
Connecting Scatter Plots by a Line in XY (Scatter) Charts
A scatter chart with all the data points connected by a line looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subcaption": "Los Angeles Topanga",
"xaxisname": "Average Day Temperature",
"yaxisname": "Sales (In USD)",
"xaxisminvalue": "23",
"xaxismaxvalue": "95",
"ynumberprefix": "$",
"xnumbersuffix": "° F",
"theme": "fint"
},
"categories": [
{
"category": [
{
"x": "23",
"label": "23° F",
"showverticalline": "0"
},
{
"x": "32",
"label": "32° F",
"showverticalline": "1"
},
{
"x": "50",
"label": "50° F",
"showverticalline": "1"
},
{
"x": "68",
"label": "68° F",
"showverticalline": "1"
},
{
"x": "80",
"label": "80° F",
"showverticalline": "1"
},
{
"x": "95",
"label": "95° F",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"seriesname": "Ice Cream",
"drawLine": "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",
"drawLine": "1",
"data": [
{
"x": "23",
"y": "3160"
},
{
"x": "24",
"y": "3000"
},
{
"x": "24",
"y": "3080"
},
{
"x": "25",
"y": "3680"
},
{
"x": "25",
"y": "3320"
},
{
"x": "26",
"y": "3810"
},
{
"x": "27",
"y": "5310"
},
{
"x": "29",
"y": "3620"
},
{
"x": "31",
"y": "4100"
},
{
"x": "32",
"y": "3910"
},
{
"x": "35",
"y": "4280"
},
{
"x": "36",
"y": "4210"
},
{
"x": "34",
"y": "4160"
},
{
"x": "38",
"y": "4480"
},
{
"x": "40",
"y": "4890"
},
{
"x": "41",
"y": "4770"
},
{
"x": "42",
"y": "4880"
},
{
"x": "54",
"y": "4980"
},
{
"x": "53",
"y": "4770"
},
{
"x": "55",
"y": "4900"
},
{
"x": "56",
"y": "4940"
},
{
"x": "58",
"y": "4990"
},
{
"x": "61",
"y": "5086"
},
{
"x": "67",
"y": "5100"
},
{
"x": "68",
"y": "4700"
},
{
"x": "70",
"y": "5360"
},
{
"x": "75",
"y": "5150"
},
{
"x": "79",
"y": "5450"
},
{
"x": "80",
"y": "5010"
},
{
"x": "79",
"y": "4975"
},
{
"x": "82",
"y": "5400"
},
{
"x": "85",
"y": "5150"
},
{
"x": "86",
"y": "5460"
},
{
"x": "86",
"y": "5000"
},
{
"x": "88",
"y": "5200"
},
{
"x": "87",
"y": "5410"
},
{
"x": "86",
"y": "5480"
},
{
"x": "89",
"y": "5440"
},
{
"x": "89",
"y": "5300"
},
{
"x": "90",
"y": "5500"
},
{
"x": "92",
"y": "5240"
}
]
}
],
"vtrendlines": [
{
"line": [
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
},
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": "Cold"
},
{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"displayvalue": "Moderate"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": "Hot"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": "Very hot"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}
]
}
]
}<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: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subcaption": "Los Angeles Topanga",
"xaxisname": "Average Day Temperature",
"yaxisname": "Sales (In USD)",
"xaxisminvalue": "23",
"xaxismaxvalue": "95",
"ynumberprefix": "$",
"xnumbersuffix": "° F",
"theme": "fint"
},
"categories": [{
"category": [{
"x": "23",
"label": "23\xB0 F",
"showverticalline": "0"
}, {
"x": "32",
"label": "32\xB0 F",
"showverticalline": "1"
}, {
"x": "50",
"label": "50\xB0 F",
"showverticalline": "1"
}, {
"x": "68",
"label": "68\xB0 F",
"showverticalline": "1"
}, {
"x": "80",
"label": "80\xB0 F",
"showverticalline": "1"
}, {
"x": "95",
"label": "95\xB0 F",
"showverticalline": "1"
}]
}],
"dataset": [{
"seriesname": "Ice Cream",
"drawLine": "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",
"drawLine": "1",
"data": [{
"x": "23",
"y": "3160"
}, {
"x": "24",
"y": "3000"
}, {
"x": "24",
"y": "3080"
}, {
"x": "25",
"y": "3680"
}, {
"x": "25",
"y": "3320"
}, {
"x": "26",
"y": "3810"
}, {
"x": "27",
"y": "5310"
}, {
"x": "29",
"y": "3620"
}, {
"x": "31",
"y": "4100"
}, {
"x": "32",
"y": "3910"
}, {
"x": "35",
"y": "4280"
}, {
"x": "36",
"y": "4210"
}, {
"x": "34",
"y": "4160"
}, {
"x": "38",
"y": "4480"
}, {
"x": "40",
"y": "4890"
}, {
"x": "41",
"y": "4770"
}, {
"x": "42",
"y": "4880"
}, {
"x": "54",
"y": "4980"
}, {
"x": "53",
"y": "4770"
}, {
"x": "55",
"y": "4900"
}, {
"x": "56",
"y": "4940"
}, {
"x": "58",
"y": "4990"
}, {
"x": "61",
"y": "5086"
}, {
"x": "67",
"y": "5100"
}, {
"x": "68",
"y": "4700"
}, {
"x": "70",
"y": "5360"
}, {
"x": "75",
"y": "5150"
}, {
"x": "79",
"y": "5450"
}, {
"x": "80",
"y": "5010"
}, {
"x": "79",
"y": "4975"
}, {
"x": "82",
"y": "5400"
}, {
"x": "85",
"y": "5150"
}, {
"x": "86",
"y": "5460"
}, {
"x": "86",
"y": "5000"
}, {
"x": "88",
"y": "5200"
}, {
"x": "87",
"y": "5410"
}, {
"x": "86",
"y": "5480"
}, {
"x": "89",
"y": "5440"
}, {
"x": "89",
"y": "5300"
}, {
"x": "90",
"y": "5500"
}, {
"x": "92",
"y": "5240"
}]
}],
"vtrendlines": [{
"line": [{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
}, {
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": "Very cold",
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": "Cold",
}, {
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"displayvalue": "Moderate",
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": "Hot",
}, {
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": "Very hot",
}, {
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to connect data points by a line:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the data points on the scatter chart will be connected by a line. Setting this attribute to |