6 Replies Latest reply: Jun 29, 2012 11:48 AM by fsoender RSS

    Help with Automatic refreshing

    fsoender Community Member

      I got this graph that I can slide with my finger, Im wondering if its possible to update it automatic with this code?

       

       

       

      //Function for sliding graph.

        
         protected function mouseDownHandler(event:MouseEvent):void
         
         {
         
          lastX = event.stageX;
         
          systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
         
          systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
         
         }
        
        
        
         protected function mouseMoveHandler(event:MouseEvent):void
         
         {
         
          var delta:Number = (lastX - event.stageX) / chart.width * viewportMax;
         
          if (hAxis.minimum + delta < 0)
          
          {
          
           hAxis.minimum = 0;
          
           hAxis.maximum = viewportMax;
          
          }
          
          else if (hAxis.maximum + delta  > chart.dataProvider.length - 0)
          
          {
          
           hAxis.maximum = chart.dataProvider.length - 0;
          
           hAxis.minimum = hAxis.maximum - viewportMax;
          
          }
          
          else
          
          {
          
           hAxis.minimum += delta;
          
           hAxis.maximum += delta;
          
          }
         
          lastX = event.stageX;
         
         }
        
        
        
         protected function mouseUpHandler(event:MouseEvent):void
         
         {
         
          systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
         
          systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseUpHandler);
         
         }
        
         

        • 1. Re: Help with Automatic refreshing
          sinious CommunityMVP

          The only thing I see in there that's unexplained is your usage of some object named "hAxis". Apparently changing the "maximum" or "minimum" property alters it. That code simply pays attention to your finger and adjusts those properties. You could adjust them youself to alter it without your finger. Just try setting it manually in a range that makes sense.

           

          e.g.

           

          // set explicit, 200 for example, change to taste (not sure what the value represents)

          hAxis.minimum = 200;

          hAxis.maximum = 200;

          • 2. Re: Help with Automatic refreshing
            fsoender Community Member

            Sinious,

             

            That didnt do anything im afraid. There have to be a way to make the chart run by itself when data is recieved...

             

            Any other suggestions?

            • 3. Re: Help with Automatic refreshing
              sinious CommunityMVP

              Sure. "Something" receives the data, and when it does it modifies the properties on the chart. We'd need to know what the chats instance name is as well as how to configure it, which function is assigned to receive data and what that data looks like.

              • 4. Re: Help with Automatic refreshing
                fsoender Community Member


                Here is the whole graph code, the source is the "myArray", it gets updated thru UDP.
                I guess something have to be done in the "mouseMoveHandler". Tried to change different things, but it
                still scolls with finger only, and does not update by itself. There should be a way to make it scroll by itself, dont you agree?

                 




                <fx:Script>
                  <![CDATA[
                  
                 
                  
                   import flash.events.TimerEvent;
                   import flash.utils.Timer;  
                   import flashx.textLayout.events.ScrollEvent;  
                   import mx.collections.ArrayCollection;
                   import mx.events.FlexEvent;
                   import mx.rpc.events.AbstractEvent;  
                 
                   public var NewValue:Object; 
                   public var Value:String;
                   public var myTimer:Timer;
                   public var PowerNumber:Number;
                  
                     
                  
                  
                   //Function for UDP graph.
                  
                   protected var lastX:Number = 0;  
                   [Bindable]
                   protected var viewportMax:Number = 10;
                  
                  
                  
                  
                   private function creationCompleteHandler():void
                   {
                   
                    completeHandler();
                    init();
                   
                   }
                  
                  
                   protected function completeHandler():void
                   
                   {
                   
                    chart.dataProvider = myArray;
                   
                   }
                  
                  
                  
                   protected function mouseDownHandler(event:MouseEvent):void
                   
                   {
                   
                    lastX = event.stageX;
                   
                    systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                   
                    systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
                   
                   }
                  
                  
                  
                   protected function mouseMoveHandler(event:MouseEvent):void
                   
                   {
                   
                    var delta:Number = (lastX - event.stageX) / chart.width * viewportMax;
                   
                    if (hAxis.minimum + delta < 0)
                    
                    {
                    
                     hAxis.minimum = 0;
                    
                     hAxis.maximum = viewportMax;
                    
                    }
                    
                    else if (hAxis.maximum + delta  > chart.dataProvider.length - 1)
                    
                    {
                    
                     hAxis.maximum = chart.dataProvider.length - 1;
                    
                     hAxis.minimum = hAxis.maximum - viewportMax;
                    
                    }
                    
                    else
                    
                    {
                    
                     hAxis.minimum += delta;
                    
                     hAxis.maximum += delta;
                    
                    }
                   
                    lastX = event.stageX;
                   
                   }
                  
                  
                  
                   protected function mouseUpHandler(event:MouseEvent):void
                   
                   {
                   
                    systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                   
                    systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseUpHandler);
                   
                   }
                  
                    
                  
                  
                  
                  
                   public var myArray:ArrayCollection = new ArrayCollection();
                  
                  
                   public function initTimer():void
                   {
                    var myTimer:Timer = new Timer(500, 0);
                    myTimer.addEventListener("timer", timerHandler);
                    myTimer.start();
                   
                   }
                  
                   //Function for UDP graph.
                   public function timerHandler(event:TimerEvent):void
                   {
                    var obj:Object = new Object();   
                    obj.time = getTimer();   
                    obj.Value = NewValue;
                    myArray.addItem(obj);
                   
                   
                   
                   } 
                  
                   //Function for UDP graph.
                   protected function applicationCompleteHandler(event:FlexEvent):void
                   {
                    udpSocket = new UDPSocket();
                    udpSocket.addEventListener(DatagramSocketDataEvent.DATA, udpDataHandler);
                    udpSocket.bind(1000);
                    udpSocket.receive();   
                    initTimer();
                   }
                  
                  
                   //Incomming UDP for graph (Tracking).
                   protected function udpDataHandler(event:DatagramSocketDataEvent):void
                   {
                   
                    var Value:String = event.data.readUTFBytes(event.data.bytesAvailable);
                   
                    if(Value)
                    {
                    
                     NewValue = Value;
                    
                    }
                    else
                    {
                    
                     NewValue = 0;
                    
                    }
                   
                   }
                   
                  
                  
                  ]]>
                 
                 
                 
                </fx:Script>




                <fx:Declarations>
                  <mx:SolidColorStroke id = "s1" color="0x0000ff" weight="2"/>
                </fx:Declarations>




                <mx:LineChart id="chart"  x="51" y="141" width="875" height="190" paddingLeft="5" paddingRight="5"
                      showDataTips="true"
                      mouseDown="mouseDownHandler(event)">
                 
                 
                  <mx:series>  
                   <mx:LineSeries yField="Value" form="curve" displayName="Tracking" lineStroke="{s1}"/>  
                  </mx:series>
                 
                 
                 
                  <mx:horizontalAxis> 
                   <mx:LinearAxis id="hAxis" minimum="0" maximum="{viewportMax}"/> 
                  </mx:horizontalAxis>
                 
                </mx:LineChart>


                 
                </s:Application>

                • 5. Re: Help with Automatic refreshing
                  fsoender Community Member

                  Any suggestions Sinious?

                  • 6. Re: Help with Automatic refreshing
                    fsoender Community Member

                    Im been trying and trying, but cant find it to work as i want.

                     

                    Can anyone help?