Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Drag-able charts are special types of charts that allow you to visually update data on the chart and understand how the estimated data values affect the whole chart.

In this section, you will be shown how you can:

Creating a Drag-able Column 2D Chart

A drag-able column 2D chart created to plot the actual and estimated inventory status for the top five food items at Bakersfield Central looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Inventory status - Bakersfield Central", "subCaption": "Top 5 Food items", "xAxisName": "Food Item", "yAxisName": "No. of Units", "theme": "fint" }, "categories": [ { "category": [ { "label": "Poultry" }, { "label": "Rice" }, { "label": "Peanut Butter" }, { "label": "Salmon" }, { "label": "Cereal" } ] } ], "dataset": [ { "seriesname": "Available Stock", "allowDrag": "0", "data": [ { "value": "6000" }, { "value": "9500" }, { "value": "11900" }, { "value": "8000" }, { "value": "9700" } ] }, { "seriesname": "Estimated Demand", "dashed": "1", "data": [ { "value": "19000" }, { "value": "16500" }, { "value": "14300" }, { "value": "10000" }, { "value": "9800" } ] } ] }
{
    "chart": {
        "caption": "Inventory status - Bakersfield Central",
        "subCaption": "Top 5 Food items",
        "xAxisName": "Food Item",
        "yAxisName": "No. of Units",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Poultry"
                },
                {
                    "label": "Rice"
                },
                {
                    "label": "Peanut Butter"
                },
                {
                    "label": "Salmon"
                },
                {
                    "label": "Cereal"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Available Stock",
            "allowDrag": "0",
            "data": [
                {
                    "value": "6000"
                },
                {
                    "value": "9500"
                },
                {
                    "value": "11900"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "9700"
                }
            ]
        },
        {
            "seriesname": "Estimated Demand",
            "dashed": "1",
            "data": [
                {
                    "value": "19000"
                },
                {
                    "value": "16500"
                },
                {
                    "value": "14300"
                },
                {
                    "value": "10000"
                },
                {
                    "value": "9800"
                }
            ]
        }
    ]
}
<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: 'dragcolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Inventory status - Bakersfield Central",
            "subCaption": "Top 5 Food items",
            "xAxisName": "Food Item",
            "yAxisName": "No. of Units",
            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Poultry"
            }, {
                "label": "Rice"
            }, {
                "label": "Peanut Butter"
            }, {
                "label": "Salmon"
            }, {
                "label": "Cereal"
            }]
        }],
        "dataset": [{
            "seriesname": "Available Stock",
            "allowDrag": "0",
            "data": [{
                "value": "6000"
            }, {
                "value": "9500"
            }, {
                "value": "11900"
            }, {
                "value": "8000"
            }, {
                "value": "9700"
            }]
        }, {
            "seriesname": "Estimated Demand",
            "dashed": "1",
            "data": [{
                "value": "19000"
            }, {
                "value": "16500"
            }, {
                "value": "14300"
            }, {
                "value": "10000"
            }, {
                "value": "9800"
            }]
        }]
    },
    events: {
        "beforeRender": function(evtObj, argObj) {
            // creating div for controllers
            var tableCont = document.createElement('div'),
                thStyle = "background-color: #008ee4;color: #fff; border: 1px solid #6baa01;padding: 10px 5px;min-width: 70px;text-align: center",
                tdStyle = "background-color: #fff;color: #6baa01; border: 1px solid #6baa01; padding: 10px 5px;min-width: 70px;text-align: center",
                tdStyle2 = "background-color: #6baa01;color: #fff; border: 1px solid #6baa01; padding: 10px 5px;min-width: 70px;text-align: center",
                strHTML = "";
            tableCont.setAttribute('id', 'tableCont');
            tableCont.setAttribute('style', 'padding-left: 10px; width: 470px;');
            strHTML = "<table style='margin: 25px auto;border-collapse: collapse;border: 1px solid;border-bottom: 2px solid #6baa01'><tr><td style='border: 1px solid #fff;padding: 10px 5px;min-width: 70px;text-align: center'></td><th style='" + thStyle + "'>Poultry</th><th style='" + thStyle + "'>Rice</th><th style='" + thStyle + "'>Peanut Butter</th><th style='" + thStyle + "'>Salmon</th><th style='" + thStyle + "'>Cereal</th></tr><tr><td style='" + tdStyle2 + "'>Estimated Demand</td><td id='est-1' style='" + tdStyle + "'>19000</td><td id='est-2' style='" + tdStyle + "'>16500</td><td id='est-3' style='" + tdStyle + "'>14300</td><td id='est-4' style='" + tdStyle + "'>10000</td><td id='est-5' style='" + tdStyle + "'>9800</td></tr></table>";
            tableCont.innerHTML = strHTML;
            //Display container div and write table
            argObj.container.parentNode.insertBefore(tableCont, argObj.container.nextSibling);
        },
        'dataplotDragEnd': function(evt, arg) {
            var dtIndx = arg && arg.dataIndex,
                val = arg && parseInt(arg.endValue, 10);
            document.getElementById('est-' + dtIndx).innerHTML = val;
        },
        'dataRestored': function(evtObj) {
            var estimatedOrigValues = ["19000", "16500", "14300", "10000", "9800"],
                numVals = estimatedOrigValues.length,
                i,
                val;
            for (i = 0; i < numVals; i += 1) {
                val = estimatedOrigValues[i];
                document.getElementById('est-' + (i + 1)).innerHTML = val;
            }
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, the data plots representing the estimated value are drag-able.

Given below is a brief description of the attributes used to create a drag-able column 2D chart:

Attribute Name Description

allowDrag

It is used to specify whether the data plots representing a dataset will be drag-able. Setting this attribute to 0 will disable the data plots from being drag-able, setting it to 1 (default) will enable them to be drag-able. This attribute belongs to the dataset object and makes all data plots for a dataset drag-able.

The above sample also shows an external table with the values from the ‘Estimated Demand’ dataset. As soon as a value is updated on the chart, the table gets updated as well. This is done by retrieving the updated values using the dataPlotDragEnd event.

Observe that there is also a Restore button on the chart. When the restore button is clicked, all data is reset to its original values. This is done using the dataRestored event.

Given below is a brief description of the events used to configure drag-able charts:

Event Name Description

dataplotDragEnd

It is raised by the drag-able chart when you have finished dragging the data plots to update them.

dataRestored

It is raised by the drag-able chart when the Restore button is clicked. When this event is fired all updated values are cleared and the data is reset to its original values.

Creating a Drag-able Line 2D Chart

A drag-able line 2D chart created to plot the quarterly sales for Apple and Samsung looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Unit Sales - Apple vs Samsung", "subCaption": "Drag anchors to change estimated values", "subCaptionFontSize": "12", "xAxisName": "Quarter", "yAxisName": "No. of Units", "theme": "fint" }, "categories": [ { "category": [ { "label": "Q1" }, { "label": "Q2" }, { "label": "Q3(E)" }, { "label": "Q4(E)" } ] } ], "dataset": [ { "seriesname": "Apple", "valuePosition": "ABOVE", "allowDrag": "0", "data": [ { "value": "1200" }, { "value": "1500", "dashed": "1" }, { "value": "1300", "allowDrag": "1", "dashed": "1" }, { "value": "900", "allowDrag": "1", "tooltext": "Predicted sales $value units" } ] }, { "seriesname": "Samsung", "allowDrag": "0", "data": [ { "value": "600" }, { "value": "850", "dashed": "1" }, { "value": "1000", "allowDrag": "1", "dashed": "1" }, { "value": "1200", "allowDrag": "1", "tooltext": "Predicted sales $value units" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Unit Sales - Apple vs Samsung",
        "subCaption": "Drag anchors to change estimated values",
        "subCaptionFontSize": "12",
        "xAxisName": "Quarter",
        "yAxisName": "No. of Units",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3(E)"
                },
                {
                    "label": "Q4(E)"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Apple",
            "valuePosition": "ABOVE",
            "allowDrag": "0",
            "data": [
                {
                    "value": "1200"
                },
                {
                    "value": "1500",
                    "dashed": "1"
                },
                {
                    "value": "1300",
                    "allowDrag": "1",
                    "dashed": "1"
                },
                {
                    "value": "900",
                    "allowDrag": "1",
                    "tooltext": "Predicted sales $value units"
                }
            ]
        },
        {
            "seriesname": "Samsung",
            "allowDrag": "0",
            "data": [
                {
                    "value": "600"
                },
                {
                    "value": "850",
                    "dashed": "1"
                },
                {
                    "value": "1000",
                    "allowDrag": "1",
                    "dashed": "1"
                },
                {
                    "value": "1200",
                    "allowDrag": "1",
                    "tooltext": "Predicted sales $value units"
                }
            ]
        }
    ]
}
<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: 'dragline',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Unit Sales - Apple vs Samsung",
            "subCaption": "Drag anchors to change estimated values",
            "subCaptionFontSize": "12",
            "xAxisName": "Quarter",
            "yAxisName": "No. of Units",
            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Q1"
            }, {
                "label": "Q2"
            }, {
                "label": "Q3(E)"
            }, {
                "label": "Q4(E)"
            }]
        }],
        "dataset": [{
            "seriesname": "Apple",
            "valuePosition": "ABOVE",
            "allowDrag": "0",
            "data": [{
                "value": "1200"
            }, {
                "value": "1500",
                "dashed": "1"
            }, {
                "value": "1300",
                "allowDrag": "1",
                "dashed": "1"
            }, {
                "value": "900",
                "allowDrag": "1",
                "tooltext": "Predicted sales $value units"
            }]
        }, {
            "seriesname": "Samsung",
            "allowDrag": "0",
            "data": [{
                "value": "600"
            }, {
                "value": "850",
                "dashed": "1"
            }, {
                "value": "1000",
                "allowDrag": "1",
                "dashed": "1"
            }, {
                "value": "1200",
                "allowDrag": "1",
                "tooltext": "Predicted sales $value units"
            }]
        }]
    },
    events: {
        'beforeRender': function(event, args) {
            var tableCont = document.createElement('div'),
                strHTML = "",
                thStyle = "background-color: #fece2f;color: #ffffff;border: 1px solid #000;padding: 10px 5px;min-width: 70px;text-align: center;",
                tdStyleApple = "border: 1px solid #000;color: #008ee4;padding: 10px 5px;min-width: 70px;text-align: center;",
                tdStyleSamsung = "border: 1px solid #000;color: #6baa01;padding: 10px 5px;min-width: 70px;text-align: center;",
                rowHeaderApple = " background-color: #008ee4;color: #fff; padding: 10px 5px;",
                rowHeaderSamsung = " background-color: #6baa01;color: #fff; padding: 10px 5px;";
            tableCont.setAttribute('id', 'tableCont');
            tableCont.setAttribute('style', 'padding-left: 10px; width: 470px;');
            strHTML = "<table style='margin: 25px auto;border-collapse: collapse;border: 1px solid;border-bottom: 2px solid;'><tr><td style='border-top: 1px solid #fff; border-left: 1px solid #fff;'></td><th style='" + thStyle + "'>Q1</th><th style='" + thStyle + "'>Q2</th><th style='" + thStyle + "'>Q3(E)</th><th style='" + thStyle + "'>Q4(E)</th></tr><tr><td style='" + rowHeaderApple + "'>Apple</td><td id='1-1' style='" + tdStyleApple + "'>1200</td><td id='1-2' style='" + tdStyleApple + "'>1500</td><td id='1-3' style='" + tdStyleApple + "'>1300</td><td id='1-4' style='" + tdStyleApple + "'>900</td></tr><tr><td style='" + rowHeaderSamsung + "'>Samsung</td><td id='2-1' style='" + tdStyleSamsung + "'>600</td><td id='2-2' style='" + tdStyleSamsung + "'>850</td><td id='2-3' style='" + tdStyleSamsung + "'>1000</td><td id='2-4' style='" + tdStyleSamsung + "'>1200</td></tr></table><p align = 'center'/> (E) indicates Estimated";
            tableCont.innerHTML = strHTML;
            args.container.parentNode.insertBefore(tableCont, args.container.nextSibling);
        },
        'dataplotdragend': function(evt, arg) {
            var dsIndx = arg && arg.datasetIndex,
                dtIndx = arg && arg.dataIndex,
                val = arg && parseInt(arg.endValue, 10);
            document.getElementById(dsIndx + '-' + dtIndx).innerHTML = val;

        },
        'datarestored': function(evtObj) {
            var ds1Values = ["1200", "1500", "1300", "900"],
                ds2Values = ["600", "850", "1000", "1200"],
                update = function(arr, rowNum) {
                    var i = 0,
                        arrLen = arr.length;

                    for (i; i < arrLen; i += 1) {
                        val = arr[i];
                        document.getElementById(rowNum + '-' + (i + 1)).innerHTML = val;
                    }
                };
            update(ds1Values, 1);
            update(ds2Values, 2);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, the anchors representing the sales estimates for Apple and Samsung for Q3 and Q4 are drag-able. Recall that in the above drag-able column 2D chart we have configured all the data plots for one dataset to be drag-able. In this chart, however, we have made only selected data points of all datasets drag-able.

Given below is a brief description of how the allowDrag attribute is used to make selected data points drag-able:

Attribute Name Description

allowDrag

To make selected data points drag-able, this attribute is used with the data object, which belongs to the dataset object. When used with the data object, it makes only that data point for which it is specified drag-able.

Creating a Drag-able Area 2D Chart

A drag-able area 2D chart created to plot the quarterly sales for Apple and Samsung looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Unit Sales - Apple vs Samsung", "subCaption": "Drag anchors to change estimated values", "subCaptionFontSize": "12", "xAxisName": "Quarter", "yAxisName": "No. of Units", "theme": "fint" }, "categories": [ { "category": [ { "label": "Q1" }, { "label": "Q2" }, { "label": "Q3(E)" }, { "label": "Q4(E)" } ] } ], "dataset": [ { "seriesname": "Apple", "valuePosition": "ABOVE", "allowDrag": "0", "data": [ { "value": "1200" }, { "value": "1500", "dashed": "1" }, { "value": "1300", "allowDrag": "1", "dashed": "1" }, { "value": "900", "allowDrag": "1", "tooltext": "Predicted sales $value units" } ] }, { "seriesname": "Samsung", "allowDrag": "0", "data": [ { "value": "600" }, { "value": "850", "dashed": "1" }, { "value": "1000", "allowDrag": "1", "dashed": "1" }, { "value": "1200", "allowDrag": "1", "tooltext": "Predicted sales $value units" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Unit Sales - Apple vs Samsung",
        "subCaption": "Drag anchors to change estimated values",
        "subCaptionFontSize": "12",
        "xAxisName": "Quarter",
        "yAxisName": "No. of Units",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3(E)"
                },
                {
                    "label": "Q4(E)"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Apple",
            "valuePosition": "ABOVE",
            "allowDrag": "0",
            "data": [
                {
                    "value": "1200"
                },
                {
                    "value": "1500",
                    "dashed": "1"
                },
                {
                    "value": "1300",
                    "allowDrag": "1",
                    "dashed": "1"
                },
                {
                    "value": "900",
                    "allowDrag": "1",
                    "tooltext": "Predicted sales $value units"
                }
            ]
        },
        {
            "seriesname": "Samsung",
            "allowDrag": "0",
            "data": [
                {
                    "value": "600"
                },
                {
                    "value": "850",
                    "dashed": "1"
                },
                {
                    "value": "1000",
                    "allowDrag": "1",
                    "dashed": "1"
                },
                {
                    "value": "1200",
                    "allowDrag": "1",
                    "tooltext": "Predicted sales $value units"
                }
            ]
        }
    ]
}
<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: 'dragarea',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Unit Sales - Apple vs Samsung",
            "subCaption": "Drag anchors to change estimated values",
            "subCaptionFontSize": "12",
            "xAxisName": "Quarter",
            "yAxisName": "No. of Units",
            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Q1"
            }, {
                "label": "Q2"
            }, {
                "label": "Q3(E)"
            }, {
                "label": "Q4(E)"
            }]
        }],
        "dataset": [{
            "seriesname": "Apple",
            "valuePosition": "ABOVE",
            "allowDrag": "0",
            "data": [{
                "value": "1200"
            }, {
                "value": "1500",
                "dashed": "1"
            }, {
                "value": "1300",
                "allowDrag": "1",
                "dashed": "1"
            }, {
                "value": "900",
                "allowDrag": "1",
                "tooltext": "Predicted sales $value units"
            }]
        }, {
            "seriesname": "Samsung",
            "allowDrag": "0",
            "data": [{
                "value": "600"
            }, {
                "value": "850",
                "dashed": "1"
            }, {
                "value": "1000",
                "allowDrag": "1",
                "dashed": "1"
            }, {
                "value": "1200",
                "allowDrag": "1",
                "tooltext": "Predicted sales $value units"
            }]
        }]
    },
    events: {
        'beforeRender': function(event, args) {
            var tableCont = document.createElement('div'),
                strHTML = "",
                thStyle = "background-color: #fece2f;color: #ffffff;border: 1px solid #000;padding: 10px 5px;min-width: 70px;text-align: center;",
                tdStyleApple = "border: 1px solid #000;color: #008ee4;padding: 10px 5px;min-width: 70px;text-align: center;",
                tdStyleSamsung = "border: 1px solid #000;color: #6baa01;padding: 10px 5px;min-width: 70px;text-align: center;",
                rowHeaderApple = " background-color: #008ee4;color: #fff; padding: 10px 5px;",
                rowHeaderSamsung = " background-color: #6baa01;color: #fff; padding: 10px 5px;";
            tableCont.setAttribute('id', 'tableCont-2');
            tableContsetAttribute('style', 'padding-left: 10px; width: 470px;');;
            strHTML = "<table style='margin: 25px auto;border-collapse: collapse;border: 1px solid;border-bottom: 2px solid;'><tr><td style='border-top: 1px solid #fff; border-left: 1px solid #fff;'></td><th style='" + thStyle + "'>Q1</th><th style='" + thStyle + "'>Q2</th><th style='" + thStyle + "'>Q3(E)</th><th style='" + thStyle + "'>Q4(E)</th></tr><tr><td style='" + rowHeaderApple + "'>Apple</td><td id='tbl2-1-1' style='" + tdStyleApple + "'>1200</td><td id='tbl2-1-2' style='" + tdStyleApple + "'>1500</td><td id='tbl2-1-3' style='" + tdStyleApple + "'>1300</td><td id='tbl2-1-4' style='" + tdStyleApple + "'>900</td></tr><tr><td style='" + rowHeaderSamsung + "'>Samsung</td><td id='tbl2-2-1' style='" + tdStyleSamsung + "'>600</td><td id='tbl2-2-2' style='" + tdStyleSamsung + "'>850</td><td id='tbl2-2-3' style='" + tdStyleSamsung + "'>1000</td><td id='tbl2-2-4' style='" + tdStyleSamsung + "'>1200</td></tr></table><p align = 'center'/> (E) indicates Estimated";
            tableCont.innerHTML = strHTML;
            args.container.parentNode.insertBefore(tableCont, args.container.nextSibling);
        },
        'dataplotdragend': function(evt, arg) {
            var dsIndx = arg && arg.datasetIndex,
                dtIndx = arg && arg.dataIndex,
                val = arg && parseInt(arg.endValue, 10);
            document.getElementById('tbl2-' + dsIndx + '-' + dtIndx).innerHTML = val;

        },
        'datarestored': function(evtObj) {
            var ds1Values = ["1200", "1500", "1300", "900"],
                ds2Values = ["600", "850", "1000", "1200"],
                update = function(arr, rowNum) {
                    var i = 0,
                        arrLen = arr.length;

                    for (i; i < arrLen; i += 1) {
                        val = arr[i];
                        document.getElementById('tbl2-' + rowNum + '-' + (i + 1)).innerHTML = val;
                    }
                };
            update(ds1Values, 1);
            update(ds2Values, 2);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

To create a drag-able area 2D chart from a drag-able line 2D chart, just change the type attribute to dragarea.

Top