Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

FusionCharts will load here..
{ "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": "° 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"
                }
            ]
        }
    ]
}
<html>
<head>
<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">
  FusionCharts.ready(function(){
    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": " ",
                "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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<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:

FusionCharts will load here..
{ "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": " ",
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<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">
  FusionCharts.ready(function(){
    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": " ",
                "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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<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