11 Replies Latest reply on Dec 9, 2010 10:44 AM by JoGlez

    Datatip function not working...

    JoGlez

      Hi I have the following code (thanks to Drkstr_1) and I want to create a datatip that displays the Time and TotalPower.  By default it is already displaying totalpower.  I have tried to create a datatipfunction with no luck (below)


      public function dtFunc(hd:HitData):String {
              return "Time: "+ hd.item.time + ", Power: " +
               + hd.item.totalPower+ ;
           }

      <?xml version="1.0" encoding="utf-8"?>
      <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" height="100%" width="100%"
                        creationComplete="creationCompleteHandler(event)" >

           <fx:Script>
                <![CDATA[
                     import mx.charts.chartClasses.Series;
                     import mx.charts.series.ColumnSeries;
                     import mx.charts.series.ColumnSet;
                     import mx.collections.ArrayCollection;
                     import mx.events.FlexEvent;
                     import mx.utils.ObjectUtil;
                    
                     private var _rawData:Array = [
                          {SiteName:"New Jersey", Time:18, TotalPower:158.84},
                          {SiteName:"New Jersey", Time:19, TotalPower:394.40},
                          {SiteName:"California", Time:19, TotalPower:85.54},
                          {SiteName:"Washington", Time:18, TotalPower:56.32},
                          {SiteName:"Washington", Time:19, TotalPower:68.47},
                          {SiteName:"Washington", Time:20, TotalPower:75.85},
                          {SiteName:"Washington", Time:21, TotalPower:102.98}
                     ];
                    
                     [Bindable]
                     public var dataProvider:ArrayCollection;
                    
                     protected function creationCompleteHandler(event:FlexEvent):void
                     {
                          var siteTable:Object = {};
                          var timeTable:Object = {};
                          var siteDataList:Array = [];
                          var timeSeriesList:Array = [];
                          var columnSet:ColumnSet = new ColumnSet();
                         
                          columnSet.type = "stacked";
                         
                          for each(var rawItem:Object in _rawData)
                          {
                               var siteName:String = rawItem.SiteName;
                               var time:String = rawItem.Time.toString();
                               var totalPower:Number = rawItem.TotalPower;
                               var dataItem:Object;
                              
                               //if we already have an object for this site,
                               //then retrieve. Otherwise create one.
                               if( siteTable.hasOwnProperty(siteName) )
                               {
                                    dataItem = siteTable[siteName];
                               }
                               else
                               {
                                    dataItem = {SiteName:siteName};
                                    siteTable[siteName] = dataItem;
                                    siteDataList.push(dataItem);
                               }
                              
                               //now add a value pair for the time and power
                               dataItem[time] = totalPower;
                              
                               //we need to create a series for every unique time you have
                               if( !timeTable.hasOwnProperty(time) )
                               {
                                    timeTable[time] = 1;
                                   
                                    var timeSeries:ColumnSeries = new ColumnSeries();
                                    timeSeries.yField = time;
                                    columnSet.series.push(timeSeries);
                               }
                          }
                         
                          trace(ObjectUtil.toString(siteDataList));
                         
                          //invalidate the chart series to force a redraw
                          var chartSeries:Array = this.stackedChart.series;  
                          chartSeries.push(columnSet); 
                          this.stackedChart.series = chartSeries;  
                          this.stackedChart.invalidateSeriesStyles();  
                         
                          this.dataProvider = new ArrayCollection(siteDataList);
                     }

                ]]>
           </fx:Script>

           <fx:Declarations>

           </fx:Declarations>

           <mx:Panel height="100%" layout="horizontal" width="100%" title="Stacked Chart Example">

                <mx:ColumnChart id="stackedChart" dataProvider="{dataProvider}" height="100%"  width="100%" paddingLeft="5"
                                    paddingRight="5" showDataTips="true">
                    
                     <mx:horizontalAxis>
                          <mx:CategoryAxis categoryField="SiteName" />
                     </mx:horizontalAxis>
                    
                </mx:ColumnChart>

           </mx:Panel>

      </s:Application>

      ps.. Would anyone be kind enough to explain this code in detail for me.. Thanks..