Flex LineChart 동적으로 그리기

* HTTPService 서비스를 이용하여 라인챠트를 동적으로 그려보자 ~

 

1. XML 파일 내용

 

<?xml version="1.0" encoding="euc-kr" ?>
<data>
<result data1="10시">
  <회원>12417</회원>
  <접속>29854</접속>
  </result>
<result data1="11시">
  <회원>34698</회원>
  <접속>12871</접속>
  </result>
<result data1="12시">
  <회원>17209</회원>
  <접속>14479</접속>
  </result>
<result data1="13시">
  <회원>12695</회원>
  <접속>21368</접속>
  </result>
<result data1="14시">
  <회원>10200</회원>
  <접속>39800</접속>
  </result>
<result data1="15시">
  <회원>10660</회원>
  <접속>62829</접속>
  </result>
<result data1="16시">
  <회원>41927</회원>
  <접속>19110</접속>
  </result>
<result data1="17시">
  <회원>86200</회원>
  <접속>11948</접속>
  </result>
</data>

 

2. FLex 소스 부분

 

<?xml version="1.0" encoding="euc-kr"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" width="100%" height="100%" backgroundGradientColors="[#ffffff, #ffffff]"
    paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" initialize="System.useCodePage=true;preApp();">
    <mx:Script>
        <![CDATA[
        import mx.controls.*;
 import mx.charts.LineChart;
 import mx.charts.series.LineSeries;
 import mx.collections.*;
 import mx.controls.Label;
 import mx.rpc.http.mxml.HTTPService;
 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;
 import mx.charts.Legend;
 import mx.charts.CategoryAxis;

 [Bindable]
 public var dataUrl:String;
 public var LegendTX:String;
 public var myAC:ArrayCollection;
 public var arrArray:Array = new Array(); 

 private function preApp():void
 {
  dataUrl = this.parameters["dataUrl"];
  srv.send();
 }

 public function mltL_chart():void
 {
  myAC = srv.lastResult.data.result as ArrayCollection;

  var objACProperty:Object = myAC.getItemAt(0);
  var arr:Array = new Array();
  
  for (var prop:String in objACProperty)
  {
   if(prop!="data1")
   {
    arr.push(prop)
   }
  }

  for(var i:int = 0; i < arr.length; i++)
  {
   var dynamicSeries:LineSeries = new LineSeries();
   dynamicSeries.dataProvider= myAC;
   dynamicSeries.xField = "data1";
   dynamicSeries.yField = arr[i];
   dynamicSeries.displayName = arr[i];
   dynamicSeries.setStyle("form", "curve");
   arrArray.push(dynamicSeries);
  }

  var Chart01:LineChart = new LineChart();
  Chart01.id =  "Chart01";
  Chart01.percentWidth=100;
  Chart01.percentHeight=100;
  Chart01.setStyle("paddingLeft",0);
  Chart01.setStyle("paddingRight",0);
  Chart01.showDataTips = true;
  Chart01.dataProvider = myAC;
  Chart01.setStyle("paddingRight",0);
  Chart01.setStyle("fontSize",12);

  var Chart01_CategoryAxis:CategoryAxis = new CategoryAxis;
  Chart01_CategoryAxis.categoryField = "data1";
  Chart01.horizontalAxis = Chart01_CategoryAxis;

  Chart01.series = arrArray;
  addChild(Chart01);

  var legendx:Legend = new Legend();
  legendx.dataProvider = Chart01;
  legendx.direction = "horizontal";
  legendx.setStyle("fontSize",12);
  legendx.setStyle("bottom",0);
  legendx.setStyle("left",0);
  addChild(legendx);
 }

  private function doFault(event:FaultEvent):void {
  Alert.show("DATA load Error .......");
 }

      ]]>
     </mx:Script>
<mx:HTTPService id="srv" url="{dataUrl}"  useProxy="false" showBusyCursor = "true" fault="doFault(event)" result="mltL_chart();"/>

</mx:Application>

3. html 실행 부분입니다. ㅋ ㅋ

 

<table border=1>
<Tr><td>
<script src="./AC_OETags.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
 AC_FL_RunContent(
   "src", "test",
   "width", "770",
   "height", "500",
   "align", "middle",
   "id", "test",
   "quality", "high",
   "bgcolor", "#869ca7",
   "name", "test",
   "flashvars","dataUrl=piexml.xml",
   "x-x-allowscriptaccess","sameDomain",
   "type", "application/x-shockwave-flash",
   "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
</script>
</td>
</tr>
</table>

 

4. AC_OETags.js 스크립트는 다들 아실거라 생각되구요 . Flex에서 기본 제공 되는 javascript 이니까요 .^^*

ㅎㅎ

잘 그림 되겠죵 ?ㅋ

 

결가값을 요로코롬 나옵니다 .ㅋ