FusionCharts Logo
FusionCharts Suite v3.12.0
Get Support
Version History
Demos
Beginner's Guide
Charts / Gauges / Maps Guide
Customizing Charts
API
Integrating With Your Stack
Help

Loading

Customizing Quadrants

FusionCharts Suite XT allows you to customize the quadrants drawn on bubble and XY charts.

In this section, you will be shown how you can:

Drawing Quadrants on Bubble and Scatter Charts

Dividing the canvas of a bubble/scatter chart into quadrants makes analysis of the chart easier.

A bubble chart rendered with quadrants 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", "xAxisName": "Average Price", "yAxisName": "Units Sold", "numDivlines": "2", "showValues": "1", "plotTooltext": "$name : Profit Contribution - $zvalue%", "drawQuadrant": "1", "quadrantLineAlpha": "50", "quadrantLineThickness": "2" }, "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" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Sales Analysis of Shoe Brands",
        "subcaption": "Last Quarter",
        "xAxisMinValue": "0",
        "xAxisMaxValue": "100",
        "yAxisMinValue": "0",
        "yAxisMaxValue": "30000",
        "xAxisName": "Average Price",
        "yAxisName": "Units Sold",
        "numDivlines": "2",
        "showValues": "1",
        "plotTooltext": "$name : Profit Contribution - $zvalue%",
        "drawQuadrant": "1",
        "quadrantLineAlpha": "50",
        "quadrantLineThickness": "2"
    },
    "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",
            "xAxisName": "Average Price",
            "yAxisName": "Units Sold",
            "numDivlines": "2",
            "showValues": "1",
            "plotTooltext": "$name : Profit Contribution - $zvalue%",
            //Drawing quadrants on chart
            "drawQuadrant": "1",
            "quadrantLineAlpha": "50",
            "quadrantLineThickness": "2"
        },
        "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 draw quadrants:

Attribute Name Description

drawQuadrant

It is used to specify whether quadrants will be drawn for the bubble chart. Setting this attribute to 1 will draw quadrants for the chart, setting it to 0 (default) will not draw them.

Drawing Quadrants at User-defined Positions

A bubble chart rendered with quadrants drawn at user-defined positions 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", "xAxisName": "Average Price", "yAxisName": "Units Sold", "numDivlines": "2", "showValues": "1", "showTrendlineLabels": "0", "plotTooltext": "$name : Profit Contribution - $zvalue%", "drawQuadrant": "1", "quadrantXVal": "54", "quadrantYVal": "12000", "quadrantLineAlpha": "50", "quadrantLineThickness": "2" }, "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" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Sales Analysis of Shoe Brands",
        "subcaption": "Last Quarter",
        "xAxisMinValue": "0",
        "xAxisMaxValue": "100",
        "yAxisMinValue": "0",
        "yAxisMaxValue": "30000",
        "xAxisName": "Average Price",
        "yAxisName": "Units Sold",
        "numDivlines": "2",
        "showValues": "1",
        "showTrendlineLabels": "0",
        "plotTooltext": "$name : Profit Contribution - $zvalue%",
        "drawQuadrant": "1",
        "quadrantXVal": "54",
        "quadrantYVal": "12000",
        "quadrantLineAlpha": "50",
        "quadrantLineThickness": "2"
    },
    "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",
            "xAxisName": "Average Price",
            "yAxisName": "Units Sold",
            "numDivlines": "2",
            "showValues": "1",
            "showTrendlineLabels": "0",
            "plotTooltext": "$name : Profit Contribution - $zvalue%",
            //Drawing quadrants on chart
            "drawQuadrant": "1",
            //Setting x quadrant value to 54
            "quadrantXVal": "54",
            //Setting y quadrant value to 12000
            "quadrantYVal": "12000",
            "quadrantLineAlpha": "50",
            "quadrantLineThickness": "2"
        },
        "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 attributes used to draw quadrants at user-defined positions:

Attribute Name Description

quadrantXVal

It is used to specify the position of the vertical quadrant line.

The value of this attribute must be within the range of its corresponding relative axis (and not pixels).

quadrantYVal

It is used to specify the position of the horizontal quadrant line.

The value of this attribute must be within the range of its corresponding relative axis (and not pixels).

Displaying Quadrant Labels

A bubble chart with quadrant labels displayed 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%", "drawQuadrant": "1", "quadrantLabelTL": "Low Price / High Sale", "quadrantLabelTR": "High Price / High Sale", "quadrantLabelBL": "Low Price / Low Sale", "quadrantLabelBR": "High Price / Low Sale", "quadrantXVal": "54", "quadrantYVal": "12000", "quadrantLineAlpha": "50", "quadrantLineThickness": "2" }, "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" } ] } ] }
{
    "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%",
        "drawQuadrant": "1",
        "quadrantLabelTL": "Low Price / High Sale",
        "quadrantLabelTR": "High Price / High Sale",
        "quadrantLabelBL": "Low Price / Low Sale",
        "quadrantLabelBR": "High Price / Low Sale",
        "quadrantXVal": "54",
        "quadrantYVal": "12000",
        "quadrantLineAlpha": "50",
        "quadrantLineThickness": "2"
    },
    "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",
            "showTrendlineLabels": "0",
            "plotTooltext": "$name : Profit Contribution - $zvalue%",
            //Drawing quadrants on chart
            "drawQuadrant": "1",
            "quadrantLabelTL": "Low Price / High Sale",
            "quadrantLabelTR": "High Price / High Sale",
            "quadrantLabelBL": "Low Price / Low Sale",
            "quadrantLabelBR": "High Price / Low Sale",
            //Setting x quadrant value to 54
            "quadrantXVal": "54",
            //Setting y quadrant value to 12000
            "quadrantYVal": "12000",
            "quadrantLineAlpha": "50",
            "quadrantLineThickness": "2"
        },
        "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 attributes used to specify quadrant labels:

Attribute Name Description

quadrantLabelTL

It is used to specify the label to be rendered for the top-left quadrant.

quadrantLabelTR

It is used to specify the label to be rendered for the top-right quadrant.

quadrantLabelBL

It is used to specify the label to be rendered for the bottom-left quadrant.

quadrantLabelBR

It is used to specify the label to be rendered for the bottom-right quadrant.

Customizing Quadrant Labels

A bubble chart showcasing the cosmetic attributes for quadrant labels is shown below:

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%", "drawQuadrant": "1", "quadrantLabelTL": "Low Price / High Sale", "quadrantLabelTR": "High Price / High Sale", "quadrantLabelBL": "Low Price / Low Sale", "quadrantLabelBR": "High Price / Low Sale", "quadrantLabelFontItalic": "1", "quadrantLabelFontBold": "1", "quadrantLabelTLFontColor": "#123456", "quadrantLabelTRFontColor": "#ABCDEF", "quadrantLabelBLFontColor": "#123ABC", "quadrantLabelBRFontColor": "#DEF456", "quadrantXVal": "54", "quadrantYVal": "12000", "quadrantLineAlpha": "50", "quadrantLineThickness": "2" }, "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" } ] } ] }
{
    "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%",
        "drawQuadrant": "1",
        "quadrantLabelTL": "Low Price / High Sale",
        "quadrantLabelTR": "High Price / High Sale",
        "quadrantLabelBL": "Low Price / Low Sale",
        "quadrantLabelBR": "High Price / Low Sale",
        "quadrantLabelFontItalic": "1",
        "quadrantLabelFontBold": "1",
        "quadrantLabelTLFontColor": "#123456",
        "quadrantLabelTRFontColor": "#ABCDEF",
        "quadrantLabelBLFontColor": "#123ABC",
        "quadrantLabelBRFontColor": "#DEF456",
        "quadrantXVal": "54",
        "quadrantYVal": "12000",
        "quadrantLineAlpha": "50",
        "quadrantLineThickness": "2"
    },
    "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",
            "showTrendlineLabels": "0",
            "plotTooltext": "$name : Profit Contribution - $zvalue%",
            //Drawing quadrants on chart
            "drawQuadrant": "1",
            "quadrantLabelTL": "Low Price / High Sale",
            "quadrantLabelTR": "High Price / High Sale",
            "quadrantLabelBL": "Low Price / Low Sale",
            "quadrantLabelBR": "High Price / Low Sale",
            //Customizing quadrant labels
            "quadrantLabelFontItalic": "1",
            "quadrantLabelFontBold": "1",
            "quadrantLabelTLFontColor": "#123456",
            "quadrantLabelTRFontColor": "#ABCDEF",
            "quadrantLabelBLFontColor": "#123ABC",
            "quadrantLabelBRFontColor": "#DEF456",                            
            //Setting x quadrant value to 54
            "quadrantXVal": "54",
            //Setting y quadrant value to 12000
            "quadrantYVal": "12000",
            "quadrantLineAlpha": "50",
            "quadrantLineThickness": "2"
        },
        "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 quadrant label cosmetic attributes:

Attribute Name Description

quadrantLabelFont

This attribute lets you set the font for all quadrant labels. Default value: Base font

quadrantLabelTLFont

This attribute lets you set the font for the top-left quadrant label. Default value: Base font

quadrantLabelTRFont

This attribute lets you set the font for the top-right quadrant label. Default value: Base font

quadrantLabelBLFont

This attribute lets you set the font for the bottom-left quadrant label. Default value: Base font

quadrantLabelBRFont

This attribute lets you set the font for the bottom-right quadrant label. Default value: Base font

quadrantLabelFontColor

This attribute lets you set the font color for all quadrant labels. Default value: Base font color

quadrantLabelTLFontColor

This attribute lets you set the font color for the top-left quadrant label. Default value: Base font color

quadrantLabelTRFontColor

This attribute lets you set the font color for the top-right quadrant label. Default value: Base font color

quadrantLabelBLFontColor

This attribute lets you set the font color for the bottom-left quadrant label. Default value: Base font color

quadrantLabelBRFontColor

This attribute lets you set the font color for the bottom-right quadrant label. Default value: Base font color

quadrantLabelFontAlpha

This attribute lets you set the font transparency of all quadrant labels. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelTLFontAlpha

This attribute lets you set the font transparency of the top-left quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelTRFontAlpha

This attribute lets you set the font transparency of the top-right quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelBLFontAlpha

This attribute lets you set the font transparency of the bottom-left quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelBRFontAlpha

This attribute lets you set the font transparency of the bottom-right quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelFontSize

This attribute lets you set the font size for all quadrant labels.

quadrantLabelTLFontSize

This attribute lets you set the font size for the top-left quadrant label.

quadrantLabelTRFontSize

This attribute lets you set the font size for the top-right quadrant label.

quadrantLabelBLFontSize

This attribute lets you set the font size for the bottom-left quadrant label.

quadrantLabelBRFontSize

This attribute lets you set the font size for the bottom-right quadrant label.

quadrantLabelFontBold

This attribute lets you specify whether the label text for all quadrants will be bold formatted. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelTLFontBold

This attribute lets you specify whether the top-left quadrant label text will be bold formatted. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelTRFontBold

This attribute lets you specify whether the top-right quadrant label text will be bold formatted. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelBLFontBold

This attribute lets you specify whether the bottom-left quadrant label text will be bold formatted. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelBRFontBold

This attribute lets you specify whether the bottom-right quadrant label text will be bold formatted. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelFontItalic

This attribute lets you specify whether the label text for all quadrants will be italicized. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelTLFontItalic

This attribute lets you specify whether the top-left quadrant label text will be italicized. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelTRFontItalic

This attribute lets you specify whether the top-right quadrant label text will be italicized. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelBLFontItalic

This attribute lets you specify whether the bottom-left quadrant label text will be italicized. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelBRFontItalic

This attribute lets you specify whether the bottom-right quadrant label text will be italicized. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

quadrantLabelBorderColor

This attribute lets you set the hex color code for all quadrant label borders.

quadrantLabelTLBorderColor

This attribute lets you set the hex color code for the top-left quadrant label border.

quadrantLabelTRBorderColor

This attribute lets you set the hex color code for the top-right quadrant label border.

quadrantLabelBLBorderColor

This attribute lets you set the hex color code for the bottom-left quadrant label border.

quadrantLabelBRBorderColor

This attribute lets you set the hex color code for the bottom-right quadrant label border.

quadrantLabelBorderAlpha

This attribute lets you set the border transpareny for all quadrant labels. This attribute takes values between 0 (transparent) and 100 (opaque;default).

quadrantLabelTLBorderAlpha

This attribute lets you set the transpareny of the top-left quadrant label border. This attribute takes values between 0 (transparent) and 100 (opaque;default).

quadrantLabelTRBorderAlpha

This attribute lets you set the transpareny of the top-right quadrant label border. This attribute takes values between 0 (transparent) and 100 (opaque;default).

quadrantLabelBLBorderAlpha

This attribute lets you set the transpareny of the bottom-left quadrant label border. This attribute takes values between 0 (transparent) and 100 (opaque;default).

quadrantLabelBRBorderAlpha

This attribute lets you set the transpareny of the bottom-right quadrant label border. This attribute takes values between 0 (transparent) and 100 (opaque;default).

quadrantLabelBorderThickness

This attribute lets you set the border thickness for all quadrant labels.

quadrantLabelTLBorderThickness

This attribute lets you set the thickness of the top-left quadrant label border.

quadrantLabelTRBorderThickness

This attribute lets you set the thickness of the top-right quadrant label border.

quadrantLabelBLBorderThickness

This attribute lets you set the thickness of the bottom-left quadrant label border.

quadrantLabelBRBorderThickness

This attribute lets you set the thickness of the bottom-right quadrant label border.

quadrantLabelBorderPadding

This attribute lets you set the border padding for all quadrant labels.

quadrantLabelTLBorderPadding

This attribute lets you set the padding for the top-left quadrant label border.

quadrantLabelTRBorderPadding

This attribute lets you set the padding for the top-right quadrant label border.

quadrantLabelBLBorderPadding

This attribute lets you set the padding for the bottom-left quadrant label border.

quadrantLabelBRBorderPadding

This attribute lets you set the padding for the bottom-right quadrant label border.

quadrantLabelBorderRadius

This attribute lets you set the border radius for all quadrant labels.

quadrantLabelTLBorderRadius

This attribute lets you set the radius of the top-left quadrant label border.

quadrantLabelTRBorderRadius

This attribute lets you set the radius of the top-right quadrant label border.

quadrantLabelBLBorderRadius

This attribute lets you set the radius of the bottom-left quadrant label border.

quadrantLabelBRBorderRadius

This attribute lets you set the radius of the bottom-right quadrant label border.

quadrantLabelBorderDashed

This attribute lets you specify whether all quadrant label borders will be drawn as dashed lines. Setting this attribute to 1 will draw the border as a dashed line, setting it to 0 (default) will draw it as a straight line.

quadrantLabelTLBorderDashed

This attribute lets you specify whether the top-left quadrant label border will be drawn as a dashed-line. Setting this attribute to 1 will draw the border as a dashed line, setting it to 0 (default) will draw it as a straight line.

quadrantLabelTRBorderDashed

This attribute lets you specify whether the top-right quadrant label border will be drawn as a dashed-line. Setting this attribute to 1 will draw the border as a dashed line, setting it to 0 (default) will draw it as a straight line.

quadrantLabelBLBorderDashed

This attribute lets you specify whether the bottom-left quadrant label border will be drawn as a dashed-line. Setting this attribute to 1 will draw the border as a dashed line, setting it to 0 (default) will draw it as a straight line.

quadrantLabelBRBorderDashed

This attribute lets you specify whether the bottom-right quadrant label border will be drawn as a dashed-line. Setting this attribute to 1 will draw the border as a dashed line, setting it to 0 (default) will draw it as a straight line.

quadrantLabelBorderDashlen

This attribute lets you set the length of each dash for all quadrant label borders, if the borders are drawn as a dashed line.

quadrantLabelTLBorderDashlen

This attribute lets you set the length of each dash, if the top-left quadrant label border is drawn as a dashed line.

quadrantLabelTRBorderDashlen

This attribute lets you set the length of each dash, if the top-right quadrant label border is drawn as a dashed line.

quadrantLabelBLBorderDashlen

This attribute lets you set the length of each dash, if the bottom-left quadrant label border is drawn as a dashed line.

quadrantLabelBRBorderDashlen

This attribute lets you set the length of each dash, if the bottom-right quadrant label border is drawn as a dashed line.

quadrantLabelBorderDashgap

This attribute lets you set the distance between each dash for all quadrant label borders, if the borders are drawn as a dashed lines.

quadrantLabelTLBorderDashgap

This attribute lets you set the distance between each dash, if the top-left quadrant label border is drawn as a dashed line.

quadrantLabelTRBorderDashgap

This attribute lets you set the distance between each dash, if the top-right quadrant label border is drawn as a dashed line.

quadrantLabelBLBorderDashgap

This attribute lets you set the distance between each dash, if the bottom-left quadrant label border is drawn as a dashed line.

quadrantLabelBRBorderDashgap

This attribute lets you set the distance between each dash, if the bottom-right quadrant label border is drawn as a dashed line.

quadrantLabelBgColor

This attribute lets you set the hex color code for the background of all quadrant labels.

quadrantLabelTLBgColor

This attribute lets you set the hex color code for the background of the top-left quadrant label.

quadrantLabelTRBgColor

This attribute lets you set the hex color code for the background of the top-right quadrant label.

quadrantLabelBLBgColor

This attribute lets you set the hex color code for the background of the bottom-left quadrant label.

quadrantLabelBRBgColor

This attribute lets you set the hex color code for the background of the bottom-right quadrant label.

quadrantLabelBgAlpha

This attribute lets you set the background transparency for all quadrant labels. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelTLBgAlpha

This attribute lets you set the background transparency for the top-left quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelTRBgAlpha

This attribute lets you set the background transparency for the top-right quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelBLBgAlpha

This attribute lets you set the background transparency for the bottom-left quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

quadrantLabelBRBgAlpha

This attribute lets you set the background transparency for the bottom-right quadrant label. This attribute takes values between 0 (transparent) and 100 (opaque; default).

Customizing Quadrant Lines

A bubble chart rendered with customized quadrant lines 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%", "drawQuadrant": "1", "quadrantLabelTL": "Low Price / High Sale", "quadrantLabelTR": "High Price / High Sale", "quadrantLabelBL": "Low Price / Low Sale", "quadrantLabelBR": "High Price / Low Sale", "quadrantXVal": "54", "quadrantYVal": "12000", "quadrantLineThickness": "2", "quadrantLineAlpha": "30", "quadrantLineColor": "#ac3d44", "quadrantLineIsDashed": "1", "quadrantLineDashLen": "2", "quadrantLineDashGap": "3", "quadrantLabelPadding": "5" }, "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" } ] } ] }
{
    "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%",
        "drawQuadrant": "1",
        "quadrantLabelTL": "Low Price / High Sale",
        "quadrantLabelTR": "High Price / High Sale",
        "quadrantLabelBL": "Low Price / Low Sale",
        "quadrantLabelBR": "High Price / Low Sale",
        "quadrantXVal": "54",
        "quadrantYVal": "12000",
        "quadrantLineThickness": "2",
        "quadrantLineAlpha": "30",
        "quadrantLineColor": "#ac3d44",
        "quadrantLineIsDashed": "1",
        "quadrantLineDashLen": "2",
        "quadrantLineDashGap": "3",
        "quadrantLabelPadding": "5"
    },
    "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",
            "showTrendlineLabels": "0",
            "plotTooltext": "$name : Profit Contribution - $zvalue%",
            //Drawing quadrants on chart
            "drawQuadrant": "1",
            "quadrantLabelTL": "Low Price / High Sale",
            "quadrantLabelTR": "High Price / High Sale",
            "quadrantLabelBL": "Low Price / Low Sale",
            "quadrantLabelBR": "High Price / Low Sale",
            "quadrantXVal": "54",
            "quadrantYVal": "12000",
            "quadrantLineThickness": "2",
            "quadrantLineAlpha": "30",
            "quadrantLineColor": "#ac3d44",
            "quadrantLineIsDashed": "1",
            "quadrantLineDashLen": "2",
            "quadrantLineDashGap": "3",
            "quadrantLabelPadding": "5"
        },
        "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 attributes used to customize quadrant lines:

Attribute Name Description

quadrantLineThickness

It is used to specify the thickness of quadrant lines.

quadrantLineAlpha

It is used to specify the transparency of the quadrant lines. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100.

quadrantLineColor

It is used to specify the hex code of the color that will be used to render the quadrant lines.

quadrantLineIsDashed

It is used to specify if the quadrant lines will be rendered as dashed lines. Setting this attribute to 1 will render the quadrant lines as dashed lines, setting it to 0 will render them as whole lines.

quadrantLineDashLen

It is used to specify the length of each dash, if the quadrant lines are rendered as dashed lines.

quadrantLineDashGap

It is used to specify the gap between each dash, if the quadrant lines are rendered as dashed lines.

quadrantLabelPadding

It is used to specify the space between quadrant labels and the associated quadrant lines.
Top