Loading
Configuring Bubble and XY Charts
FusionCharts Suite XT allows you to configure the functional and cosmetic properties of bubble and xy charts.
In this section, you will be shown how you can:
-
Display labels on bubbles
-
Segment the x-axis into categorical zones
-
Configure the x-axis labels
-
Configure the x-axis vertical divisional lines
-
Connect scatter plots in a scatter chart
-
Render regression lines in charts
Displaying Labels on Bubbles
By default, data labels are not rendered on the bubbles in a bubble chart.
A bubble chart with data labels rendered on bubbles looks like this:
Given below is a brief description of the attribute used to show/hide labels on bubbles:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether labels will be displayed on bubbles. Setting this attribute to |
The data structure needed to show labels on bubbles 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%"
},
"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"
}
]
}
]
}Segmenting the X-axis of Bubble/Scatter Charts into Categorical Zones
The x-axis of the bubble/scatter chart can be segmented into categorical zones using vertical trend lines.
A bubble chart with the x-axis segmented looks like this:
The data structure needed to segment the x-axis into categorical zones 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",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"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"
}
]
}
],
"vtrendlines": [
{
"line": [
{
"startValue": "0",
"endValue": "20",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "25",
"displayValue": " "
},
{
"startValue": "20",
"endValue": "40",
"isTrendZone": "1",
"color": "#adebff",
"alpha": "15",
"displayValue": " "
},
{
"startValue": "40",
"endValue": "60",
"isTrendZone": "1",
"displayValue": " "
},
{
"startValue": "60",
"endValue": "80",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "25",
"displayValue": " "
},
{
"startValue": "80",
"endValue": "100",
"isTrendZone": "1",
"color": "#f2a485",
"alpha": "15",
"displayValue": " "
}
]
}
]
}Configuring the X-axis Labels of Bubble/Scatter Charts
You can configure the display mode of the x-axis labels for bubble and scatter charts. You can either choose to make the chart automatically generate the x-axis labels along with vertical divisional lines or you can explicitly define each x-axis label. Additionally, you can also opt to mix these two modes.
Given below is a brief description of the attribute used to configure the x-axis labels:
| Attribute Name | Description |
|---|---|
|
It is used to specify the mode in which the x-axis labels will be rendered. This attribute takes three values: |
Auto Mode
In the auto mode, the chart automatically calculates and displays the x-axis labels. In this mode, the chart ignores the categories object array and allows the x-axis to inherit the properties similar to that of the vertical y-Axis.
A bubble chart with the x-axis labels rendered in the auto mode looks like this:
In the above chart, you can see that the x-axis labels are automatically calculated and displayed. These x-axis labels are based on x-axis values which in turn are generated using the x values of the chart data. Additionally, along with each label a vertical divisional line is also rendered.
The data structure needed to render the x-axis labels in the auto mode 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",
"xNumberPrefix": "$",
"showValues": "1",
"xAxisLabelMode": "AUTO",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"categories": [
{
"category": [
{
"label": "0",
"x": "0"
},
{
"label": "$10",
"x": "10",
"showverticalline": "1"
},
{
"label": "$20",
"x": "20",
"showverticalline": "1"
},
{
"label": "$30",
"x": "30",
"showverticalline": "1"
},
{
"label": "$40",
"x": "40",
"showverticalline": "1"
},
{
"label": "$50",
"x": "50",
"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"
}
]
}
]
}Categories Mode
In this mode, the x-axis displays labels explicitly defined through the objects in the category array within the categories object array.
A bubble chart with the x-axis labels rendered in the categories mode looks like this:
In the above chart, you can see that the labels explicitly defined in the category object array within the categories object array are displayed. The automatically calculated labels are not displayed.
To render the x-axis labels in the categories, set the value of the xAxisLabelMode attribute to CATEGORIES.
Mixed Mode
This mode is a combination of the auto mode and the category mode. It allows the x-axis to display the automatically calculated x-axis labels as well as the explicitly defined x-axis labels simultaneously.
A bubble chart with the x-axis labels rendered in the mixed mode looks like this:
In the above chart, you can see that the x-axis displays the automatically calculated labels as well as the explicitly defined labels.
To render the x-axis labels in the categories, set the value of the xAxisLabelMode attribute to MIXED.
By default, when xAxisLabelMode attribute is not defined and when categories are not explicitly defined in the data, the chart displays x-axis labels in the auto mode. In case, categories are defined (and the xAxisLabelMode attribute is not defined), the chart switches to the categories mode. You can also force any of the above three modes by explicitly defining the mode using the xAxisLabelMode attribute.
Configuring the X-axis Vertical Divisional Lines
Given below is a brief description of the attributes used to configure the vertical divisional lines related to the x-axis:
| Attribute Name | Description |
|---|---|
|
It is used to allow you to explicitly set the lower and upper limit values and the number of divisional lines for this x-axis. By default, this is done automatically. Setting this attribute to |
|
It is used to specify whether the divisional lines values for the x-axis will be shown. |
|
It is used to specify the number of vertical axis divisional lines to be rendered on the chart. |
|
By default, all divisional lines show their values. However, you can opt to skip every x(th) divisional line value using this attribute. |
|
It is used to specify the hex code for the color that will be used to render the vertical divisional lines. |
|
It is used to specify the thickness of the vertical divisional lines. This attribute takes values between 1 (thinnest) and 5 (thickest). |
|
It is used to specify the transparency for the vertical divisional lines. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 20. |
|
It is used to specify whether the vertical div lines will be rendered as dashed lines. Setting this attribute to |
|
It is used to specify the length of each dash, if the vertical divisional lines are to be rendered as dashed lines. |
|
It is used to specify the gap between each dash, if the vertical divisional lines are to be rendered as dashed lines. |
|
It is used to specify whether alternate-colored vertical grid bands will be shown. |
|
It is used to specify the hex code for the color that will be used to render the alternate vertical grid bands. |
|
It is used to specify the transparency for the alternate vertical grid bands. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 20. |
Connecting Scatter Plots by a Line in XY (Scatter) Charts
A scatter chart with all the data points connected by a line looks like this:
Given below is a brief description of the attribute used to connect data points by a line:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the data points on the scatter chart will be connected by a line. Setting this attribute to |
The data structure needed to connect all data points of a dataset by a line is given below:
{
"chart": {
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subcaption": "Los Angeles Topanga",
"xaxisname": "Average Day Temperature",
"yaxisname": "Sales (In USD)",
"xaxisminvalue": "23",
"xaxismaxvalue": "95",
"ynumberprefix": "$",
"xnumbersuffix": "° F",
"theme": "fint"
},
"categories": [
{
"category": [
{
"x": "23",
"label": "23° F",
"showverticalline": "0"
},
{
"x": "32",
"label": "32° F",
"showverticalline": "1"
},
{
"x": "50",
"label": "50° F",
"showverticalline": "1"
},
{
"x": "68",
"label": "68° F",
"showverticalline": "1"
},
{
"x": "80",
"label": "80° F",
"showverticalline": "1"
},
{
"x": "95",
"label": "95° F",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"seriesname": "Ice Cream",
"drawLine": "1",
"data": [
{
"x": "23",
"y": "1560"
},
{
"x": "24",
"y": "1500"
},
{
"x": "24",
"y": "1680"
},
{
"x": "25",
"y": "1780"
},
{
"x": "25",
"y": "1620"
},
{
"x": "26",
"y": "1810"
},
{
"x": "27",
"y": "2310"
},
{
"x": "29",
"y": "2620"
},
{
"x": "31",
"y": "2500"
},
{
"x": "32",
"y": "2410"
},
{
"x": "35",
"y": "2880"
},
{
"x": "36",
"y": "3910"
},
{
"x": "34",
"y": "3960"
},
{
"x": "38",
"y": "4080"
},
{
"x": "40",
"y": "4190"
},
{
"x": "41",
"y": "4170"
},
{
"x": "42",
"y": "4280"
},
{
"x": "54",
"y": "5180"
},
{
"x": "53",
"y": "5770"
},
{
"x": "55",
"y": "5900"
},
{
"x": "56",
"y": "5940"
},
{
"x": "58",
"y": "6090"
},
{
"x": "61",
"y": "6086"
},
{
"x": "67",
"y": "6100"
},
{
"x": "68",
"y": "6200"
},
{
"x": "70",
"y": "6360"
},
{
"x": "75",
"y": "6450"
},
{
"x": "79",
"y": "6650"
},
{
"x": "80",
"y": "6710"
},
{
"x": "79",
"y": "6975"
},
{
"x": "82",
"y": "7000"
},
{
"x": "85",
"y": "7150"
},
{
"x": "86",
"y": "7160"
},
{
"x": "86",
"y": "7200"
},
{
"x": "88",
"y": "7230"
},
{
"x": "87",
"y": "7210"
},
{
"x": "86",
"y": "7480"
},
{
"x": "89",
"y": "7540"
},
{
"x": "89",
"y": "7400"
},
{
"x": "90",
"y": "7500"
},
{
"x": "92",
"y": "7640"
}
]
},
{
"seriesname": "Beer",
"drawLine": "1",
"data": [
{
"x": "23",
"y": "3160"
},
{
"x": "24",
"y": "3000"
},
{
"x": "24",
"y": "3080"
},
{
"x": "25",
"y": "3680"
},
{
"x": "25",
"y": "3320"
},
{
"x": "26",
"y": "3810"
},
{
"x": "27",
"y": "5310"
},
{
"x": "29",
"y": "3620"
},
{
"x": "31",
"y": "4100"
},
{
"x": "32",
"y": "3910"
},
{
"x": "35",
"y": "4280"
},
{
"x": "36",
"y": "4210"
},
{
"x": "34",
"y": "4160"
},
{
"x": "38",
"y": "4480"
},
{
"x": "40",
"y": "4890"
},
{
"x": "41",
"y": "4770"
},
{
"x": "42",
"y": "4880"
},
{
"x": "54",
"y": "4980"
},
{
"x": "53",
"y": "4770"
},
{
"x": "55",
"y": "4900"
},
{
"x": "56",
"y": "4940"
},
{
"x": "58",
"y": "4990"
},
{
"x": "61",
"y": "5086"
},
{
"x": "67",
"y": "5100"
},
{
"x": "68",
"y": "4700"
},
{
"x": "70",
"y": "5360"
},
{
"x": "75",
"y": "5150"
},
{
"x": "79",
"y": "5450"
},
{
"x": "80",
"y": "5010"
},
{
"x": "79",
"y": "4975"
},
{
"x": "82",
"y": "5400"
},
{
"x": "85",
"y": "5150"
},
{
"x": "86",
"y": "5460"
},
{
"x": "86",
"y": "5000"
},
{
"x": "88",
"y": "5200"
},
{
"x": "87",
"y": "5410"
},
{
"x": "86",
"y": "5480"
},
{
"x": "89",
"y": "5440"
},
{
"x": "89",
"y": "5300"
},
{
"x": "90",
"y": "5500"
},
{
"x": "92",
"y": "5240"
}
]
}
],
"vtrendlines": [
{
"line": [
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
},
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": "Cold"
},
{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"displayvalue": "Moderate"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": "Hot"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": "Very hot"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}
]
}
]
}Regression Lines in Scatter and Bubble charts
For scatter and bubble charts, regression lines can be drawn based on the values provided to the charts.
In scatter or bubble charts, each data point has two distinct numeric values: the x value w.r.t the x-axis and the y value w.r.t the y-axis. A regression line is used to show the trend of the y values with respect to the x values or the trend of the x values with respect to the y values. Hence, a regression line can be used to derive a particular trend from the scattered data points in the chart canvas and predict values accordingly.
The regression line is shown as a straight line.
Regression line can be used to find trends and predict future sales, stock prices, currency exchange rates, productivity gains resulting from a training program, etc.
There are several methods to calculate and draw regression lines; the scatter and bubble charts use linear Regression and least-squares or least absolute deviation method. This method calculates the best-fitting straight-line for the observed data by minimizing the sum of the squares of the vertical deviations from each data point to the line (if a point lies on the fitted line exactly, then its vertical deviation is 0). Because the deviations are first squared, then summed, there are no cancellations between positive and negative values.
A scatter chart with a regression line looks like this:
Given below is a brief description of the attribute used to show regression lines:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a regression line will be shown for the chart. Setting this attribute to |
The data structure needed to show a regression line for a scatter chart is given below:
{
"chart": {
"theme": "fint",
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subCaption": "Los Angeles Topanga",
"xAxisName": "Average Day Temperature",
"yAxisName": "Sales (In USD)",
"xAxisMinValue": "23",
"xAxisMaxValue": "95",
"yNumberPrefix": "$",
"xNumberSuffix": "° F"
},
"categories": [
{
"category": [
{
"x": "23",
"label": "23° F",
"showverticalline": "0"
},
{
"x": "32",
"label": "32° F",
"showverticalline": "1"
},
{
"x": "50",
"label": "50° F",
"showverticalline": "1"
},
{
"x": "68",
"label": "68° F",
"showverticalline": "1"
},
{
"x": "80",
"label": "80° F",
"showverticalline": "1"
},
{
"x": "95",
"label": "95° F",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"seriesname": "Ice Cream",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "1560"
},
{
"x": "24",
"y": "1500"
},
{
"x": "24",
"y": "1680"
},
{
"x": "25",
"y": "1780"
},
{
"x": "25",
"y": "1620"
},
{
"x": "26",
"y": "1810"
},
{
"x": "27",
"y": "2310"
},
{
"x": "29",
"y": "2620"
},
{
"x": "31",
"y": "2500"
},
{
"x": "32",
"y": "2410"
},
{
"x": "35",
"y": "2880"
},
{
"x": "36",
"y": "3910"
},
{
"x": "34",
"y": "3960"
},
{
"x": "38",
"y": "4080"
},
{
"x": "40",
"y": "4190"
},
{
"x": "41",
"y": "4170"
},
{
"x": "42",
"y": "4280"
},
{
"x": "54",
"y": "5180"
},
{
"x": "53",
"y": "5770"
},
{
"x": "55",
"y": "5900"
},
{
"x": "56",
"y": "5940"
},
{
"x": "58",
"y": "6090"
},
{
"x": "61",
"y": "6086"
},
{
"x": "67",
"y": "6100"
},
{
"x": "68",
"y": "6200"
},
{
"x": "70",
"y": "6360"
},
{
"x": "75",
"y": "6450"
},
{
"x": "79",
"y": "6650"
},
{
"x": "80",
"y": "6710"
},
{
"x": "79",
"y": "6975"
},
{
"x": "82",
"y": "7000"
},
{
"x": "85",
"y": "7150"
},
{
"x": "86",
"y": "7160"
},
{
"x": "86",
"y": "7200"
},
{
"x": "88",
"y": "7230"
},
{
"x": "87",
"y": "7210"
},
{
"x": "86",
"y": "7480"
},
{
"x": "89",
"y": "7540"
},
{
"x": "89",
"y": "7400"
},
{
"x": "90",
"y": "7500"
},
{
"x": "92",
"y": "7640"
}
]
},
{
"seriesname": "Beer",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "3160"
},
{
"x": "24",
"y": "3000"
},
{
"x": "24",
"y": "3080"
},
{
"x": "25",
"y": "3680"
},
{
"x": "25",
"y": "3320"
},
{
"x": "26",
"y": "3810"
},
{
"x": "27",
"y": "5310"
},
{
"x": "29",
"y": "3620"
},
{
"x": "31",
"y": "4100"
},
{
"x": "32",
"y": "3910"
},
{
"x": "35",
"y": "4280"
},
{
"x": "36",
"y": "4210"
},
{
"x": "34",
"y": "4160"
},
{
"x": "38",
"y": "4480"
},
{
"x": "40",
"y": "4890"
},
{
"x": "41",
"y": "4770"
},
{
"x": "42",
"y": "4880"
},
{
"x": "54",
"y": "4980"
},
{
"x": "53",
"y": "4770"
},
{
"x": "55",
"y": "4900"
},
{
"x": "56",
"y": "4940"
},
{
"x": "58",
"y": "4990"
},
{
"x": "61",
"y": "5086"
},
{
"x": "67",
"y": "5100"
},
{
"x": "68",
"y": "4700"
},
{
"x": "70",
"y": "5360"
},
{
"x": "75",
"y": "5150"
},
{
"x": "79",
"y": "5450"
},
{
"x": "80",
"y": "5010"
},
{
"x": "79",
"y": "4975"
},
{
"x": "82",
"y": "5400"
},
{
"x": "85",
"y": "5150"
},
{
"x": "86",
"y": "5460"
},
{
"x": "86",
"y": "5000"
},
{
"x": "88",
"y": "5200"
},
{
"x": "87",
"y": "5410"
},
{
"x": "86",
"y": "5480"
},
{
"x": "89",
"y": "5440"
},
{
"x": "89",
"y": "5300"
},
{
"x": "90",
"y": "5500"
},
{
"x": "92",
"y": "5240"
}
]
}
],
"vtrendlines": [
{
"line": [
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
},
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Cold"
},
{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Moderate"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Hot"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very hot"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}
]
}
]
}Modes of Regression
Scatter charts can display regression lines in one of the following two modes:
-
Y on X : When y values are predicted or a trend of y values is calculated based on the x values
-
X on Y : When x values are predicted or a trend of x values is calculated based on the y values
By default, scatter and bubble charts use the Y on X mode to draw the regression lines.
The scatter chart with a regression line shown above uses the Y on X mode.
The same chart with a regression line drawn using the X on Y mode looks like this:
Given below is a brief description of the attributes used to set the mode and customize regression lines:
| Attribute Name | Description |
|---|---|
|
It is used to specify the mode in which a regression line will be drawn. Setting this attribute to |
|
It is used to specify the hex code of the color that will be used to draw the regression line. |
|
It is used to specify the thickness of the regression line. |
|
It is used to specify the transparency of the regression line. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
The data structure needed to draw a regression line in the X on Y mode is given below:
{
"chart": {
"theme": "fint",
"caption": "Sales of Beer & Ice-cream vs Temperature",
"subCaption": "Los Angeles Topanga",
"xAxisName": "Average Day Temperature",
"yAxisName": "Sales (In USD)",
"xAxisMinValue": "23",
"xAxisMaxValue": "95",
"yNumberPrefix": "$",
"xNumberSuffix": "° F",
"showYOnX": "0"
},
"categories": [
{
"category": [
{
"x": "23",
"label": "23° F",
"showverticalline": "0"
},
{
"x": "32",
"label": "32° F",
"showverticalline": "1"
},
{
"x": "50",
"label": "50° F",
"showverticalline": "1"
},
{
"x": "68",
"label": "68° F",
"showverticalline": "1"
},
{
"x": "80",
"label": "80° F",
"showverticalline": "1"
},
{
"x": "95",
"label": "95° F",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"seriesname": "Ice Cream",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "1560"
},
{
"x": "24",
"y": "1500"
},
{
"x": "24",
"y": "1680"
},
{
"x": "25",
"y": "1780"
},
{
"x": "25",
"y": "1620"
},
{
"x": "26",
"y": "1810"
},
{
"x": "27",
"y": "2310"
},
{
"x": "29",
"y": "2620"
},
{
"x": "31",
"y": "2500"
},
{
"x": "32",
"y": "2410"
},
{
"x": "35",
"y": "2880"
},
{
"x": "36",
"y": "3910"
},
{
"x": "34",
"y": "3960"
},
{
"x": "38",
"y": "4080"
},
{
"x": "40",
"y": "4190"
},
{
"x": "41",
"y": "4170"
},
{
"x": "42",
"y": "4280"
},
{
"x": "54",
"y": "5180"
},
{
"x": "53",
"y": "5770"
},
{
"x": "55",
"y": "5900"
},
{
"x": "56",
"y": "5940"
},
{
"x": "58",
"y": "6090"
},
{
"x": "61",
"y": "6086"
},
{
"x": "67",
"y": "6100"
},
{
"x": "68",
"y": "6200"
},
{
"x": "70",
"y": "6360"
},
{
"x": "75",
"y": "6450"
},
{
"x": "79",
"y": "6650"
},
{
"x": "80",
"y": "6710"
},
{
"x": "79",
"y": "6975"
},
{
"x": "82",
"y": "7000"
},
{
"x": "85",
"y": "7150"
},
{
"x": "86",
"y": "7160"
},
{
"x": "86",
"y": "7200"
},
{
"x": "88",
"y": "7230"
},
{
"x": "87",
"y": "7210"
},
{
"x": "86",
"y": "7480"
},
{
"x": "89",
"y": "7540"
},
{
"x": "89",
"y": "7400"
},
{
"x": "90",
"y": "7500"
},
{
"x": "92",
"y": "7640"
}
]
},
{
"seriesname": "Beer",
"showregressionline": "1",
"data": [
{
"x": "23",
"y": "3160"
},
{
"x": "24",
"y": "3000"
},
{
"x": "24",
"y": "3080"
},
{
"x": "25",
"y": "3680"
},
{
"x": "25",
"y": "3320"
},
{
"x": "26",
"y": "3810"
},
{
"x": "27",
"y": "5310"
},
{
"x": "29",
"y": "3620"
},
{
"x": "31",
"y": "4100"
},
{
"x": "32",
"y": "3910"
},
{
"x": "35",
"y": "4280"
},
{
"x": "36",
"y": "4210"
},
{
"x": "34",
"y": "4160"
},
{
"x": "38",
"y": "4480"
},
{
"x": "40",
"y": "4890"
},
{
"x": "41",
"y": "4770"
},
{
"x": "42",
"y": "4880"
},
{
"x": "54",
"y": "4980"
},
{
"x": "53",
"y": "4770"
},
{
"x": "55",
"y": "4900"
},
{
"x": "56",
"y": "4940"
},
{
"x": "58",
"y": "4990"
},
{
"x": "61",
"y": "5086"
},
{
"x": "67",
"y": "5100"
},
{
"x": "68",
"y": "4700"
},
{
"x": "70",
"y": "5360"
},
{
"x": "75",
"y": "5150"
},
{
"x": "79",
"y": "5450"
},
{
"x": "80",
"y": "5010"
},
{
"x": "79",
"y": "4975"
},
{
"x": "82",
"y": "5400"
},
{
"x": "85",
"y": "5150"
},
{
"x": "86",
"y": "5460"
},
{
"x": "86",
"y": "5000"
},
{
"x": "88",
"y": "5200"
},
{
"x": "87",
"y": "5410"
},
{
"x": "86",
"y": "5480"
},
{
"x": "89",
"y": "5440"
},
{
"x": "89",
"y": "5300"
},
{
"x": "90",
"y": "5500"
},
{
"x": "92",
"y": "5240"
}
]
}
],
"vtrendlines": [
{
"line": [
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "25"
},
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"color": "#adebff",
"alpha": "15"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Cold"
},
{
"startvalue": "50",
"endvalue": "68",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Moderate"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Hot"
},
{
"startvalue": "68",
"endvalue": "80",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "15"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very hot"
},
{
"startvalue": "80",
"endvalue": "95",
"istrendzone": "1",
"displayvalue": " ",
"color": "#f2a485",
"alpha": "25"
}
]
}
]
}
The formulae used to draw the regression lines for both the modes are given below:
Y on X – The regression equation of Y on X is the equation of the best fitting straight line in the form y= a+bx, where x is the explanatory variable and y is the dependent variable.
When, b = ( n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σx² – (Σx)² )
X on Y - The regression equation of X on Y is the equation of the best fitting straight line in the form x= a+by, where y is the explanatory variable and x is the dependent variable.
When, b = ( n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σy² – (Σy)² )
There! You have now seen how you can configure the bubble and XY charts.