1 Reply Latest reply on Jul 13, 2010 11:16 AM by philip_leb

    Stacked 100% bar chart - Problem with datatips for zero value data points

    philip_leb

      I have a stacked 100% bar chart that shows datatips in Flex 4.   However, I don't want it to show datatips for

      data points with zero values.   Flex 4 shows the datatip for a zero value data point on the left side of a bar if the data point is not the first in the series.

       

      Here's the code that illustrates this problem.    Of particular concern is the July bar.    Because of the zero value data point problem, it's not possible to see the datatip for "aaa".

       

      Any ideas on how we can hide/remove the datatips for zero value data points ?        Thanks.

       

      <?xml version="1.0"?>

      <s:Application

      xmlns:fx="

       

      http://ns.adobe.com/mxml/2009"

      xmlns:mx="

      library://ns.adobe.com/flex/mx"

      xmlns:s="

      library://ns.adobe.com/flex/spark"

      creationComplete="initApp()"

      height="

      1050" width="600">

       

       

      <s:layout>

       

       

      <s:VerticalLayout/>

       

       

      </s:layout>

       

       

      <fx:Script><![CDATA[

       

      import mx.collections.ArrayCollection;

      [

      Bindable]

       

      private var yearlyData:ArrayCollection = new ArrayCollection([

      {month:

      "Aug", a:1, b:10, c:1, d:10, e:0},

      {month:

      "July", a:1, b:10, c:10, d:10, e:0},

      {month:

      "June", a:10, b:10, c:10, d:10, e:0},

      {month:

      "May", a:10, b:10, c:10, d:0, e:10},

      {month:

      "April", a:10, b:10, c:0, d:10, e:10},

      {month:

      "March", a:10, b:0, c:10, d:10, e:10},

      {month:

      "February", a:0, b:10, c:10, d:10, e:10},

      {month:

      "January", a:10, b:10, c:10, d:10, e:10}

      ]);

       

      private function initApp():void {

      }

      ]]>

      </fx:Script>

       

       

      <s:Panel title="Stacked Bar Chart - Problems with DataTips for Zero Value Items" id="panel1">

       

       

      <s:layout>

       

       

      <s:HorizontalLayout/>

       

       

      </s:layout>

       

       

      <mx:BarChart id="myChart" type="stacked"

      dataProvider="

      {yearlyData}" showDataTips="true">

       

       

      <mx:verticalAxis>

       

      <mx:CategoryAxis categoryField="month"/>

       

      </mx:verticalAxis>

       

      <mx:series>

       

      <mx:BarSeries

      xField="

      a"

      displayName="

      aaa"/>

       

      <mx:BarSeries

      xField="

      b"

      displayName="

      bbb"/>

       

      <mx:BarSeries

      xField="

      c"

      displayName="

      ccc"/>

       

      <mx:BarSeries

      xField="

      d"

      displayName="

      ddd"/>

       

      <mx:BarSeries

      xField="

      e"

      displayName="

      eee"/>

       

      </mx:series>

       

      </mx:BarChart>

       

      <mx:Legend dataProvider="{myChart}"/>

       

      </s:Panel>

       

      <s:RichText width="700">

       

      <s:br></s:br>

       

      <s:p fontWeight="bold">The problem:</s:p>

       

      <s:p>Datatips for zero value data points appear on left side of bar (if data point is not the first point in series).</s:p>

       

      <s:br></s:br>

       

      <s:p fontWeight="bold">For example:</s:p>

       

      <s:p>1) For "June", eee = 0, mouse over the left side of the bar to see a datatip for "eee". Not good.</s:p>

       

      <s:br></s:br>

       

      <s:p>2) For "July", eee = 0 and aaa = 1, can't see the datatip for "aaa", instead "eee" shows. Real bad.</s:p>

       

      <s:br></s:br>

       

      <s:p>3) For "Feb", aaa = 0, datatip for "aaa" (first point) does not show. This is good.</s:p>

       

      <s:br></s:br>

       

      <s:p>4) For "Mar", bbb = 0, datatip for "bbb" shows on the left side of the bar. Not good.</s:p>

       

      <s:br></s:br>

       

      <s:p fontWeight="bold">Challenge:</s:p>

       

      <s:p>How can we hide/remove datatips for zero value data points?</s:p>

       

      <s:br></s:br>

       

      </s:RichText>

      </s:Application>