6 Replies Latest reply on Jul 19, 2010 1:27 AM by yayo82

    show dataTips on Chart

    yayo82

      Hi,

       

      I found some cool stuff in the internet. and I want to develop it. the code shows or draw a line while mouse are moving on the chart. Now I want to show the data tips/data points if the line get on the linechart. I already googling but I dont found any solution. I see an example on the internet but I dont know how to do it

      http://www.google.com/finance?q=INDEXDJX:.DJI,INDEXSP:.INX,INDEXNASDAQ:.IXIC

       

      can sombody help me?

       

      thanks in advance

       

      here is the code:

       

      the mxml file:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" xmlns:display="flash.display.*">
             
              <mx:Script>
                  <![CDATA[
                      import mx.controls.Alert;
                      import mx.collections.ArrayCollection;
                     
                       [Bindable]
                  private var expensesAC:ArrayCollection = new ArrayCollection( [
                      { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
                         { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
                         { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
                      { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
                      { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
                     
                       
                  ]]>
              </mx:Script>
             
             
             
              <mx:LineChart dataProvider="{expensesAC}" showDataTips="true">
                  <mx:annotationElements>
                      <local:Ruler/>
                     
                  </mx:annotationElements>
                 
                  <mx:horizontalAxis>
                      <mx:CategoryAxis categoryField="Month"/>
                  </mx:horizontalAxis>
                 
                  <mx:series>
                      <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
                      <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
                      <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
                  </mx:series>
                 
                 
              </mx:LineChart>
      </mx:Application>

       

      the as file:

      package{
      import flash.events.MouseEvent;
      import flash.geom.Point;

       

      import mx.charts.chartClasses.ChartElement;
      import mx.charts.events.ChartItemEvent;
      import mx.controls.Alert;

       

          public class Ruler extends ChartElement{
              private var main:Main = new Main();
              public function Ruler():void{
                  super();
                  addEventListener(MouseEvent.MOUSE_MOVE,handleMouseMove);
                  addEventListener(MouseEvent.MOUSE_OUT,handleMouseOut);   
              }
              private function handleMouseMove(e:MouseEvent):void{
                  updateDisplayList(unscaledWidth,unscaledHeight);           
                  var p:Point = new Point(this.mouseX,this.mouseY);
                  graphics.lineStyle(2,0xFF0000,0.5);
                  graphics.moveTo(0,p.y);
                  graphics.lineTo(unscaledWidth,p.y);
                  graphics.moveTo(p.x,0);
                  graphics.lineTo(p.x,unscaledHeight);

       

              }
              private function handleMouseOut(e:MouseEvent):void{
                  updateDisplayList(unscaledWidth,unscaledHeight);
              }
             
             
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{           
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
                  graphics.clear();  
                  graphics.moveTo(0,0);
                  graphics.lineStyle(0,0x000000,0);
                  graphics.beginFill(0x000000,0);
                  graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
                  graphics.endFill();
              }
          }
      }