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:
-
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 |
|---|---|
|
It is used to specify whether quadrants will be drawn for the bubble chart. Setting this attribute to |
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 |
|---|---|
|
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). |
|
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 |
|---|---|
|
It is used to specify the name to be rendered for the top-left quadrant. |
|
It is used to specify the name to be rendered for the top-right quadrant. |
|
It is used to specify the name to be rendered for the bottom-left quadrant. |
|
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 |
|---|---|
|
It is used to specify the thickness of quadrant lines. |
|
It is used to specify the transparency of the quadrant lines. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
|
It is used to specify the hex code of the color that will be used to render the quadrant lines. |
|
It is used to specify if the quadrant lines will be rendered as dashed lines. Setting this attribute to |
|
It is used to specify the length of each dash, if the quadrant lines are rendered as dashed lines. |
|
It is used to specify the gap between each dash, if the quadrant lines are rendered as dashed lines. |
|
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.