플렉스 챠트 관련 기본 예제 - 드래그 엔 드롭 갱신 Line Chart

<?xml version="1.0" encoding="utf-8"?>

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="492">
<mx:Script>
 <![CDATA[
     import mx.charts.chartClasses.StackedSeries;
     import mx.containers.Canvas;
     import mx.core.IFlexDisplayObject;
     import mx.charts.series.items.PieSeriesItem;
     import mx.charts.events.ChartItemEvent;
     import mx.charts.series.items.LineSeriesItem;
     import mx.charts.LineChart;
     import mx.charts.PieChart;
     import mx.charts.series.LineSeries;
     import mx.charts.LinearAxis;
     import mx.charts.series.*;
     import mx.controls.sliderClasses.SliderThumb;
     import mx.core.UIComponent;
     import mx.collections.ArrayCollection;
     import mx.controls.*;
     import mx.rpc.http.HTTPService;
     import mx.rpc.events.*;
     import mx.utils.ArrayUtil;
     import flash.external.*;
     import flash.events.Event;
     import mx.core.IUIComponent;
     
     import mx.core.DragSource;
     import mx.managers.DragManager;
     import mx.events.DragEvent;

     import mx.formatters.NumberBaseRoundType;
     import mx.formatters.NumberFormatter;

  
  Security.loadPolicyFile("http://www.aaa.org/crossdomain.xml")  ;     
  Security.allowDomain("*");
  
  public var Gsrv:HTTPService = new HTTPService();
  
  private function acceptIt(event:DragEvent):void
  {
   DragManager.acceptDragDrop(UIComponent(event.target));
  } 
  public function dateAdd(InputDate:String):String
  {
   var DateYear:String = InputDate.substr(0,4);
   var DateMonth:String = InputDate.substr(5,2);
   var DateDate:String = InputDate.substr(8,2);
   var DateHour:String = InputDate.substr(11,2);
   var DateMinuete:String = InputDate.substr(14,2);

   var iDateHour:int = int(DateHour);
   var iDateDate:int = int(DateDate);   


   if(iDateHour-2 < 0)
   {
    DateHour = (iDateHour + 22).toString();
    DateDate = (iDateHour - 1).toString();
   }
   else
   {
    DateHour = (iDateHour - 2).toString();
   }

   return DateYear + "-" + DateMonth+ "-" + DateDate+ " " + DateHour+ ":" + DateMinuete;
  }
  
  public var ServerName:String = new String;
  public var ObjectName:String = new String;
  public var CounterName:String = new String;
  public var InstanceName:String = new String;
  
  public var DataIDString1:String = new String;
  public var DataIDString2:String = new String;
  public var DataIDString3:String = new String;
  public var DataIDString4:String = new String;
  public var DataIDString5:String = new String;
  
  public var strStartDate:String = new String;
  public var strEndDate:String = new String;
  
  private function performDrop(event:DragEvent):void
  {
   if(event.dragSource.hasFormat("items"))
        {
          var items:Array = event.dragSource.dataForFormat("items") as Array;
          for(var i:Number = 0; i < items.length ; i++)
          {
           Gsrv.useProxy = false;
     Gsrv.url= "http://aaa.org/AMSWC/ForFlex/DataGetRawDataByDataID.aspx";//URL;
     Gsrv.addEventListener("result", resultHandler);
     Gsrv.addEventListener("fault", faultHandler);
 
     // 파라미터 넘겨줄 값 받아오기.
     //DataID=499,1491,531&StartDate=2007-11-22%2008:50&EndDate=2007-11-22%2010:50
     var sparam:Object = new Object();
     var DataIDTemp:String = new String;
     
     if (BaseLine.visible==true){
      if (DataIDString1.length > 0){
       DataIDString1 = DataIDString1 + "," + items[0].DataID;
      }
      else{
       DataIDString1 = items[0].DataID;
      }
      DataIDTemp = DataIDString1;
     }
     else if (BaseLine2.visible==true){
      if (DataIDString2.length > 0){
       DataIDString2 = DataIDString2 + "," + items[0].DataID;
      }
      else{
       DataIDString2 = items[0].DataID;
      }
      DataIDTemp = DataIDString2;
     }
     else if (BaseLine3.visible==true){
      if (DataIDString3.length > 0){
       DataIDString3 = DataIDString3 + "," + items[0].DataID;
      }
      else{
       DataIDString3 = items[0].DataID;
      }
      DataIDTemp = DataIDString3;
     }
     else if (BaseLine4.visible==true){
      if (DataIDString4.length > 0){
       DataIDString4 = DataIDString4 + "," + items[0].DataID;
      }
      else{
       DataIDString4 = items[0].DataID;
      }
      DataIDTemp = DataIDString4;
     }
     else if (BaseLine5.visible==true){
      if (DataIDString5.length > 0){
       DataIDString5 = DataIDString5 + "," + items[0].DataID;
      }
      else{
       DataIDString5 = items[0].DataID;
      }
      DataIDTemp = DataIDString5;
     }
     
     var tEndDate:String = items[0].ModifiedDateTime;
     tEndDate = tEndDate.substr(0,10) + " " + tEndDate.substr(11,5);
     
     sparam.DataID = DataIDTemp;
     sparam.StartDate = dateAdd(items[0].ModifiedDateTime);
     strStartDate = dateAdd(items[0].ModifiedDateTime);
     sparam.EndDate = tEndDate;//items[0].ModifiedDateTime;
     strEndDate= tEndDate;//items[0].ModifiedDateTime;
     //Alert.show(sparam.StartDate+"/"+sparam.EndDate);
     ServerName = items[0].MachineName;
     ObjectName = items[0].ObjectName;
     CounterName = items[0].CounterName;
     InstanceName = items[0].InstanceName;

           Gsrv.send(sparam);
          }
        }
  }

  public function fnSetGraphByBtn(flager:Number):void
  {
         Gsrv.useProxy = false;
         Gsrv.url= "http://aaa.org/AMSWC/ForFlex/DataGetRawDataByDataID.aspx";//URL;
         Gsrv.addEventListener("result", resultHandler);
         Gsrv.addEventListener("fault", faultHandler);
 
 
   var sparam:Object = new Object();
   var DataIDTemp:String = new String;
 
   
   if (flager == 1){
    DataIDTemp = DataIDString1;
   }
   if (flager == 2){
    DataIDTemp = DataIDString2;
   }
   if (flager == 3){
    DataIDTemp = DataIDString3;
   }
   if (flager == 4){
    DataIDTemp = DataIDString4;
   }
   if (flager == 5){
    DataIDTemp = DataIDString5;
   }
   
       sparam.DataID = DataIDTemp;
   sparam.StartDate = strStartDate;//dateAdd(items[0].ModifiedDateTime);
   sparam.EndDate = strEndDate;//items[0].ModifiedDateTime;
   
   if (DataIDTemp.length>0){
    Gsrv.send(sparam);
   }
  }
  
  [Bindable]
  public var results:ArrayCollection = new ArrayCollection;
  
  public function resultHandler(event:ResultEvent):void {
   if( event.result.Data.Result  == null ) {
          mx.controls.Alert.show("The response data are empty !");
   }
   else {
    results = event.result.Data.Result  as ArrayCollection;
   }
   
   
   var firstItem:Object = results.getItemAt(0);
   var i:int = 0;
   var seriesArray:Array = [];
   var ls:LineSeries;
   for( var propertyName:String in firstItem ){
   if( propertyName != "GeneratedDate"  ){
     ls = new LineSeries();
    
     ls.yField = propertyName;
     ls.displayName = propertyName;//"["+ServerName+"]" + ObjectName + "/" + CounterName + "/" + InstanceName;
     seriesArray.push( ls );
    }
    i++;
   }
   
   if(BaseLine.visible == true){
    if( seriesArray.length > 0 ){
     BaseLine.series = seriesArray;
    }
    CA.dataProvider = Gsrv.lastResult.Data.Result;
    BaseLine.dataProvider = Gsrv.lastResult.Data.Result;
   }
   if(BaseLine2.visible == true){
    if( seriesArray.length > 0 ){
     BaseLine2.series = seriesArray;
    }
    CA2.dataProvider = Gsrv.lastResult.Data.Result;
    BaseLine2.dataProvider = Gsrv.lastResult.Data.Result;
   }
   if(BaseLine3.visible == true){
    if( seriesArray.length > 0 ){
     BaseLine3.series = seriesArray;
    }
    CA3.dataProvider = Gsrv.lastResult.Data.Result;
    BaseLine3.dataProvider = Gsrv.lastResult.Data.Result;
   }
   if(BaseLine4.visible == true){
    if( seriesArray.length > 0 ){
     BaseLine4.series = seriesArray;
    }
    CA4.dataProvider = Gsrv.lastResult.Data.Result;
    BaseLine4.dataProvider = Gsrv.lastResult.Data.Result;
   }
   if(BaseLine5.visible == true){
    if( seriesArray.length > 0 ){
     BaseLine5.series = seriesArray;
    }
    CA5.dataProvider = Gsrv.lastResult.Data.Result;
    BaseLine5.dataProvider = Gsrv.lastResult.Data.Result;
   }
   
        }
       
        public function faultHandler(event:FaultEvent):void {
   mx.controls.Alert.show(event.fault.message);
  }
  
  public function fnChartViewHide(flager:Number):void{
   if(flager==1){
    legend1.visible = true;
    BaseLine.visible = true;
    legend2.visible = false;
    BaseLine2.visible = false;
    legend3.visible = false;
    BaseLine3.visible = false;
    legend4.visible = false;
    BaseLine4.visible = false;
    legend5.visible = false;
    BaseLine5.visible = false;
   }
   if(flager==2){
    legend1.visible = false;
    BaseLine.visible = false;
    legend2.visible = true;
    BaseLine2.visible = true;
    legend3.visible = false;
    BaseLine3.visible = false;
    legend4.visible = false;
    BaseLine4.visible = false;
    legend5.visible = false;
    BaseLine5.visible = false;
   }
   if(flager==3){
    legend1.visible = false;
    BaseLine.visible = false;
    legend2.visible = false;;
    BaseLine2.visible = false;
    legend3.visible = true;
    BaseLine3.visible = true;
    legend4.visible = false;
    BaseLine4.visible = false;
    legend5.visible = false;
    BaseLine5.visible = false;
   }
   if(flager==4){
    legend1.visible = false;
    BaseLine.visible = false;
    legend2.visible = false;
    BaseLine2.visible = false;
    legend3.visible = false;
    BaseLine3.visible = false;
    legend4.visible = true;
    BaseLine4.visible = true;
    legend5.visible = false;
    BaseLine5.visible = false;
   }
   if(flager==5){
    legend1.visible = false;
    BaseLine.visible = false;
    legend2.visible = false;
    BaseLine2.visible = false;
    legend3.visible = false;
    BaseLine3.visible = false;
    legend4.visible = false;
    BaseLine4.visible = false;
    legend5.visible = true;
    BaseLine5.visible = true;
   }
  }
  
  private function fnPlusTab(event:MouseEvent):void
  {
   if (btnTab5.visible == true)
   {
    Alert.show("더이상 텝을 추가 할 수 없습니다.");
   }
   else if(btnTab4.visible == true)
   {
    btnTab5.visible = true;
    btnTab5.label = TabText.text;
    
    
    
   }
   else if(btnTab3.visible == true)
   {
    btnTab4.visible = true;
    btnTab4.label = TabText.text;
    
    
   }
   else if(btnTab2.visible == true)
   {
    btnTab3.visible = true;
    btnTab3.label = TabText.text;
    
    
   }
   else if(btnTab1.visible == true)
   {
    btnTab2.visible = true;
    btnTab2.label = TabText.text;
    
    
   }
   TabAdmin.visible = false;
   TabText.text = '';
  } 
 ]]>
</mx:Script>

 
  <mx:Canvas label="View 1" width="100%" height="100%" dragEnter="acceptIt(event)" dragDrop="performDrop(event)">

   <mx:Legend id="legend1" dataProvider="{BaseLine}" y="51" height="15%" x="72" width="30%"/>
   <mx:LineChart id="BaseLine" width="95%" height="87%" showDataTips="true" x="26" y="47" dataProvider="{Gsrv.lastResult.Data.result}">
    <mx:horizontalAxis>
     <mx:CategoryAxis id="CA" dataProvider="{Gsrv.lastResult.Data.result}" categoryField="GeneratedDate"/>
    </mx:horizontalAxis>
   </mx:LineChart>

   <mx:Legend id="legend2" dataProvider="{BaseLine2}" y="51" height="15%" x="72" width="30%" visible="false"/>
   <mx:LineChart id="BaseLine2" width="95%" height="87%" showDataTips="true" x="26" y="47" dataProvider="{Gsrv.lastResult.Data.result}" visible="false">
    <mx:horizontalAxis>
     <mx:CategoryAxis id="CA2" dataProvider="{Gsrv.lastResult.Data.result}" categoryField="GeneratedDate"/>
    </mx:horizontalAxis>
   </mx:LineChart>

   <mx:Legend id="legend3" dataProvider="{BaseLine3}" y="51" height="15%" x="72" width="30%" visible="false"/>
   <mx:LineChart id="BaseLine3" width="95%" height="87%" showDataTips="true" x="26" y="47" dataProvider="{Gsrv.lastResult.Data.result}" visible="false">
    <mx:horizontalAxis>
     <mx:CategoryAxis id="CA3" dataProvider="{Gsrv.lastResult.Data.result}" categoryField="GeneratedDate"/>
    </mx:horizontalAxis>
   </mx:LineChart>

   <mx:Legend id="legend4" dataProvider="{BaseLine4}" y="51" height="15%" x="72" width="30%" visible="false"/>
   <mx:LineChart id="BaseLine4" width="95%" height="87%" showDataTips="true" x="26" y="47" dataProvider="{Gsrv.lastResult.Data.result}" visible="false">
    <mx:horizontalAxis>
     <mx:CategoryAxis id="CA4" dataProvider="{Gsrv.lastResult.Data.result}" categoryField="GeneratedDate"/>
    </mx:horizontalAxis>
   </mx:LineChart>

   <mx:Legend id="legend5" dataProvider="{BaseLine5}" y="51" height="15%" x="72" width="30%" visible="false"/>
   <mx:LineChart id="BaseLine5" width="95%" height="87%" showDataTips="true" x="26" y="47" dataProvider="{Gsrv.lastResult.Data.result}" visible="false">
    <mx:horizontalAxis>
     <mx:CategoryAxis id="CA5" dataProvider="{Gsrv.lastResult.Data.result}" categoryField="GeneratedDate"/>
    </mx:horizontalAxis>
   </mx:LineChart>


   <mx:Button x="26" y="10" label="추가" click="TabAdmin.visible='true';"/>
   <mx:Panel id="TabAdmin" x="72" y="51" width="35%" height="75%" layout="absolute" visible="false">
    <mx:TextInput id="TabText" x="35" y="19"/>
    <mx:Button x="82" y="128" label="Button" click="fnPlusTab(event)" />
   </mx:Panel>
   
   <mx:Button id="btnTab1" x="82" y="10" label="Base" click="fnChartViewHide(1);fnSetGraphByBtn(1);" />
   <mx:Button id="btnTab2" x="163" y="10" label="Button" visible="false" click="fnChartViewHide(2);fnSetGraphByBtn(2);"/>
   <mx:Button id="btnTab3" x="244" y="10" label="Button" visible="false" click="fnChartViewHide(3);fnSetGraphByBtn(3);"/>
   <mx:Button id="btnTab4" x="325" y="10" label="Button" visible="false" click="fnChartViewHide(4);fnSetGraphByBtn(4);"/>
   <mx:Button id="btnTab5" x="406" y="10" label="Button" visible="false" click="fnChartViewHide(5);fnSetGraphByBtn(5);"/>

  </mx:Canvas>
  
 
</mx:Panel>


------------------------------------------------------------------------------------------------------------
줄 안맞췄다고 모라고 하진 마십셔 -_-;

다른 기능은 별로 없고...프로토 버젼입니다.
GRID에 있는 Data를 선택한 후에 Line Chart에 Drag&Drop하면 현재 가져온 값의 ID를 가져와서
HttpService로 서버로 요청보내고 가져온 값을 XML 파싱(자동으로)하여...
뿌려주는 것입니다.
위에 수많은 if문들을 자동으로 생성되는 Tab Separate...StackView겠지요?
그거 작성하면서 생긴것입니다.
이건 베타판에서는 플레쉬로 대체하였습니다.
여기선 텝의 가면을 쓴 ... 버튼입니다. -_-

이 글과 관련있는 글을 자동검색한 결과입니다 [?]

by 애매모애 | 2007/12/26 22:59 | Flex | 트랙백 | 덧글(0)

트랙백 주소 : http://cherin.egloos.com/tb/1193995
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]

:         :

:

비공개 덧글

◀ 이전 페이지 다음 페이지 ▶