Blog Stats Using ColumnChart

One of the main advantages of using Flex to display blog stats, besides effects and style is ability to dynamically load data as RSS feed or web service. When this is not an option, like with Sitemeter’s basic plan I’m using, more static solution is available with XML file or even simple embedded Array inside MXML file.

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300">

 <mx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    public var stats:ArrayCollection = new ArrayCollection([
       {Month:"Jul07", Uniques:435, PageViews:622},
       {Month:"Aug", Uniques:1189, PageViews:1652},
       {Month:"Sep", Uniques:1937, PageViews:2698},
       {Month:"Oct", Uniques:1901, PageViews:2508},
       {Month:"Nov", Uniques:1698, PageViews:2426},
       {Month:"Dec", Uniques:2054, PageViews:3074},
       {Month:"Jan", Uniques:2751, PageViews:4175},
       {Month:"Feb", Uniques:2963, PageViews:4299},
       {Month:"Mar", Uniques:3336, PageViews:4783},
       {Month:"Apr", Uniques:3926, PageViews:6053},
       {Month:"May08", Uniques:4082, PageViews:6241}
      ]);
   ]]>
 </mx:Script>
 <mx:Style>
  ColumnChart{
   fontFamily:Verdana;
   chartSeriesStyles:ser1,ser2; 
  }
  .ser1{
   fill:#F7FA9D;
  }
  .ser2{
   fill:#147CCC;
  }
 </mx:Style>
 <mx:Canvas width="480" height="280" horizontalCenter="0" verticalCenter="0" backgroundColor="#98c8de">
  <mx:ColumnChart x="10" y="60" id="columnchart1" dataProvider="{stats}" height="210" width="460" showDataTips="true">
   <mx:horizontalAxis>
          <mx:CategoryAxis
               dataProvider="{stats}"
               categoryField="Month"
          />
       </mx:horizontalAxis>
       <mx:series>
          <mx:ColumnSeries
               xField="Month"
               yField="Uniques"
               displayName="Uniques"
          />
          <mx:ColumnSeries
               xField="Month"
               yField="PageViews"
               displayName="PageViews"
          />
       </mx:series>
  </mx:ColumnChart>
  <mx:Legend dataProvider="{columnchart1}" x="367" y="-1"/>
  <mx:Text x="10" y="10" text="Flanture Blog Stats" fontFamily="Verdana" fontWeight="bold" fontSize="15" enabled="true"/>
 </mx:Canvas>
</mx:Application>

.