20 June 2008

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>




.

0 comments:

 

template by blogger templates