Package	kor.charts
Class	public class RealTimeChart

RealTimeChart 클래스는 데이터를 시간 단위와 사이즈 단위로 보여주는 역할을 하는 차트 컨트롤 입니다. 일반적인 차트의 경우 dataProvider 속성에 데이터를 삽입할 경우 데이터가 갱신되는 반면, RealTimeChart 는 기존 데이터에 새로운 데이터를 붙이는 형식입니다. 예를 들어, 데이터 사이즈를 기준으로 차트 아이템을 10개 표현하고자 한다면 기존 데이터와 새로운 데이터의 양에 상관없이 최근 10개의 데이터만을 차트는 출력하게 됩니다. 시간을 기준으로 데이터를 표현하고자 할 경우에는 DateTimeAxis 클래스의 인스턴스를 해당 축 속성값으로 지정해야 합니다. interval 을 10초로 하고 최근 60초의 데이터를 표현하고자 한다면 차트는 interval 10 을 갖는 최근 60초의 데이터를 표현하게 됩니다. 실제적으로 차트가 출력하고 있는 총 아이템은 6개가 됩니다.

레이아웃은 아래와 같이 작성합니다.

    <rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">
   <Options>
    <Caption text="Stock Monitoring" />
    <SubCaption text="Real Time Chart" fontSize="11" textAlign="right"/>
    <Legend/>
   </Options>
    <DateFormatter id="dateFmt" formatString="HH시 NN분 SS초" /> 
   <RealTimeChart id="chart" dataDisplayType="time"  timePeriod="60" interval="3" showDataTips="true">
    <backgroundElements>
     <GridLines direction="both"/>
    </backgroundElements> 
    <horizontalAxis>
       <DateTimeAxis id="hAxis" dataUnits="seconds" labelUnits="seconds" dataInterval="3" interval="3" formatter="{dateFmt}" displayLocalTime="true"/>
    </horizontalAxis>
    <series>
     <Column2DSeries labelPosition="outside" yField="Volume" xField="Time" 
      displayName="Trading Volume"
      itemRenderer="GradientColumnItemRenderer">
       <filters>
          <DropShadowFilter distance="3" color="0x666666" alpha=".8"/>
       </filters>
       <fill>
       <SolidColor color="0xB0C759"/>
       </fill>
      <verticalAxis>
         <LinearAxis id="vAxis1"  title="Volume" minimum="0" maximum="10000"/>
      </verticalAxis> 
     </Column2DSeries>
     <Line2DSeries labelPosition="up" xField="Time" yField="Price" displayName="Stock Price" interpolateValues="false"
        itemRenderer="CircleItemRenderer"  radius="5" fill="0xFFFF00">
      <filters>
       <DropShadowFilter distance="3" color="0x666666" alpha="0.8"/>
      </filters>
      <stroke>
       <Stroke color="0xE48701" weight="2"/>
      </stroke>
      <lineStroke>
        <Stroke color="0xE48701" weight="4"/>
       </lineStroke>
        <verticalAxis>
       <LinearAxis id="vAxis2" title="Price" minimum="0" maximum="1000"/>           
      </verticalAxis>
     </Line2DSeries>
    </series>
    <verticalAxisRenderers>
     <Axis2DRenderer placement="left" axis="{vAxis1}">
     </Axis2DRenderer>
     <Axis2DRenderer placement="right" axis="{vAxis2}">
     </Axis2DRenderer>
      </verticalAxisRenderers>
   </RealTimeChart>
   <HttpServiceRepeater url="http://demo.riamore.net/chartTest/data4.jsp" target="{chart}" interval="3"  method="get"/>
  </rMateChart>  
  

---

---

Copyright(c) 2011 RiaMore Soft, Inc. All Right Reserved