Loading

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:

  • Draw quadrants at default positions

  • Draw quadrants at user-defined positions

  • Display quadrant names

  • Customize quadrant lines

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

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.

The data structure needed to draw quadrants for a bubble chart is given below:

{ "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"
                }
            ]
        }
    ]
}

Drawing Quadrants at User-defined Positions

A bubble chart rendered with quadrants drawn at user-defined positions looks like this:

FusionCharts will load here..

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

The data structure needed to draw quadrant lines at user-defined positions is given below:

{ "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"
                }
            ]
        }
    ]
}

Displaying Quadrant Names

A bubble chart with quadrant names displayed looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to specify quadrant names:

Attribute Name Description

quadrantLabelTL

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

quadrantLabelTR

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

quadrantLabelBL

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

quadrantLabelBR

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

The data structure needed to display quadrant name is given below:

{ "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"
                }
            ]
        }
    ]
}

Customizing Quadrant Lines

A bubble chart rendered with customized quadrant lines looks like this:

FusionCharts will load here..

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.

The data structure needed to customize quadrant lines is given below:

{ "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"
                }
            ]
        }
    ]
}

There! You have now seen how you can customize the quadrants for bubble and XY charts.

Top