FusionCharts Logo
FusionCharts Suite v3.7.1

Loading

Drag-able Charts

FusionCharts Suite XT includes drag-able charts that allow you to visually manipulate data on a chart, submit it, and observe its impact.

At present, drag-able charts include the following chart types:

  • Drag-able Column 2D Chart

  • Drag-able Line 2D Chart

  • Drag-able Area 2D Chart

These charts derive their basic features from the FusionCharts XT multi-series column, multi-series line, and multi-series area charts, respectively.

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

  • either back to the server as form data (like HTML forms)

  • or to JavaScript functions present on the same page as chart. These JavaScript functions can then process the data and do the needful.

A drag-able column 2D chart is shown below:

FusionCharts will load here..

The above chart shows the inventory status for the top five food items at Bakersfield Central. It analyzes the available stock against the estimated demand. The data plots that represent the estimated demand are drag-able. Dragging these data plots updates the table shown below the chart for the no. of units estimated.

The data structure needed to render the above chart is given below:

{ "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"
                }
            ]
        }
    ]
}

For more details on drag-able charts, click here.

Top