1 Reply Latest reply on Jul 3, 2011 8:46 PM by herrygoonnn

    How can I creat a dynamic chart legend?

    herrygoonnn

      Will,I want to show multi hosts' dynamic CPU performance (the host ip can be changed).I use those code below for a test:

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="0xFFFFFF" initialize="init()">
           <mx:Script>
                <![CDATA[
                     import mx.charts.ChartItem;
                     import mx.charts.chartClasses.IAxis;
                     import mx.charts.chartClasses.LegendData;
                     import mx.charts.chartClasses.Series;
                     import mx.charts.events.ChartItemEvent;
                     import mx.charts.series.LineSeries;
                     import mx.collections.ArrayCollection;
                     import mx.containers.Canvas;
                     import mx.containers.HBox;
                     import mx.controls.Alert;
                     import mx.graphics.SolidColor;
                     
                     
                     
                     [Bindable]
                     private var dayTimeV:int = 0;
                     
                     [Bindable]
                     private var legendDP:ArrayCollection = new ArrayCollection(); 
                     
                     //for record whether the ip changed by using the length 
                     private var latestIp2Length:Object = new Object();
                     
                     
                     [Bindable]
                     public var statsPpg:ArrayCollection = new ArrayCollection([
                          new ArrayCollection([{dayTime:dayTimeV,CPU:24.0, IP:"100.0.2.0"}]),
                          new ArrayCollection([{dayTime:dayTimeV,CPU:27.6, IP:"100.0.2.1"}]),
                          new ArrayCollection([{dayTime:dayTimeV,CPU:35.4, IP:"100.0.2.2"}]),
                          new ArrayCollection([{dayTime:dayTimeV,CPU:31.6, IP:"100.0.2.4"}]),
                          new ArrayCollection([{dayTime:dayTimeV,CPU:28.3, IP:"100.0.1.6"}]),
                          new ArrayCollection([{dayTime:dayTimeV,CPU:27.2, IP:"100.0.1.9"}])
                     ]);
                     
                     
                     private function init():void{
                          latestIp2Length["100.0.2.0"] = 1;
                          latestIp2Length['100.0.2.1'] = 1;
                          latestIp2Length['100.0.2.2'] = 1;
                          latestIp2Length['100.0.2.4'] = 1;
                          latestIp2Length['100.0.1.6'] = 1;
                          latestIp2Length['100.0.1.9'] = 1;
                          
                          initLegend();
                          createLineSeries();
                          
                     }
                     
                     private function createLineSeries():void{
                          for(var i:int = 0 ;i < statsPpg.length ;i++){ 
                          var lineSeries:LineSeries = new LineSeries();     
                          lineSeries.yField = "CPU";     
                          lineSeries.displayName = "CPU";
                          lineSeries.dataProvider = statsPpg[i];
                          lineSeries.id = "lineSeries"+i;
                          lineSeries.setStyle("adjustedRadius",2);
                          lineSeries.setStyle("radius",40);
                          lineSeries.setStyle("fill","#55CC33");
                          
                          var series:Array = chartPPG.series;
                          series.push(lineSeries);
                          chartPPG.series = series;
                          }
                     }
                     
                      
                     
                     //find the record using ip
                     private function indexOf(ip:String):int{
                          for(var i:int = 0 ; i < statsPpg.length ;i++){
                          if(statsPpg[i].getItemAt(0).IP == ip)
                               return i;
                          }
                          return -1;
                     }
                     
                     private function modifyData():void{
                          dayTimeV++;
                          
                          //all new added data
                          var forAdded:ArrayCollection = new ArrayCollection([
                               {dayTime:dayTimeV,CPU:24.0+Math.random()*10, IP:"100.0.2."+dayTimeV},
                               {dayTime:dayTimeV,CPU:27.6+Math.random()*10, IP:"100.0.2."+(dayTimeV+1)},
                               {dayTime:dayTimeV,CPU:35.4+Math.random()*10, IP:"100.0.2."+(dayTimeV+2)},
                               {dayTime:dayTimeV,CPU:31.6+Math.random()*10, IP:"100.0.2."+(dayTimeV+3)},
                               {dayTime:dayTimeV,CPU:28.3+Math.random()*10, IP:"100.0.1."+(dayTimeV+4)},
                               {dayTime:dayTimeV,CPU:27.2+Math.random()*10, IP:"100.0.1."+(dayTimeV+5)}
                          ]);
                     
                          //the data(IP) appear at first time
                          var waitedForAdded:ArrayCollection = new ArrayCollection();
                          
                          for(var i:int = 0 ; i < forAdded.length ;i++){
                               var index:int = indexOf(forAdded[i].IP);
                               if(index != -1){//if we found,append it
                                    statsPpg[index].addItem(forAdded[i]);
                               }else{//if not,
                                    waitedForAdded.addItem(forAdded[i]);
                               }
                          }
                          
                     var j:int = 0;
                      for(i = 0 ; i < statsPpg.length ;i++){
                           // if length not changed,delete old data and add new
                           if(latestIp2Length[statsPpg[i][0].IP] == statsPpg[i].length){
                                delete latestIp2Length[statsPpg[i][0].IP]; 
                                var legendIndex:int = findLegendDPData(statsPpg[i][0].IP);
                                
                                statsPpg[i].setItemAt(waitedForAdded[j],0);
                                latestIp2Length[waitedForAdded[j].IP] = statsPpg[i].length; 
                                
                                legendDP.setItemAt(newLegendData(waitedForAdded[j].IP),legendIndex);
                                
                                j++;      
                           }else{//if length changed,the data appended already
                                latestIp2Length[statsPpg[i][0].IP] = statsPpg[i].length; 
                           }
                      }
       
                     
                     }
                     
                     
                     private function addData():void{
                          dayTimeV++;
                          newData();
                     }
                     
                     
                     private function newLegendData(ip:String):LegendData{
                          var legendData:LegendData = new LegendData();
                          legendData.label= ip;
                          legendData.marker= new HBox();
                          legendData.aspectRatio=1;
                          return legendData;
                     }
                     
                     private function findLegendDPData(ip:String):int{
                          for(var i:int = 0;i < legendDP.length;i++){
                               if(legendDP[i].label == ip)
                                    return i;
                          }
                          return -1;
                     }
                     
                     /* [Bindable] 
                     public function get legend():ArrayCollection
                     {
                          var legend:ArrayCollection = new ArrayCollection();
                          for (var i:int = 0; i < statsPpg.length; i++)
                          {
                               var dataObject:Object = statsPpg[i][0];
                               legend.addItem(newLegendData(dataObject.IP.toString()));
                          }
                          return legend;
                     }
                     
                     [Bindable] 
                     public function set legend(legendData:ArrayCollection):void
                     {
                               legend = legendData;
                     } */
                     
                     private function initLegend():void
                     {
                          for (var i:int = 0; i < statsPpg.length; i++)
                          {
                               var dataObject:Object = statsPpg[i][0];
                               legendDP.addItem(newLegendData(dataObject.IP.toString()));
                          }
                     }
                     
                     private function yAxisLabel(value:Object, previousValue:Object, axis:IAxis):String
                     {
                          return value + ' %';
                     }
                     
                     
                ]]>
           </mx:Script>
           <mx:Panel width="790" title="CPU.IP" layout="horizontal">
                <mx:LineChart  id="chartPPG" name="Comparison" showDataTips="true">
                     <mx:horizontalAxis>
                          <mx:CategoryAxis dataProvider="{statsPpg[0]}" categoryField="dayTime" title="Days" id="categories"/>
                     </mx:horizontalAxis>
                     <mx:verticalAxis>
                          <mx:LinearAxis labelFunction="{yAxisLabel}"  title="CPU" id="yAxis"/>
                     </mx:verticalAxis>
                     <!--<mx:series>
                          <mx:LineSeries id="CPU" yField="CPU" xField="dayTime" displayName="CPU  "/>
                          <mx:LineSeries id="IP" yField="IP" xField="IP" displayName="IP  " />
                     </mx:series>-->
                </mx:LineChart>
                <!--<mx:Legend dataProvider="{chartPPG}" markerWidth="50" markerHeight="4" legendItemClass="MyLegendItem" direction="vertical"  width="174"/>-->
                <!--<mx:Legend id="myActionScriptLegend" creationComplete="createDynamicLegend(event)" />-->
                 
                <mx:Legend id="userLegend" dataProvider="{legendDP}"/>
                <mx:Button label="AddNewData" click="modifyData()"/> 
           </mx:Panel>
           
      </mx:Application>
      

      the result is here:

      FlexResult.jpg

      Question:

      1.I using the binding ArrayCollection  legendDP as the Legend's dataprovider, the Legend's showing not changed  when the legendDP changed

      2.How can I fill the Legend's color,the result has no color showed.