## Regression Lines in Scatter and Bubble charts

In scatter and bubble charts, each data point has two distinct numeric values: the x value with respect to the x-axis and the y value with respect to the y-axis.

A regression line, rendered as a straight line, is used to show the trend of y values with respect to the x values or the trend of x values with respect to the y values. A regression line, therefore, can be used to derive a particular trend from the scattered data points in the chart canvas and predict values accordingly. For example, regression lines can be used to find trends and predict future sales, stock prices, currency exchange rates, productivity gains resulting from a training program, and so on.

For scatter and bubble charts, regression lines can be drawn based on the values provided to the charts.

There are several methods to calculate and draw regression lines; scatter charts, using linear regression, use the least-squares deviation method (also known as the 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 deviation of each data point from the line (if a point lies on the fitted line exactly, then its vertical deviation is 0). As the deviation values are first squared and then summed, there are no cancellations between positive and negative values.

A scatter chart with regression lines looks like this:

{ "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" } ] } ] }
``````{
"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": "&deg; 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": " ",
"alpha": "25"
},
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"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"
}
]
}
]
}``````
``````<html>
<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">
var fusioncharts = new FusionCharts({
type: 'scatter',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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": "&deg; F"
},
"categories": [{
"category": [{
"x": "23",
"label": "23\xB0 F",
"showverticalline": "0"
}, {
"x": "32",
"label": "32\xB0 F",
"showverticalline": "1"
}, {
"x": "50",
"label": "50\xB0 F",
"showverticalline": "1"
}, {
"x": "68",
"label": "68\xB0 F",
"showverticalline": "1"
}, {
"x": "80",
"label": "80\xB0 F",
"showverticalline": "1"
}, {
"x": "95",
"label": "95\xB0 F",
"showverticalline": "1"
}]
}],
"dataset": [{
"seriesname": "Ice Cream",
//Showing regression line for this dataset
"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": " ",
"alpha": "25"
}, {
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very cold"
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>``````

Given below is a brief description of the attribute used to show regression lines:

Attribute Name Description

`showRegressionLine`

It is used to specify whether a regression line will be shown for the chart. Setting this attribute to `1` will show the regression line, setting it to `0` (default) will hide it. This attribute belongs to the `dataset` object.

### Modes of Regression

Regression lines can be drawn in one of the following modes:

• Y on X: (Default mode) Used when y values are predicted, or a trend of y values is calculated, based on the x values

• X on Y: Used when x values are predicted, or a trend of x values is calculated, based on the y values

The scatter chart with regression lines shown above uses the Y on X mode.

The same chart with regression lines drawn using the X on Y mode looks like this:

{ "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" } ] } ] }
``````{
"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": "&deg; 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": " ",
"alpha": "25"
},
{
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very cold"
},
{
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"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"
}
]
}
]
}``````
``````<html>
<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">
var fusioncharts = new FusionCharts({
type: 'scatter',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"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": "&deg; F",
"showYOnX": "0"
},
"categories": [{
"category": [{
"x": "23",
"label": "23\xB0 F",
"showverticalline": "0"
}, {
"x": "32",
"label": "32\xB0 F",
"showverticalline": "1"
}, {
"x": "50",
"label": "50\xB0 F",
"showverticalline": "1"
}, {
"x": "68",
"label": "68\xB0 F",
"showverticalline": "1"
}, {
"x": "80",
"label": "80\xB0 F",
"showverticalline": "1"
}, {
"x": "95",
"label": "95\xB0 F",
"showverticalline": "1"
}]
}],
"dataset": [{
"seriesname": "Ice Cream",
//Showing regression line for this dataset
"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": " ",
"alpha": "25"
}, {
"startvalue": "23",
"endvalue": "32",
"istrendzone": "1",
"alpha": "0",
"displayvalue": "Very cold"
}, {
"startvalue": "32",
"endvalue": "50",
"istrendzone": "1",
"displayvalue": " ",
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>``````

Given below is a brief description of the attributes used to set the mode and customize regression lines:

Attribute Name Description

`showYOnX`

It is used to specify the mode in which a regression line will be drawn. Setting this attribute to `0` will draw the regression line in X on Y mode , setting it to `1` (default) will draw the regression line in Y on X mode. This attribute belongs to the `dataset` object.

`regressionLineColor`

It is used to specify the hex code of the color that will be used to draw the regression line.

`regressionLineThickness`

It is used to specify the thickness of the regression line.

`regressionLineAlpha`

It is used to specify the transparency of the regression line. This attribute takes values between `0` (transparent) and `100` (opaque).

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 and 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 and b=(n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σy² – (Σy)²).

Top