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 labels
-
Customize quadrant labels
-
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:
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"
}
]
}
]
}Drawing Quadrants at User-defined Positions
A bubble chart rendered with quadrants drawn at user-defined positions looks like this:
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"
}
]
}
]
}Displaying Quadrant Labels
A bubble chart with quadrant labels displayed looks like this:
Given below is a brief description of the attributes used to specify quadrant labels:
| Attribute Name | Description |
|---|---|
|
It is used to specify the label to be rendered for the top-left quadrant. |
|
It is used to specify the label to be rendered for the top-right quadrant. |
|
It is used to specify the label to be rendered for the bottom-left quadrant. |
|
It is used to specify the label to be rendered for the bottom-right quadrant. |
The data structure needed to display quadrant labels 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"
}
]
}
]
}Customizing Quadrant Labels
A bubble chart showcasing the cosmetic attributes for quadrant labels is shown below:
Given below is a brief description of the quadrant label cosmetic attributes:
| Attribute Name | Description |
|---|---|
|
This attribute lets you set the font for all quadrant labels. Default value: Base font |
|
This attribute lets you set the font for the top-left quadrant label. Default value: Base font |
|
This attribute lets you set the font for the top-right quadrant label. Default value: Base font |
|
This attribute lets you set the font for the bottom-left quadrant label. Default value: Base font |
|
This attribute lets you set the font for the bottom-right quadrant label. Default value: Base font |
|
This attribute lets you set the font color for all quadrant labels. Default value: Base font color |
|
This attribute lets you set the font color for the top-left quadrant label. Default value: Base font color |
|
This attribute lets you set the font color for the top-right quadrant label. Default value: Base font color |
|
This attribute lets you set the font color for the bottom-left quadrant label. Default value: Base font color |
|
This attribute lets you set the font color for the bottom-right quadrant label. Default value: Base font color |
|
This attribute lets you set the font transparency of all quadrant labels. This attribute takes values between 0 (transparent) and 100 (opaque; default). |
|
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). |
|
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). |
|
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). |
|
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). |
|
This attribute lets you set the font size for all quadrant labels. |
|
This attribute lets you set the font size for the top-left quadrant label. |
|
This attribute lets you set the font size for the top-right quadrant label. |
|
This attribute lets you set the font size for the bottom-left quadrant label. |
|
This attribute lets you set the font size for the bottom-right quadrant label. |
|
This attribute lets you specify whether the label text for all quadrants will be bold formatted. Setting this attribute to |
|
This attribute lets you specify whether the top-left quadrant label text will be bold formatted. Setting this attribute to |
|
This attribute lets you specify whether the top-right quadrant label text will be bold formatted. Setting this attribute to |
|
This attribute lets you specify whether the bottom-left quadrant label text will be bold formatted. Setting this attribute to |
|
This attribute lets you specify whether the bottom-right quadrant label text will be bold formatted. Setting this attribute to |
|
This attribute lets you specify whether the label text for all quadrants will be italicized. Setting this attribute to |
|
This attribute lets you specify whether the top-left quadrant label text will be italicized. Setting this attribute to |
|
This attribute lets you specify whether the top-right quadrant label text will be italicized. Setting this attribute to |
|
This attribute lets you specify whether the bottom-left quadrant label text will be italicized. Setting this attribute to |
|
This attribute lets you specify whether the bottom-right quadrant label text will be italicized. Setting this attribute to |
|
This attribute lets you set the hex color code for all quadrant label borders. |
|
This attribute lets you set the hex color code for the top-left quadrant label border. |
|
This attribute lets you set the hex color code for the top-right quadrant label border. |
|
This attribute lets you set the hex color code for the bottom-left quadrant label border. |
|
This attribute lets you set the hex color code for the bottom-right quadrant label border. |
|
This attribute lets you set the border transpareny for all quadrant labels. This attribute takes values between 0 (transparent) and 100 (opaque;default). |
|
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). |
|
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). |
|
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). |
|
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). |
|
This attribute lets you set the border thickness for all quadrant labels. |
|
This attribute lets you set the thickness of the top-left quadrant label border. |
|
This attribute lets you set the thickness of the top-right quadrant label border. |
|
This attribute lets you set the thickness of the bottom-left quadrant label border. |
|
This attribute lets you set the thickness of the bottom-right quadrant label border. |
|
This attribute lets you set the border padding for all quadrant labels. |
|
This attribute lets you set the padding for the top-left quadrant label border. |
|
This attribute lets you set the padding for the top-right quadrant label border. |
|
This attribute lets you set the padding for the bottom-left quadrant label border. |
|
This attribute lets you set the padding for the bottom-right quadrant label border. |
|
This attribute lets you set the border radius for all quadrant labels. |
|
This attribute lets you set the radius of the top-left quadrant label border. |
|
This attribute lets you set the radius of the top-right quadrant label border. |
|
This attribute lets you set the radius of the bottom-left quadrant label border. |
|
This attribute lets you set the radius of the bottom-right quadrant label border. |
|
This attribute lets you specify whether all quadrant label borders will be drawn as dashed lines. Setting this attribute to |
|
This attribute lets you specify whether the top-left quadrant label border will be drawn as a dashed-line. Setting this attribute to |
|
This attribute lets you specify whether the top-right quadrant label border will be drawn as a dashed-line. Setting this attribute to |
|
This attribute lets you specify whether the bottom-left quadrant label border will be drawn as a dashed-line. Setting this attribute to |
|
This attribute lets you specify whether the bottom-right quadrant label border will be drawn as a dashed-line. Setting this attribute to |
|
This attribute lets you set the length of each dash for all quadrant label borders, if the borders are drawn as a dashed line. |
|
This attribute lets you set the length of each dash, if the top-left quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the length of each dash, if the top-right quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the length of each dash, if the bottom-left quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the length of each dash, if the bottom-right quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the distance between each dash for all quadrant label borders, if the borders are drawn as a dashed lines. |
|
This attribute lets you set the distance between each dash, if the top-left quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the distance between each dash, if the top-right quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the distance between each dash, if the bottom-left quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the distance between each dash, if the bottom-right quadrant label border is drawn as a dashed line. |
|
This attribute lets you set the hex color code for the background of all quadrant labels. |
|
This attribute lets you set the hex color code for the background of the top-left quadrant label. |
|
This attribute lets you set the hex color code for the background of the top-right quadrant label. |
|
This attribute lets you set the hex color code for the background of the bottom-left quadrant label. |
|
This attribute lets you set the hex color code for the background of the bottom-right quadrant label. |
|
This attribute lets you set the background transparency for all quadrant labels. This attribute takes values between 0 (transparent) and 100 (opaque; default). |
|
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). |
|
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). |
|
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). |
|
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). |
The data structure to customize quadrant labels 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",
"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"
}
]
}
]
}Customizing Quadrant Lines
A bubble chart rendered with customized quadrant lines looks like this:
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"
}
]
}
]
}There! You have now seen how you can customize the quadrants for bubble and XY charts.