1 Reply Latest reply on Nov 3, 2009 5:02 AM by Subeesh Arakkan

    Line chart problem

    peddireddyss

      Hi guys,

       

       

                Is it possible in line chart ,dynamically changing line series data manually in the sence like slider dragging is possible in line series,

       

       

      Here am adding my code...

       

      Thanks and Regards

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
      <mx:Script>
          <![CDATA[
              import mx.events.MoveEvent;
              import mx.managers.DragManager;
              import mx.events.DragEvent;
              import mx.charts.effects.SeriesInterpolate;
              import mx.charts.series.items.LineSeriesItem;
              import mx.charts.series.LineSeries;
              import mx.charts.events.ChartItemEvent;
              import mx.collections.ArrayCollection;
              private var activeSeries:LineSeries;
              private var activePoint:LineSeriesItem;
              private var startValues:Array;
             
              private var activeLineSeries:LineSeries;
             
                  [Bindable]
                  private var someData:ArrayCollection = new ArrayCollection( [
                      { Month: "Jan", Warning: 180, OK: 80, Justice: 10 ,y:10},
                      { Month: "Feb", Warning: 200, OK: 100, Justice: 20 ,y:10},
                      { Month: "Mar", Warning: 200, OK: 90, Justice: 20 ,y:11},
                      { Month: "Apr", Warning: 190, OK: 100, Justice: 22 ,y:11},
                      { Month: "May", Warning: 240, OK: 90, Justice: 22  ,y:10},
                      { Month: "June", Warning: 280, OK: 90, Justice: 30 ,y:10 } ]);
                 
                   private function onItemMouseDown(event:ChartItemEvent):void {
                      if(event.hitData && event.hitData.element is LineSeries){
                          activeSeries = event.hitData.element as LineSeries;
                          activePoint = (event.hitData.chartItem as LineSeriesItem);
                         
                          stage.addEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove_Item);
                          stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp_Item);
                         
                      }
                  } 
                  private function onStageMouseMove_Item(event:MouseEvent):void {
                      var tmpArr:Array = activeSeries.dataTransform.invertTransform(chart.mouseX, chart.mouseY);
                     
                      someData[activePoint.xNumber][activeSeries.yField] = tmpArr[1];
                      chart.dataProvider = someData;          

       

                  }
                 
                  private function onStageMouseUp_Item(event:MouseEvent):void {
                      stage.removeEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove_Item);
                      stage.removeEventListener(MouseEvent.MOUSE_UP, onStageMouseUp_Item);
                  }
                  
                  private function onSeriesMouseOver(event:MoveEvent):void
                  {
                      //stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
                     
                      // calculate start values.
                      var initMouseY:Number= chart.mouseY;
                      activeLineSeries = event.currentTarget as LineSeries;
                      startValues = activeLineSeries.dataTransform.invertTransform(chart.mouseX, chart.mouseY);
                     
                      // create a bitmap to use as a drag image.
                      var seriesBitmapData:BitmapData = new BitmapData( event.currentTarget.width, event.currentTarget.height, true, 0x000000 );
                      seriesBitmapData.draw(event.currentTarget as DisplayObject);
                      img.source = new Bitmap(seriesBitmapData);
                      img.startDrag(false, new Rectangle(0, -100, 0, imgContainer.height));
               
                  }
                   private function onStageMouseUp(event:MouseEvent):void {
                      // stopping the drag
                      img.stopDrag();
                      img.source = null;
                      stage.removeEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);
                     
                      // calculate the delta and the new value.
                      var tmpArr:Array = activeLineSeries.dataTransform.invertTransform(chart.mouseX, chart.mouseY);
                      var delta:Number = tmpArr[1] - startValues[1];
                     
                      // asign the values directly to the data provider.
                      for(var i:int = 0 ; i < someData.length ; i ++){
                          someData[i][activeLineSeries.yField] += delta;
                      }
                      chart.dataProvider = someData;
                     
                  }
                   private function funcDragEnter( event:MouseEvent ):void
                    {
                        DragManager.acceptDragDrop(chart);
                    }
                 
                 
                    private function handleBtnReorder(e:DragEvent):void
                    {
                       
                    }
                   
                    private function dragStartEvent(e:DragEvent):void
                    {
                       
                    }
                    private function dragOverEvent(e:DragEvent):void
                    {
                       
                    }
                 
                 
          ]]>
      </mx:Script>   
      <mx:Stroke id="lineStr" weight="7" />
         
          <mx:SolidColor id="threshold_OK" color="green" alpha="0.4" />
          <mx:Stroke id="threshold_OK_str" color="green" weight="2" />
         
          <mx:SolidColor id="threshold_WARNING" color="#FFFF00" alpha="0.4" />
          <mx:Stroke id="threshold_WARNING_str" color="#FFFF00" weight="2" />
         
          <mx:Panel width="90%" height="90%">
              <mx:LineChart id="chart" height="100%" width="100%"
                  showDataTips="true" dataProvider="{someData}" 
                  dragEnabled="true"
                          dropEnabled="true"
                          dragMoveEnabled="true"
            
                  seriesFilters="[]" >
                  <mx:series>             
                      <mx:LineSeries yField="y" xField="Justice"  displayName="Justice"
                          lineStroke="{lineStr}" 
                                       
                          dragDrop="handleBtnReorder(event)"
                          dragStart="dragStartEvent(event)"
                          dragOver="dragOverEvent(event)"                   
                          showDataEffect="{SeriesInterpolate}"/>
                          <!--move="onSeriesMouseOver(event)"
                          dragEnter="funcDragEnter(event)" dragDrop="funcDragDrop(event)"-->
                  </mx:series>
                  <mx:annotationElements>
                      <mx:Canvas id="imgContainer">
                          <mx:Image id="img" alpha="0.5" top="0" />
                      </mx:Canvas>
                  </mx:annotationElements>
                  <mx:backgroundElements>
                      <mx:Canvas backgroundColor="red" backgroundAlpha="0.3" />
                  </mx:backgroundElements>
              </mx:LineChart>
          </mx:Panel>
      </mx:Application>