5 Replies Latest reply on Apr 11, 2011 2:01 AM by HenrySeng-CH

    LineChart dataTips

    HenrySeng-CH

      Hello guys,

       

      I'm building a LineChart and I'm asked to show dataTip everywhere on a LineSeries and not just only on intersection between segments.Is there a simple way to do it?

        • 1. Re: LineChart dataTips
          Tanu Jain Level 2

          Use showAllDataTips="true"

           

          --

          Regards,

          Tanu

          • 2. Re: LineChart dataTips
            HenrySeng-CH Level 1

            Hello Tanu,

             

            showAllDataTip="true" makes all dataTips always visible. What I'd like would be that when I mouseMove on a line, it shows the dataTip where my pointer is.

             

            Thanks for your answer

            • 3. Re: LineChart dataTips
              Tanu Jain Level 2

              To get hold of datapoints on mouseMove of the linechart, do as given below:

               

              Include cartesianDataCanvas in the annotation elements of line chart as given below:

               

               

              <mx:annotationElements>

                   <mx:CartesianDataCanvas id="canvas" includeInRanges="true" />

              </mx:annotationElements>

               

               

              Handle mouseOver event of LineSeries as given below:

               

               

               

              <mx:series>

                   <mx:LineSeries xField="Expenses" yField="Profit"  displayName="Profit" mouseOver="mouseOverHandler(event)" />

              </mx:series>

               

               

              In actionscript,

               

              private function mouseOverHandler(event:MouseEvent):void

              {

              var dataPoint:Array =canvas.localToData(new Point(event.localX,event.localY));

              trace('data: '+ dataPoint[0] + ", "+ dataPoint[1]);

              }

               

              dataPoint array elements contain the datapoints being mouseOvered.

               

              --

              Tanu

               

              Message was edited by: Tanu Jain

              1 person found this helpful
              • 4. Re: LineChart dataTips
                Tanu Jain Level 2

                to show datatip on UI,

                 

                1. extend CartesianDataCanvas and add a function as given below:

                    public function drawCurrentLabel(x:Number,y:Number):void

                     {

                          this.removeAllChildren();

                 

                          var label:Label = new Label();

                          label.text = int(x) + "," + int(y);

                          label.width = 100;

                 

                          this.addDataChild(label,x,y);

                     }

                 

                2. Add following call in mouseOverHandler

                     canvas.drawCurrentLabel(dataPoint[0],dataPoint[1]);

                 

                --

                Tanu

                1 person found this helpful
                • 5. Re: LineChart dataTips
                  HenrySeng-CH Level 1

                  Thanks for your answer Tan. Still it wasn't working so I decided to extend a simple Canvas and add a Label at localX and Y.

                   

                   

                  public function drawCurrentInfo(event:MouseEvent):void {

                       removeAllChildren();

                       var info:Label = new Label();

                       label.text = "My Text";

                       info.x = event.localX+10;

                       info.y = event.localY-15;

                       addChild(info);

                  }