Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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 Chart

  • Bubble Chart

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:

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", "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" } ] } ] }
{
    "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": "&deg; 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:

FusionCharts will load here..
{ "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." } ] } ] }
{
    "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:

"<attributeName>": "<value>"

Given below is a brief description of the data structure used to create a bubble chart:

Attribute Name Description

type

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 bubble.

renderAt

It is used to specify the container object where the chart will be rendered.

width

It is used to specify the width of the chart.

height

It is used to specify the height of the chart.

dataFormat

It is used to specify the type of data that will passed to the chart object. This attribute takes two values: json, where the JSON data to render the chart is passed to the dataSource attribute, and jsonurl, where the relative path to a .json file is passed to the dataSource attribute.

dataSource

It specifies the source from where the data will be fetched, depending on the value passed to the dataFormat attribute.

caption

It is used to specify the chart caption. This attribute belongs to the chart object.

subCaption

It is used to specify the chart sub-caption. This attribute belongs to the chart object.

xAxisName

It is used to specify the name for the x-axis.

yAxisName

It is used to specify the name for the y-axis.

xAxisMinValue

It is used to specify the lower limit for the x-axis.

xAxisMaxValue

It is used to specify the upper limit for the x-axis.

yAxisMinValue

It is used to specify the lower limit for the y-axis.

yAxisMaxValue

It is used to specify the upper limit for the y-axis.

plotFillAlpha

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.

plotFillHoverColor

It is used to specify the hex code for the plot fill color when the mouse pointer is hovered over it.

showPlotBorder

It is used to specify whether the plot border will be shown. Setting this attribute to 1 will show the plot border, setting it to 0 (default) will hide it.

numDivlines

It is used to specify the number of horizontal axis divisional lines to be rendered on the chart.

showValues

It is used to specify whether the data values will be shown for their corresponding data plots. Setting this attribute to 1 will show the values, setting it to 0 will hide them.

showTrendlineLabels

It is used to specify whether trendline labels will be shown. Setting this attribute to 0 will hide the trendline labels, setting it to 1 (default) will show them.

plotTooltext

It is used to specify the tool text for data plots.

label

It is used to specify the label for a data item. The label appears on the x-axis. This attribute belongs to the category object, which belongs to the categories object.

x

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 category object, which belongs to the categories object. To specify the x-axis position for a data item, this attribute is used with the data object, which belongs to the dataset object.

y

It is used to specify the y-axis value for a data item. This attribute belongs to the data object, which belongs to the dataset object.

z

It is used to specify the z-axis value for a data item. This attribute belongs to the data object, which belongs to the dataset object.

name

For a bubble chart, it is used to specify the name that will be rendered on the bubble. This attribute belongs to the category object, which belongs to the categories object.

showVerticalLine

It is used to specify whether a vertical line should be shown for a category. Setting this attribute to 1 shows the vertical line, setting it to 0 (default) will hide it.

color

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 dataset object.

theme

It is used to specify the theme for the chart.

Top