3 Replies Latest reply on Aug 5, 2009 3:40 PM by Gregory Lafrance

    Custom DataTip renderer for chart

    ice1000

      I am using the code below to create a custom data tip renderer for a chart. Right now, I have one renderer per chart type. It works ok but I would like to have the component below handle any type of chart.

       

      What do I put in the switch statement so the correct variable will be created?

       

      I navigated through the Variables pane and I can see an id for the element variable but I don't know how to access it correctly.

       

       

      <mx:VBox
          xmlns:mx="http://www.adobe.com/2006/mxml"
          backgroundColor="#FFFFFF"
          backgroundAlpha="0.95"
          borderColor="0xB7BABC"
          borderStyle="solid"
          paddingTop="5"
          paddingBottom="5"
          paddingRight="10"
          paddingLeft="10"
          verticalGap="-2"
          color="#000000"
          >
          <mx:Label text="{_dayText}" width="100%" textAlign="center" fontWeight="bold" fontSize="13" />
          <mx:Label text="{_dollarText}" width="100%" textAlign="center" fontSize="11" />
          <mx:NumberFormatter
              id="dollarFormatter"
              precision="2"
              thousandsSeparatorTo=","
              decimalSeparatorTo="."
              rounding="nearest"
          />   
         
          <mx:Script>
              <![CDATA[
                  import mx.charts.series.items.ColumnSeriesItem;
                  import mx.charts.series.items.LineSeriesItem;
                  import mx.charts.HitData;
                  import mx.formatters.NumberFormatter;

       

                  [Bindable]
                  private var _dayText:String;

       

                  [Bindable]
                  private var _dollarText:String;

       

                  override public function set data(value:Object):void{
                      //we know to expect a HitData object from a chart, so let's cast it as such
                      //so that there aren't any nasty runtime surprises
                      var hd:HitData = value as HitData;

       

                      //Any HitData object carries a reference to the ChartItem that created it.
                      //This is where we need to know exactly what kind of Chartitem we're dealing with.
                      //Why? Because a pie chart isn't going to have an xValue and a yValue, but things
                      //like bar charts, column charts and, in our case, line charts will.
                      switch (????) {
                          case "ColumnSeries":
                              var item:ColumnSeriesItem = hd.chartItem as ColumnSeriesItem;
                              break;
                      }
                     
                      //var item:LineSeriesItem = hd.chartItem as LineSeriesItem;
                      //var item:ColumnSeriesItem = hd.chartItem as ColumnSeriesItem

                      //the xValue and yValue are returned as Objects. Let's cast them as strings, so
                      //that we can display them in the Label fields.
                      _dayText = String(item.xValue);
                      _dollarText = "$" + dollarFormatter.format(String(item.yValue));
                  }//end set data
              ]]>
          </mx:Script>
      </mx:VBox>

        • 1. Re: Custom DataTip renderer for chart
          Gregory Lafrance Level 6

          if(hd.chartItem is ColumnSeries){

              // do this

          }else{

              // do this (or do nothing, so you don't need the else in that case)

          }

           

          If this post answered your question or helped, please mark it as such.

          • 2. Re: Custom DataTip renderer for chart
            ice1000 Level 1

            Greg,

             

            I made a small change and got it to work! I changed ColumnSeries to ColumnSeriesItem.

             

            If you don't mind, could you explain to me why you chose to use the 'is' statement instead of accessing the id (even though I could not figure out how to do so)?

             

            How do you figure out what objects a ChartItem can be?

            • 3. Re: Custom DataTip renderer for chart
              Gregory Lafrance Level 6

              The "is" operator will tell you if the data-type of the object "is" of a certain type.

               

              So If(event.currentTarget is Button) will return true if the data-type of the event.currentTarget object "is" Button, or perhaps a sub-class.

               

              This expands your possibilities and simplifies your coding, as you do not have to rely on IDs, but can just check the data-type.

               

              Of course your situation must lend itself to checking data-type, and I think in your case because PieChart was different, I think yours falls into that category.

               

              If this post answered your question or helped, please mark it as such.