Choose an item

Select-scatter Chart

This chart type belongs to PowerCharts XT.

The select-scatter chart is a special type of chart that allows users to visually select a subset of data from the given data points. Essentially, it is an extension of the XY plot chart (scatter chart) with the added functionality of selecting any number of points on the chart and returning them to the server, or JavaScript functions, for further processing.

This can be used for a variety of purposes, where you want your users to visually select data from the scatter chart. As an example, we will plot a select-scatter chart to show the products sold and the price points earned, for televisions and cell phones at Harry's SuperMart in one week.

To create a select-scatter chart follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a select-scatter chart, set selectscatter.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of select-scatter chart.

The select-scatter chart thus created looks like this:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Products Sold vs. Price points",
        "subcaption": "Harry's SuperMart - Last Week",
        "yaxisname": "Quantity Sold",
        "xaxisname": "Price(In US $)",
        "xaxismaxvalue": "1000",
        "xaxisminvalue": "100",
        "yaxismaxvalue": "200",
        "xnumberprefix": "$",
        "ynumbersuffix": " units",
        "showcanvasborder": "1",
        "canvasborderthickness": "0.4",
        "canvasborderalpha": "50",
        "showXAxisLine": "0",
        "showformbtn": "1",
        "formAction": "#",
        "submitdataasxml": "1"
    },
    "categories": [
        {
            "verticallinecolor": "666666",
            "verticallinethickness": "1",
            "alpha": "40",
            "category": [
                {
                    "label": "$100",
                    "x": "100",
                    "showverticalline": "0"
                },
                {
                    "label": "$200",
                    "x": "200",
                    "showverticalline": "1"
                },
                {
                    "label": "$300",
                    "x": "300",
                    "showverticalline": "1"
                },
                {
                    "label": "$400",
                    "x": "400",
                    "showverticalline": "1"
                },
                {
                    "label": "$500",
                    "x": "500",
                    "showverticalline": "1"
                },
                {
                    "label": "$600",
                    "x": "600",
                    "showverticalline": "1"
                },
                {
                    "label": "$700",
                    "x": "700",
                    "showverticalline": "1"
                },
                {
                    "label": "$800",
                    "x": "800",
                    "showverticalline": "1"
                },
                {
                    "label": "$900",
                    "x": "900",
                    "showverticalline": "1"
                },
                {
                    "label": "$1000",
                    "x": "1000",
                    "showverticalline": "0"
                }
            ]
        }
    ],
    "dataset": [
        {
            "drawline": "0",
            "seriesname": "Televisions",
            "color": "#6baa01",
            "anchorsides": "3",
            "anchorradius": "4",
            "anchorbgcolor": "#6baa01",
            "anchorbordercolor": "#6baa01",
            "data": [
                {
                    "id": "TV_1",
                    "y": "559",
                    "x": "714"
                },
                {
                    "id": "TV_2",
                    "y": "293",
                    "x": "988"
                },
                {
                    "id": "TV_3",
                    "y": "231",
                    "x": "970"
                },
                {
                    "id": "TV_4",
                    "y": "528",
                    "x": "142"
                },
                {
                    "id": "TV_5",
                    "y": "95",
                    "x": "800"
                },
                {
                    "id": "TV_6",
                    "y": "515",
                    "x": "813"
                },
                {
                    "id": "TV_7",
                    "y": "444",
                    "x": "928"
                },
                {
                    "id": "TV_8",
                    "y": "592",
                    "x": "238"
                },
                {
                    "id": "TV_9",
                    "y": "229",
                    "x": "959"
                },
                {
                    "id": "TV_10",
                    "y": "238",
                    "x": "521"
                },
                {
                    "id": "TV_11",
                    "y": "285",
                    "x": "222"
                },
                {
                    "id": "TV_12",
                    "y": "524",
                    "x": "863"
                },
                {
                    "id": "TV_13",
                    "y": "422",
                    "x": "820"
                },
                {
                    "id": "TV_14",
                    "y": "344",
                    "x": "894"
                },
                {
                    "id": "TV_15",
                    "y": "510",
                    "x": "800"
                },
                {
                    "id": "TV_16",
                    "y": "132",
                    "x": "785"
                },
                {
                    "id": "TV_17",
                    "y": "381",
                    "x": "214"
                },
                {
                    "id": "TV_18",
                    "y": "210",
                    "x": "961"
                },
                {
                    "id": "TV_19",
                    "y": "496",
                    "x": "575"
                },
                {
                    "id": "TV_20",
                    "y": "330",
                    "x": "847"
                },
                {
                    "id": "TV_21",
                    "y": "436",
                    "x": "893"
                },
                {
                    "id": "TV_22",
                    "y": "406",
                    "x": "157"
                },
                {
                    "id": "TV_23",
                    "y": "125",
                    "x": "349"
                },
                {
                    "id": "TV_24",
                    "y": "450",
                    "x": "818"
                },
                {
                    "id": "TV_25",
                    "y": "455",
                    "x": "615"
                },
                {
                    "id": "TV_26",
                    "y": "328",
                    "x": "256"
                },
                {
                    "id": "TV_27",
                    "y": "188",
                    "x": "460"
                },
                {
                    "id": "TV_28",
                    "y": "565",
                    "x": "350"
                },
                {
                    "id": "TV_29",
                    "y": "149",
                    "x": "582"
                },
                {
                    "id": "TV_30",
                    "y": "425",
                    "x": "970"
                }
            ]
        },
        {
            "seriesname": "Cell Phones",
            "color": "#f8bd19",
            "anchorsides": "4",
            "anchorradius": "4",
            "anchorbgcolor": "#f8bd19",
            "anchorbordercolor": "#f8bd19",
            "data": [
                {
                    "id": "Mob_1",
                    "y": "335",
                    "x": "156"
                },
                {
                    "id": "Mob_2",
                    "y": "339",
                    "x": "927"
                },
                {
                    "id": "Mob_3",
                    "y": "328",
                    "x": "847"
                },
                {
                    "id": "Mob_4",
                    "y": "1",
                    "x": "177"
                },
                {
                    "id": "Mob_5",
                    "y": "246",
                    "x": "175"
                },
                {
                    "id": "Mob_6",
                    "y": "368",
                    "x": "441"
                },
                {
                    "id": "Mob_7",
                    "y": "146",
                    "x": "200"
                },
                {
                    "id": "Mob_8",
                    "y": "347",
                    "x": "482"
                },
                {
                    "id": "Mob_9",
                    "y": "1",
                    "x": "463"
                },
                {
                    "id": "Mob_10",
                    "y": "63",
                    "x": "440"
                },
                {
                    "id": "Mob_11",
                    "y": "77",
                    "x": "211"
                },
                {
                    "id": "Mob_12",
                    "y": "108",
                    "x": "824"
                },
                {
                    "id": "Mob_13",
                    "y": "44",
                    "x": "850"
                },
                {
                    "id": "Mob_14",
                    "y": "77",
                    "x": "712"
                },
                {
                    "id": "Mob_15",
                    "y": "15",
                    "x": "199"
                },
                {
                    "id": "Mob_16",
                    "y": "333",
                    "x": "836"
                },
                {
                    "id": "Mob_17",
                    "y": "31",
                    "x": "482"
                },
                {
                    "id": "Mob_18",
                    "y": "90",
                    "x": "604"
                },
                {
                    "id": "Mob_19",
                    "y": "294",
                    "x": "716"
                },
                {
                    "id": "Mob_20",
                    "y": "241",
                    "x": "870"
                },
                {
                    "id": "Mob_21",
                    "y": "258",
                    "x": "421"
                },
                {
                    "id": "Mob_22",
                    "y": "186",
                    "x": "456"
                },
                {
                    "id": "Mob_23",
                    "y": "255",
                    "x": "327"
                },
                {
                    "id": "Mob_24",
                    "y": "203",
                    "x": "995"
                },
                {
                    "id": "Mob_25",
                    "y": "35",
                    "x": "792"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Products Sold vs. Price points" subcaption="Harry&#39;s SuperMart - Last Week" yaxisname="Quantity Sold" xaxisname="Price(In US $)" xaxismaxvalue="1000" xaxisminvalue="100" yaxismaxvalue="200" xnumberprefix="$" ynumbersuffix=" units" showcanvasborder="1" canvasborderthickness="0.4" canvasborderalpha="50" showxaxisline="0" showformbtn="1" formaction="#" submitdataasxml="1">
    <categories verticallinecolor="666666" verticallinethickness="1" alpha="40">
        <category label="$100" x="100" showverticalline="0" />
        <category label="$200" x="200" showverticalline="1" />
        <category label="$300" x="300" showverticalline="1" />
        <category label="$400" x="400" showverticalline="1" />
        <category label="$500" x="500" showverticalline="1" />
        <category label="$600" x="600" showverticalline="1" />
        <category label="$700" x="700" showverticalline="1" />
        <category label="$800" x="800" showverticalline="1" />
        <category label="$900" x="900" showverticalline="1" />
        <category label="$1000" x="1000" showverticalline="0" />
    </categories>
    <dataset drawline="0" seriesname="Televisions" color="#6baa01" anchorsides="3" anchorradius="4" anchorbgcolor="#6baa01" anchorbordercolor="#6baa01">
        <set id="TV_1" y="559" x="714" />
        <set id="TV_2" y="293" x="988" />
        <set id="TV_3" y="231" x="970" />
        <set id="TV_4" y="528" x="142" />
        <set id="TV_5" y="95" x="800" />
        <set id="TV_6" y="515" x="813" />
        <set id="TV_7" y="444" x="928" />
        <set id="TV_8" y="592" x="238" />
        <set id="TV_9" y="229" x="959" />
        <set id="TV_10" y="238" x="521" />
        <set id="TV_11" y="285" x="222" />
        <set id="TV_12" y="524" x="863" />
        <set id="TV_13" y="422" x="820" />
        <set id="TV_14" y="344" x="894" />
        <set id="TV_15" y="510" x="800" />
        <set id="TV_16" y="132" x="785" />
        <set id="TV_17" y="381" x="214" />
        <set id="TV_18" y="210" x="961" />
        <set id="TV_19" y="496" x="575" />
        <set id="TV_20" y="330" x="847" />
        <set id="TV_21" y="436" x="893" />
        <set id="TV_22" y="406" x="157" />
        <set id="TV_23" y="125" x="349" />
        <set id="TV_24" y="450" x="818" />
        <set id="TV_25" y="455" x="615" />
        <set id="TV_26" y="328" x="256" />
        <set id="TV_27" y="188" x="460" />
        <set id="TV_28" y="565" x="350" />
        <set id="TV_29" y="149" x="582" />
        <set id="TV_30" y="425" x="970" />
    </dataset>
    <dataset seriesname="Cell Phones" color="#f8bd19" anchorsides="4" anchorradius="4" anchorbgcolor="#f8bd19" anchorbordercolor="#f8bd19">
        <set id="Mob_1" y="335" x="156" />
        <set id="Mob_2" y="339" x="927" />
        <set id="Mob_3" y="328" x="847" />
        <set id="Mob_4" y="1" x="177" />
        <set id="Mob_5" y="246" x="175" />
        <set id="Mob_6" y="368" x="441" />
        <set id="Mob_7" y="146" x="200" />
        <set id="Mob_8" y="347" x="482" />
        <set id="Mob_9" y="1" x="463" />
        <set id="Mob_10" y="63" x="440" />
        <set id="Mob_11" y="77" x="211" />
        <set id="Mob_12" y="108" x="824" />
        <set id="Mob_13" y="44" x="850" />
        <set id="Mob_14" y="77" x="712" />
        <set id="Mob_15" y="15" x="199" />
        <set id="Mob_16" y="333" x="836" />
        <set id="Mob_17" y="31" x="482" />
        <set id="Mob_18" y="90" x="604" />
        <set id="Mob_19" y="294" x="716" />
        <set id="Mob_20" y="241" x="870" />
        <set id="Mob_21" y="258" x="421" />
        <set id="Mob_22" y="186" x="456" />
        <set id="Mob_23" y="255" x="327" />
        <set id="Mob_24" y="203" x="995" />
        <set id="Mob_25" y="35" x="792" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'selectscatter',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            //Theme
            "theme": "fusion",
            "caption": "Products Sold vs. Price points",
            "subcaption": "Harry's SuperMart - Last Week",
            "yaxisname": "Quantity Sold",
            "xaxisname": "Price(In US $)",
            "xaxismaxvalue": "1000",
            "xaxisminvalue": "100",
            "yaxismaxvalue": "200",
            "xnumberprefix": "$",
            "ynumbersuffix": " units",
            "showcanvasborder": "1",
            "canvasborderthickness": "0.4",
            "canvasborderalpha": "50",
            "showXAxisLine": "0",
            "showformbtn": "1",
            "formAction": "#",
            "submitdataasxml": "1"
        },
        "categories": [{
            "verticallinecolor": "666666",
            "verticallinethickness": "1",
            "alpha": "40",
            "category": [{
                "label": "$100",
                "x": "100",
                "showverticalline": "0"
            }, {
                "label": "$200",
                "x": "200",
                "showverticalline": "1"
            }, {
                "label": "$300",
                "x": "300",
                "showverticalline": "1"
            }, {
                "label": "$400",
                "x": "400",
                "showverticalline": "1"
            }, {
                "label": "$500",
                "x": "500",
                "showverticalline": "1"
            }, {
                "label": "$600",
                "x": "600",
                "showverticalline": "1"
            }, {
                "label": "$700",
                "x": "700",
                "showverticalline": "1"
            }, {
                "label": "$800",
                "x": "800",
                "showverticalline": "1"
            }, {
                "label": "$900",
                "x": "900",
                "showverticalline": "1"
            }, {
                "label": "$1000",
                "x": "1000",
                "showverticalline": "0"
            }]
        }],
        "dataset": [{
            "drawline": "0",
            "seriesname": "Televisions",
            "color": "#6baa01",
            "anchorsides": "3",
            "anchorradius": "4",
            "anchorbgcolor": "#6baa01",
            "anchorbordercolor": "#6baa01",
            "data": [{
                "id": "TV_1",
                "y": "559",
                "x": "714"
            }, {
                "id": "TV_2",
                "y": "293",
                "x": "988"
            }, {
                "id": "TV_3",
                "y": "231",
                "x": "970"
            }, {
                "id": "TV_4",
                "y": "528",
                "x": "142"
            }, {
                "id": "TV_5",
                "y": "95",
                "x": "800"
            }, {
                "id": "TV_6",
                "y": "515",
                "x": "813"
            }, {
                "id": "TV_7",
                "y": "444",
                "x": "928"
            }, {
                "id": "TV_8",
                "y": "592",
                "x": "238"
            }, {
                "id": "TV_9",
                "y": "229",
                "x": "959"
            }, {
                "id": "TV_10",
                "y": "238",
                "x": "521"
            }, {
                "id": "TV_11",
                "y": "285",
                "x": "222"
            }, {
                "id": "TV_12",
                "y": "524",
                "x": "863"
            }, {
                "id": "TV_13",
                "y": "422",
                "x": "820"
            }, {
                "id": "TV_14",
                "y": "344",
                "x": "894"
            }, {
                "id": "TV_15",
                "y": "510",
                "x": "800"
            }, {
                "id": "TV_16",
                "y": "132",
                "x": "785"
            }, {
                "id": "TV_17",
                "y": "381",
                "x": "214"
            }, {
                "id": "TV_18",
                "y": "210",
                "x": "961"
            }, {
                "id": "TV_19",
                "y": "496",
                "x": "575"
            }, {
                "id": "TV_20",
                "y": "330",
                "x": "847"
            }, {
                "id": "TV_21",
                "y": "436",
                "x": "893"
            }, {
                "id": "TV_22",
                "y": "406",
                "x": "157"
            }, {
                "id": "TV_23",
                "y": "125",
                "x": "349"
            }, {
                "id": "TV_24",
                "y": "450",
                "x": "818"
            }, {
                "id": "TV_25",
                "y": "455",
                "x": "615"
            }, {
                "id": "TV_26",
                "y": "328",
                "x": "256"
            }, {
                "id": "TV_27",
                "y": "188",
                "x": "460"
            }, {
                "id": "TV_28",
                "y": "565",
                "x": "350"
            }, {
                "id": "TV_29",
                "y": "149",
                "x": "582"
            }, {
                "id": "TV_30",
                "y": "425",
                "x": "970"
            }]
        }, {
            "seriesname": "Cell Phones",
            "color": "#f8bd19",
            "anchorsides": "4",
            "anchorradius": "4",
            "anchorbgcolor": "#f8bd19",
            "anchorbordercolor": "#f8bd19",
            "data": [{
                "id": "Mob_1",
                "y": "335",
                "x": "156"
            }, {
                "id": "Mob_2",
                "y": "339",
                "x": "927"
            }, {
                "id": "Mob_3",
                "y": "328",
                "x": "847"
            }, {
                "id": "Mob_4",
                "y": "1",
                "x": "177"
            }, {
                "id": "Mob_5",
                "y": "246",
                "x": "175"
            }, {
                "id": "Mob_6",
                "y": "368",
                "x": "441"
            }, {
                "id": "Mob_7",
                "y": "146",
                "x": "200"
            }, {
                "id": "Mob_8",
                "y": "347",
                "x": "482"
            }, {
                "id": "Mob_9",
                "y": "1",
                "x": "463"
            }, {
                "id": "Mob_10",
                "y": "63",
                "x": "440"
            }, {
                "id": "Mob_11",
                "y": "77",
                "x": "211"
            }, {
                "id": "Mob_12",
                "y": "108",
                "x": "824"
            }, {
                "id": "Mob_13",
                "y": "44",
                "x": "850"
            }, {
                "id": "Mob_14",
                "y": "77",
                "x": "712"
            }, {
                "id": "Mob_15",
                "y": "15",
                "x": "199"
            }, {
                "id": "Mob_16",
                "y": "333",
                "x": "836"
            }, {
                "id": "Mob_17",
                "y": "31",
                "x": "482"
            }, {
                "id": "Mob_18",
                "y": "90",
                "x": "604"
            }, {
                "id": "Mob_19",
                "y": "294",
                "x": "716"
            }, {
                "id": "Mob_20",
                "y": "241",
                "x": "870"
            }, {
                "id": "Mob_21",
                "y": "258",
                "x": "421"
            }, {
                "id": "Mob_22",
                "y": "186",
                "x": "456"
            }, {
                "id": "Mob_23",
                "y": "255",
                "x": "327"
            }, {
                "id": "Mob_24",
                "y": "203",
                "x": "995"
            }, {
                "id": "Mob_25",
                "y": "35",
                "x": "792"
            }]
        }]
    },
    events: {
        "beforeRender": function(evtObj, argObj) {
            // creating div for controllers
            var controllers = document.createElement('div');
            controllers.setAttribute('id', 'controllers');
            controllers.style.display = "inline-block";
            controllers.innerHTML = "<div id='tableView-1' style='width:500px;display:none;margin-left:0px;max-height:250px;overflow:scroll;border: 1px solid #CCCCCC;margin: 3px;float: left;display:none; color: #666666;font-family:'Arial','Helvetica';font-size: 12px;'></div>";
            //Display container div and write table
            argObj.container.parentNode.insertBefore(controllers, argObj.container.nextSibling);
            /*
             * getDataFromChart method prepares the
             * tabular string from selection and
             * write in a div and display it.
             */
            evtObj.sender.getDataFromChart = function() {
                var i,
                    j,
                    str,
                    ds = "",
                    dataArr,
                    flagData = false,
                    objDataset = evtObj.sender.getJSONData && evtObj.sender.getJSONData().dataset,
                    tableContainer = document.getElementById("tableView-1");

                //Form tabular string
                str = "<div style='margin:3px;font-family:'Arial','Helvetica';font-size: 12px;'> Data is returned by the chart as Array. The data is converted into tabular format using JavaScript.</div>";
                str += '<table border="1" cellpadding="1" cellspacing="0" bordercolor="#ffffff" width="100%">';
                for (i in objDataset) {
                    dataArr = objDataset[i].data;
                    if (dataArr.length > 0) {
                        flagData = true;
                        str += '    <tr>';
                        str += '        <td width="20%" style="font-weight: bold;font-size: 14px;vertical-align: top;text-align:right;padding: 3px" color="' + objDataset[i].color + '">' + objDataset[i].seriesname + '</td>';

                        ds = '<table border="1" cellpadding="1" cellspacing="0" bordercolor="' + objDataset[i].color + '" width="100%">';
                        ds += '<tr>';
                        ds += '<td width="20%" style="font-weight: bold;font-size: 12px;background-color: #EEEEEE;text-align:center"> Id</td>';
                        ds += '<td width="40%" style="font-weight: bold;font-size: 12px;background-color: #EEEEEE;text-align:center"> Price (in USD)</td>';
                        ds += '<td width="40%" style="font-weight: bold;font-size: 12px;background-color: #EEEEEE;text-align:center"> Quantity Sold</td>';
                        ds += '</tr>';
                        for (j = 0; j < dataArr.length; j++) {
                            var id = String(dataArr[j].id),
                                price = String(dataArr[j].x),
                                qty = String(dataArr[j].y);

                            ds += '<tr>';
                            ds += '<td width="20%" align="center">' + id + '</td>';
                            ds += '<td width="40%" align="center">&#36;' + price + ' </td>';
                            ds += '<td width="40%" align="center">' + qty + ' units</td>';
                            ds += '</tr>';
                        }
                        ds += '</table>';
                        str += '        <td width="80%" style="padding: 3px">' + ds + '</td>';
                        str += '    </tr>';
                    }

                }
                str += '</table>';
                if (!flagData) {
                    str = "No Data Selected";
                }
                tableContainer.style.display = "block";
                tableContainer.innerHTML = str;
            }
        },
        "beforeDataSubmit": function(evtObj, argObj) {
			evtObj.sender.getDataFromChart();

        },
        "dataRestored": function(evtObj, argObj) {
            document.getElementById("tableView-1").style.display = "none";
            document.getElementById("tableView-1").innerHTML = "";
        }
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the select-scatter chart.

Select Set of Points

To select a set of points, you can drag and draw a rectangle over the chart. All the points within this rectangle are now selected points. Once the rectangle has been drawn, you can resize it to adjust more points. The resize handlers let you do so.

You can drag, resize, or delete any select rectangles individually. To delete any rectangle, you can click the X at the top right corner of the selection box.

After selection click the Submit button. This button sends the JSON/XML data as a form to the server-side script. In the above sample, the JSON data for the selected points - the price and quantity of each tv/cell phone unit - have been displayed in a table. Click the Restore button to bring back the chart to its original state.

Select set of points

Get Selected Data

After you select a subset of data points in a select-scatter chart and click Submit, the selected data is sent to a server-side script, or a JavaScript function, for further processing. Here you will see how the updated data is read using the JavaScript functions present on the same page.

After the chart is rendered, to access the chart data as an array, the following function is called:

//Get a reference to our chart
var chartObject= FusionCharts("chartId");

//Now get the data as array.
var arrData = chartObject.getData();

Get a reference to the chart object using the FusionCharts item reference method. Next, to get the data as an array, call the getData() method of the chart. This method returns the data of the chart in a two-dimensional array.

Given below is a brief description of the structure of this array:

[1,0] - Dataset 1 - This cell contains the dataset id Selected data point id for dataset 1 Selected data point id for dataset 1 Selected data point id for dataset 1 Selected data point id for this dataset…
[2,0] - Dataset 2 - This cell contains the dataset id Selected data point id for dataset 2 Selected data point id for dataset 2 Selected data point id for dataset 2 Selected data point id for this dataset…
[n,0] - Dataset n - This cell contains the dataset id Selected data point id for dataset n Selected data point id for dataset n Selected data point id for dataset n Selected data point id for this dataset…

Now, from this chart, if you select three data points from the Televisions dataset and five from the Cell Phones dataset and then return the data of chart as an array using the getData() method of the chart object, the tabular mapping of the array returned can be traced as under:

Televisions TV_1 TV_2 TV_3
Cell Phones Mob_1 Mob_2 Mob_3 Mob_4 Mob_5

Mapping then to the JSON data, gives:

  • Each dataset is returned as a single row in the array

  • The first column of each row contains the dataset index

  • The rest of the columns contain the ids of the selected points of that dataset

  • The length of each row's array (horizontally) can be different, depending on the number of data points chosen for that dataset

Read JSON data from the Chart

The chart also provides a method to read the selected data in the JSON/XML format. This method is named as the getJSONData() and can be invoked as under:

//Get a reference to our chart
var chartObject= FusionCharts("SelectChart");

//Get the data from chart
var jsonRtn = chartObject.getJSONData();

//Show it to user in alert box
alert(jsonRtn);

The function getJSONData() returns the selected data. This function is also used to retrieve the complete data from the chart. To get the complete data from the chart you need to pass false as a parameter to the function. For example, var jsonRtn = chartObject.getJSONData(false);

A select-scatter chart configured to show how the selected data is retrieved and updated looks like this:

FusionCharts will load here..

Click here to edit the select-scatter chart.

Now, let's customize the appearance and properties of drawing regression lines in the select-scatter chart.

Draw Regression Lines

A regression line, rendered as a straight line, is used to show the trend of y values for the x values or the trend of x values for 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.

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 deviations of each data point from the line (if a point lies on the fitted line exactly, then its vertical deviation is 0). As the deviations are first squared and then summed, there are no cancellations between positive and negative values.

To show the regression line, set the showRegressionLine attribute to 1. Setting it to 0 (default) will hide the regression line.

Refer to the code given below:

{
    "chart": {
        "showRegressionLine": "1"
    }
}

A select-scatter chart rendered with a regression line is shown below:

FusionCharts will load here..

Click here to edit the select-scatter chart.

Modes of Regression

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

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

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

In the select-scatter chart shown above, the regression line is drawn in the Y on X mode.

The same sample with the regression line drawn using the X on Y mode will be shown below. To set the mode and customize regression lines, follow the steps given below:

  • Set the showYOnX attribute to 1 specify the mode in which the regression line will be drawn.

  • Specify the hex color code of the regression line using the regressionLineColor attribute.

  • Set the thickness of the regression line using regressionLineThickness attribute.

  • Set the transparency (between 0 to 100) of the regression line using regressionLineAlpha attribute.

Refer to the code given below:

{
    "chart": {
        "showYOnX": "0",
        "regressionLineColor": "f4cb00",
        "regressionLineThickness": "3",
        "regressionLineAlpha": "70"
    }
}

The chart looks like:

FusionCharts will load here..

Click here to edit the select-scatter chart.

The formula 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)² ).