How to drag data points in flex LineSeries to a new position in chart

Question

I have a requirement of dragging data points to a new position in LineSeries. It should be done dynamically when user drags data points using mouse pointer.

I have tried options like: dragMoveEnabled="true" dragEnabled="true" dropEnabled="true" in LineChart control of flex as shown below.

<mx:LineChart id="linechart1" selectionMode="multiple" showAllDataTips="true" showDataTipTargets="true" dragMoveEnabled="true" dragEnabled="true" dropEnabled="true">

But its not working.

Can anybody tell how to achieve this.

Thank you...

Should it be possible to move a point in both directions (along X and Y axes) or only vertically (along Y)? — Anton

Anton Anton · Accepted Answer · 2013-04-12T22:12:32

I think there is no standard Flex API to solve this problem. You can make it in another way by controlling the user interaction with data points.

Here is my solution and the working example.

The user can take any data point and drag it up and down. The new position can be calculated by transforming of mouse coordinates using localToDate method of any series you have.

An important point is to take in account the distance between chart position and the actual begin of the plot. I use constant CHART_GUTTERTOP for this purpose.

The code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600">
<fx:Script>
    <![CDATA[
        import mx.charts.events.ChartItemEvent;
        import mx.charts.series.items.LineSeriesItem;
        import mx.collections.ArrayCollection;

        [Bindable]public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
            {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
            {Month:"Mar", Profit:2200, Expenses:800, Amount:300},
            {Month:"Apr", Profit:1800, Expenses:400, Amount:400}
        ]);

        private var currentId:int = -1;
        private var currentYField:String;
        private const CHART_GUTTERTOP:int = 20;

        protected function myChart_itemMouseDownHandler(event:ChartItemEvent):void
        {
            if (event.hitData != null)
            {
                var chartItem:LineSeriesItem = event.hitData.chartItem as LineSeriesItem;
                currentId = chartItem.index;
                currentYField = (chartItem.element as LineSeries).yField;
            }
        }

        protected function myChart_itemMouseUpHandler(event:ChartItemEvent):void
        {
            if (currentId != -1)
            {
                var p:Point = new Point(myChart.mouseX, myChart.mouseY  - CHART_GUTTERTOP);
                var d:Array = series1.localToData(p);

                expenses.getItemAt(currentId)[currentYField] = d[1];
                myChart.dataProvider = expenses;
                currentId = -1;
            }
        }
    ]]>
</fx:Script>

<s:Panel x="20" y="20">
    <s:VGroup>
        <mx:LineChart 
            id="myChart" 
            gutterTop="{CHART_GUTTERTOP}"
            dataProvider="{expenses}" 
            showDataTips="true"
            itemMouseDown="myChart_itemMouseDownHandler(event)" 
            itemMouseUp="myChart_itemMouseUpHandler(event)">

            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses}" 
                    categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:LineSeries id="series1" 
                    yField="Profit" 
                    displayName="Profit"/>
                <mx:LineSeries 
                    yField="Expenses" 
                    displayName="Expenses"/>
            </mx:series>
        </mx:LineChart>

        <mx:Legend dataProvider="{myChart}"/>
    </s:VGroup>
</s:Panel>
</s:Application>

How to drag data points in flex LineSeries to a new position in chart

1 Answers