Connect Dots in a scatter chart

Connect dots in scatter charts using drawLine

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- In charts with numeric x-axis (XY Plot or Scatter, Bubble), you can display Vertical Zero Plane in a chart. Attributes: # showVZeroPlane # vZeroPlaneColor # vZeroPlaneAlpha # vZeroPlaneThickness -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var profitChart = new FusionCharts({
        type: 'scatter',
        renderAt: 'chart-container',
        id: 'myChart',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Old Stock Clearance",
                    "subcaption": "Price Vs Profit",
                    "yaxisname": "Price (In USD)",
                    "xaxisname": "Profit (In %)",
                    "xaxismaxvalue": "40",
                    "xaxisminvalue": "-20",
                    "yaxismaxvalue": "1000",
                    "xnumbersuffix": "%",
                    "ynumberprefix": "$",

                //Vertical zero plane          
                "showVZeroPlane": "0",
                    "vZeroPlaneColor": "#cc3300",
                    "vZeroPlaneThickness": "3",
                    "vZeroPlaneAlpha": "90",

                //Theme
                "theme": "fint"
            },
                "dataset": [{
                "drawline": "1",
                    "seriesname": "Televisions",
                    "color": "#6baa01",
                    "anchorsides": "3",
                    "anchorradius": "4",
                    "anchorbgcolor": "#6baa01",
                    "anchorbordercolor": "#6baa01",
                    "data": [{
                    "id": "TV_1",
                        "x": "-9.89",
                        "y": "642"
                }, {
                    "id": "TV_2",
                        "x": "21.59",
                        "y": "947"
                }, {
                    "id": "TV_3",
                        "x": "-8.8",
                        "y": "433"
                }, {
                    "id": "TV_4",
                        "x": "-10.88",
                        "y": "750"
                }, {
                    "id": "TV_5",
                        "x": "5.43",
                        "y": "593"
               ...