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

    Custom DataTip renderer for chart


      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:Label text="{_dayText}" width="100%" textAlign="center" fontWeight="bold" fontSize="13" />
          <mx:Label text="{_dollarText}" width="100%" textAlign="center" fontSize="11" />
                  import mx.charts.series.items.ColumnSeriesItem;
                  import mx.charts.series.items.LineSeriesItem;
                  import mx.charts.HitData;
                  import mx.formatters.NumberFormatter;


                  private var _dayText:String;


                  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;
                      //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

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

          if(hd.chartItem is ColumnSeries){

              // do this


              // 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



            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.