4 Replies Latest reply on Mar 21, 2014 1:52 AM by TheRaisingSun

    Custom datatip function on LineChart doesn't work properly

    Thiyagarajan27_yahoo

      Hi,

       

      I have an custom data tip function in my line chart and when I hover the mouse it shows as empty tool tip for some data points consistently as shown in the image below. My custom data tip function is also very simple, it just takes the yValue from the LineSeriesItem and returns it. The line series as you can see in the chart has proper value. Is this a known issue? Is there a workaround?

       

       

       

      Attached  the sample program used. I'm using Flex 4.5

       

       

       

      ToolTip.PNG

       

      Here is the sample application I have used.

       

      <?xml version="1.0"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx">

       

      <fx:Script>

      <![CDATA[

      import com.hp.perf.client.util.Utility;

       

      import mx.charts.HitData;

      import mx.charts.series.items.LineSeriesItem;

      import mx.collections.ArrayCollection;

       

      [Bindable]

      public var metrics:ArrayCollection = new ArrayCollection( [

      {date: "2011, 7, 1", M2:1.5, M3:1.1, M4:1.5, M5:1.5, M6:4},

      {date: "2011, 7, 2", M2:2.7, M3:1.2, M4:2.5, M5:2.5, M6:6},

      {date: "2011, 7, 3", M2:5.4, M3:1.3, M4:3.5, M5:3.5, M6:3.2},

      {date: "2011, 7, 4", M2:3.5, M3:1.4, M4:4.5, M5:4.5, M6:3.3},

      {date: "2011, 7, 5", M2:5.1, M3:1.5, M4:1.5, M5:1.5, M6:3},

      {date: "2011, 7, 6", M2:5.3, M3:2.0, M4:2.5, M5:2.5, M6:3.1},

      {date: "2011, 7, 7", M2:6.5, M3:2.1, M4:3.5, M5:3.5, M6:2.3},

      {date: "2011, 7, 8", M2:2.1, M3:2.2, M4:4.5, M5:4.5, M6:4.3},

      {date: "2011, 7, 9", M2:0.2, M3:2.3, M4:1.5, M5:1.5, M6:3},

      {date: "2011, 7, 10", M2:0.5, M3:2.4, M4:2.5, M5:3.5, M6:0.3},

      {date: "2011, 7, 11", M2:0.5, M3:2.5, M4:3.5, M5:2.5, M6:0.3}

      ]);

       

      public function myParseFunction(s:String):Date {

      // Get an array of Strings from the comma-separated String passed in.

      var a:Array = s.split(",");

      // Create the new Date object. Subtract one from

      // the month property because months are zero-based in

      // the Date constructor.

      var newDate:Date = new Date(a[0],a[1]-1,a[2]);

      return newDate;

      }

       

      public function lineChartFormatDataTip(hitData:HitData):String

      {

      var data:Object = LineSeriesItem(hitData.chartItem).yValue;

      return data.toString();

      }

      ]]>

      </fx:Script>

       

      <mx:Panel title="DateTimeAxis Example" height="100%" width="100%">

       

      <mx:LineChart id="mychart" height="100%" width="100%"

        paddingRight="5" paddingLeft="5"

        showDataTips="true" dataProvider="{metrics}" dataTipFunction="lineChartFormatDataTip">

       

      <mx:horizontalAxis>

      <mx:DateTimeAxis dataUnits="days" parseFunction="myParseFunction"/>

      </mx:horizontalAxis>

       

      <mx:verticalAxis>

      <mx:LinearAxis baseAtZero="false" />

      </mx:verticalAxis>

       

      <mx:series>

      <mx:LineSeries yField="M2" xField="date" displayName="Metric 2"/>

      <mx:LineSeries yField="M3" xField="date" displayName="Metric 3"/>

      <mx:LineSeries yField="M4" xField="date" displayName="Metric 4"/>

      <mx:LineSeries yField="M5" xField="date" displayName="Metric 5"/>

      <mx:LineSeries yField="M6" xField="date" displayName="Metric 6"/>

      </mx:series>

      </mx:LineChart>

      </mx:Panel>

      </s:Application>