0 Replies Latest reply on May 14, 2010 5:13 AM by Gurupr1

    unable to create a tooltip for a line drawn on cartesiandatacanvas in flex

    Gurupr1

      I am trying to draw a line on cartesiandatacanvas. While I am able to  draw lines easily using the canvas.moveTo and canvas.lineTo methods, I  cannot provide a tooltip to the line if I use that functionality. I have  tried creating a label(when ever I draw a line) and adding a tooltip to  it but since I show the lines in a 10*10 grid both vertical and  horizontal there is a overlap and it is confusing.

       

       

      So now I am trying to create a line object that extends shape or  UIComponent. I cannot add this object to canvas using the addChild  method it does not work. The addDataChild method works but it messes  with the positioning of the line. Can someone help with a solution to  this.

       

      Simply put I want to draw lines on a datacanvas and add tooltips to  them.

       

       

      Here is my code for the line object:

       

      package
      {
         
      import flash.display.CapsStyle;
         
      import flash.display.JointStyle;
         
      import flash.display.LineScaleMode;

         
      import mx.core.UIComponent;

         
      public class Line extends UIComponent
         
      {
             
      public var x1:Number;
             
      public var x2:Number;
             
      public var y1:Number;
             
      public var y2:Number;
             
      public var color:Number;


             
      public function Line(x1:Number,
                          y1
      :Number,
                          x2
      :Number,
                          y2
      :Number,color:Number)
             
      {
                 
      super();
                 
      this.graphics.lineStyle(4,
                                  color
      ,
                                 
      1,
                                 
      true,
                                 
      LineScaleMode.NORMAL,
                                 
      CapsStyle.ROUND,
                                 
      JointStyle.MITER,
                                 
      1
                             
      );
                 
      this.graphics.moveTo(x1,y1);
                 
      this.graphics.lineTo(x2,y2);
             
      }
         
      }
      }

         

       

       

      Here is a sample MXML that has a canvas and tries to use the line  object above:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
      <mx:Script>
          <![CDATA[

              import Line;
          import mx.charts.chartClasses.CartesianCanvasValue;





              public function init():void
              {
                  var line:Line = new Line(10,10,40,40,0XFF0000);
      //          canvas.addChild(line); *Does not Work*
                  canvas.addDataChild(line,10,10,null,null,null,null);
              }
          ]]>
      </mx:Script>

         
      <mx:Panel x="60" y="53" width="517" height="472" layout="absolute">
             
      <mx:PlotChart x="48" y="10" id="plotchart1">
                 
      <mx:series>
                     
      <mx:PlotSeries displayName="Series 1" yField=""/>
                 
      </mx:series>
                 
      <mx:annotationElements>
                 
      <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
             
      </mx:annotationElements>
              
      <mx:verticalAxis>


                
      <mx:LinearAxis  id="axis11" minimum="0" maximum="100" interval="10" padding="10"/>
             
      </mx:verticalAxis>
                 
      <mx:horizontalAxis>

                
      <mx:LinearAxis  id="axis21" minimum="0" maximum="100" interval="10" padding="10"/>
             
      </mx:horizontalAxis>
             
      </mx:PlotChart>
             
      <mx:Legend dataProvider="{plotchart1}"/>
         
      </mx:Panel>

      </mx:WindowedApplication>