Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Drag-able charts are a special set of charts that allow you to visually manipulate the data on a chart and then submit it back. These charts can be used intensively for simulations, financial planning, etc.

In this section, you will be introduced to the:

  • Basics of drag-able charts

  • Types of drag-able charts

Basics of Drag-able Charts

Drag-able charts allow you to visually morph the data to update the figures on the chart. These charts derive their basic features from the multi-series column, the multi-series line, and the multi-series area charts.

FusionCharts Suite XT offers the following three types of drag-able charts:

  1. Drag-able column 2D chart

  2. Drag-able line 2D chart

  3. Drag-able area 2D chart

Once you are done with the visual updating of data, you can submit the data:

  1. Either back to the server as form data(like HTML Forms)

  2. Or, to JavaScript functions present on the same page as the chart. These JavaScript functions can then process the data and do the needful.

Types of Drag-able Charts

Drag-able Column 2D

A simple drag-able column 2D chart 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(event, args) {
            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",
                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='background-color: #6baa01;color: #fff; border: 1px solid #6baa01; padding: 10px 5px;min-width: 70px;text-align: center'>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;
            args.container.parentNode.insertBefore(tableCont, args.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 Estimated Demand data plot is drag-able. A table is rendered below the chart which reflects the visually-updated data on the chart.

Drag-able Line 2D

A simple drag-line 2D chart 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 tableContLine = 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; text-align: center;min-width: 70px;",
                rowHeaderSamsung = " background-color: #6baa01;color: #fff; padding: 10px 5px; text-align: center;min-width: 70px;";
            tableContLine.setAttribute('id', 'tableContLine');
            tableContLine.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</p>";
            tableContLine.innerHTML = strHTML;
            args.container.parentNode.insertBefore(tableContLine, 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 Q3 and Q4 sales estimates for Apple and Samsung are drag-able. A table is rendered below the chart which reflects the visually-updated data on the chart.

Drag-able Area 2D

A simple drag-able area 2D chart 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 tableContArea = 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; text-align: center;min-width: 70px;",
                rowHeaderSamsung = " background-color: #6baa01;color: #fff; padding: 10px 5px; text-align: center;min-width: 70px;";
            tableContArea.setAttribute('id', 'tableContArea');
            tableContArea.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='area_1-1' style='" + tdStyleApple + "'>1200</td><td id='area_1-2' style='" + tdStyleApple + "'>1500</td><td id='area_1-3' style='" + tdStyleApple + "'>1300</td><td id='area_1-4' style='" + tdStyleApple + "'>900</td></tr><tr><td style='" + rowHeaderSamsung + "'>Samsung</td><td id='area_2-1' style='" + tdStyleSamsung + "'>600</td><td id='area_2-2' style='" + tdStyleSamsung + "'>850</td><td id='area_2-3' style='" + tdStyleSamsung + "'>1000</td><td id='area_2-4' style='" + tdStyleSamsung + "'>1200</td></tr></table><p align = 'center'> (E) indicates Estimated</p>";
            tableContArea.innerHTML = strHTML;
            args.container.parentNode.insertBefore(tableContArea, args.container.nextSibling);
        },
        'dataplotdragend': function(evt, arg) {
            var dsIndx = arg && arg.datasetIndex,
                dtIndx = arg && arg.dataIndex,
                val = arg && parseInt(arg.endValue, 10);

            document.getElementById("area_" + 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 Q3 and Q4 sales estimates for Apple and Samsung are drag-able. A table is rendered below the chart which reflects the visually-updated data on the chart.

Top