6dollarmillions.in

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:

CandleStickChart Example

CandleStickChart.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:CandlestickChart id="candleStickChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">

<mx:verticalAxis>
<mx:LinearAxis title="LinearAxis" displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:CandlestickSeries openField="open" closeField="close" highField="high" lowField="low" displayName="Ticker">
<mx:fill>
<mx:SolidColor color="red"/>
</mx:fill>
<mx:declineFill>
<mx:SolidColor color="green"/>
</mx:declineFill>
<mx:stroke>
<mx:Stroke weight="1" color="black"/>
</mx:stroke>
</mx:CandlestickSeries>
</mx:series>

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



ChartStyles.css

/* CSS file */


CandlestickChart
{
fontWeight: normal;
gridLinesStyleName: candlestickChartGridLines;
fontFamily: Arial;
}
.candlestickChartGridLines
{
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:

LineChart Example

LineChart.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", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

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:LineChart id="lineChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:LineSeries xField="Month" yField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:LineSeries>
<mx:LineSeries xField="Month" yField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

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



ChartStyles.css

/* CSS file */

LineChart
{
fontWeight: normal;
gridLinesStyleName: lineChartGridLines;
fontFamily: Arial;
}
.lineChartGridLines
{
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:



Different varieties in Line charts:

BarChart Example

BarChart.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", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

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:BarChart id="barChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:verticalAxis>

<mx:horizontalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:horizontalAxis>

<mx:series>
<mx:BarSeries yField="Month" xField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:BarSeries>
<mx:BarSeries yField="Month" xField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

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



ChartStyles.css

/* CSS file */

BarChart
{
fontWeight: normal;
gridLinesStyleName: barChartGridLines;
fontFamily: Arial;
}
.barChartGridLines
{
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:

AreaChart Example

AreaChart.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", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

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:AreaChart id="areaChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:AreaSeries xField="Month" yField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:AreaSeries>
<mx:AreaSeries xField="Month" yField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

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



ChartStyles.css

/* CSS file */

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


The executing swf for the above example is shown below:

Example for ColumnChart

ColumnChart.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", Widgets:885202, Blinkies: 184454, monthIdx:1 },
{Month: "February '03", Widgets:683392, Blinkies: 945385, monthIdx:2 },
{Month: "March '03", Widgets:638820, Blinkies: 442383, monthIdx:3 },
{Month: "April '03", Widgets:949932, Blinkies: 841201, monthIdx:4 },
{Month: "May '03", Widgets:704302, Blinkies: 587449, monthIdx:5 },
{Month: "June'03", Widgets:704302, Blinkies: 587449, monthIdx:6 },
{Month: "July '03", Widgets:453552, Blinkies: 393039, monthIdx:7 },
{Month: "August '03", Widgets:387254, Blinkies: 746652, monthIdx:8 },
{Month: "September '03", Widgets:537254, Blinkies: 263652, monthIdx:9 },
{Month: "October '03", Widgets:686254, Blinkies: 472652, monthIdx:10 },
{Month: "November '03", Widgets:820254, Blinkies: 246652, monthIdx:11 },
{Month: "December '03", Widgets:800254, Blinkies: 826652, monthIdx:12 }
]);

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:ColumnChart id="colChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" displayName="Month"/>
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis displayName="Units Sold"/>
</mx:verticalAxis>

<mx:series>
<mx:ColumnSeries xField="Month" yField="Widgets" displayName="TestWidgets">
<mx:fill>
<mx:SolidColor color="#82C9EB"/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries xField="Month" yField="Blinkies" displayName="TestBlinkies"/>
</mx:series>

</mx:ColumnChart>
<mx:Legend dataProvider="{colChart}"/>
</mx:Panel>
<mx:Style source="ChartStyles.css"/>
</mx:Application>


ChartStyles.css

ColumnChart
{
fontFamily: Arial;
gridLinesStyleName: columnChartGridLines;
verticalAxisStyleName: linedNumericAxis;
horizontalAxisStyleName: hangingCategoryAxis;

}
@font-face
{
fontFamily: Arial;
fontWeight: normal;
fontStyle: normal;
src: local("Arial");
}


The executing SWF file for the previous example is shown below: