HLOCChart Example

HLOCChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;

   [Bindable]
   private var _chartData:ArrayCollection = new ArrayCollection([
    {Month: "January '03",   open:88,  high: 18,  low:91, close: 51  },
    {Month: "February '03",  open:68,  high: 94,  low:2, close: 64  },
    {Month: "March '03",   Widgets:63,  high: 44,  low:33, close: 7 },
    {Month: "April '03",   open:94,  high: 84,  low:4 , close: 8}, 
    {Month: "May '03",    open:70,  high: 58,  low:56, close: 93  },
    {Month: "June'03",    open:70,  high: 58,  low:6, close: 10  },
    {Month: "July '03",   open:45,  high: 39,   low:7, close: 11  },
    {Month: "August '03",   open:38,  high: 74,  low:84, close: 12  },
    {Month: "September '03",  open:53,  high: 26,  low:9, close: 43  },
    {Month: "October '03",   open:68,  high: 47,  low:10, close: 14  },
    {Month: "November '03",  open:82,  high: 24,  low:71, close: 15 },
    {Month: "December '03",  open:80,  high: 82,  low:12, close: 36 }
    ]);

   private function formatThousands(val:Number):String
   {
    return Math.floor(val/100)/10 +  "K";
   }

  ]]>
 </mx:Script>

 <mx:Panel title="Sample Chart" width="100%" height="100%">
  <mx:HLOCChart id="hlocChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">

   <mx:verticalAxis>
    <mx:LinearAxis title="LinearAxis"/>
   </mx:verticalAxis>

   <mx:series>
    <mx:HLOCSeries openField="open" closeField="close" highField="high" lowField="low" displayName="Ticker">
     <mx:stroke>
      <mx:Stroke weight="1" color="black" />
     </mx:stroke>
     <mx:openTickStroke>
      <mx:Stroke weight="2" color="black"/>
     </mx:openTickStroke>
     <mx:closeTickStroke>
      <mx:Stroke weight="3" color="black"/>
     </mx:closeTickStroke>
    </mx:HLOCSeries>
   </mx:series>

  </mx:HLOCChart>
  <mx:Legend dataProvider="{hlocChart}" direction="horizontal"/>
 </mx:Panel>
 <mx:Style source="ChartStyles.css"/>
</mx:Application>

ChartStyles.css

/* CSS file */

HLOCChart
{
 fontWeight: normal;
 gridLinesStyleName: hLOCChartGridLines;
 fontFamily: Arial;
}
.hLOCChartGridLines
{
 direction: both;
 verticalShowOrigin: true;
}
@font-face
{
 fontFamily: Arial;
 fontWeight: normal;
 fontStyle: normal;
 src: local("Arial");
}

The executable swf for the above example is as shown below: