Jalaj P. Jha Technical & Miscellaneous Ramblings

Flash Charts

Wordpress.com dashboard provides highly useful statistics related to page views, feed readers etc. with beautiful flash charts which are not available in the wordpress package itself. I wondered if I too could make similar charts with some existing software. I little scrutiny soon landed me to the developer's site maani.us.

The charts, are available in two versions PHP/SWF and XML/SWF. These are commercial products requiring Licence keys, however unregistered/free use is also allowed with restriction that clicking on the chart opens developer's site, charts cannot be embedded and that you have to live without any technical support.

Both the versions expect XML data as input to the Flash file. While XML/SWF version expects you to prepare the XML file manually (or through other server side scripting languages as ASP etc.) the PHP/SWF version provides a PHP library which relieves you from much of the work required to create the input file.

The heart of this software is the Charts.SWF flash file which takes inputs as licence key, xml page URL and the path to the charts library. The charts library is a collection of about 20 flash files which actually does the work of reproducing the data to visual graphs of the type expected. You can choose between different chart types as Line, Column, Pie, Bar, Area, Candlestick, Scatter, Polar etc.

While a complete reference to the XML input file could be found at developers site, the input file would look like something as below.

<chart>
	<chart_data>
		<row>
			<string></string>
			<string>03-01</string>
			<string>03-02</string>
			<string>03-03</string>
			<string>03-04</string>
			<string>03-05</string>
			<string>03-06</string>
			<string>03-07</string>
			<string>03-08</string>
			<string>03-09</string>
			<string>03-10</string>
			<string>03-11</string>
			<string>03-12</string>
			<string>03-13</string>
			<string>03-14</string>
			<string>03-15</string>
			<string>03-16</string>
			<string>03-17</string>
			<string>03-18</string>
			<string>03-19</string>
			<string>03-20</string>
			<string>03-21</string>
			<string>03-22</string>
			<string>03-23</string>
			<string>03-24</string>
			<string>03-25</string>
			<string>03-26</string>
			<string>03-27</string>
			<string>03-28</string>
			<string>03-29</string>
			<string>03-30</string>
		</row>
		<row>
			<string>Views per day</string>
			<number>152</number>
			<number>180</number>
			<number>86</number>
			<number>68</number>
			<number>152</number>
			<number>136</number>
			<number>143</number>
			<number>159</number>
			<number>151</number>
			<number>74</number>
			<number>41</number>
			<number>132</number>
			<number>150</number>
			<number>165</number>
			<number>217</number>
			<number>255</number>
			<number>118</number>
			<number>150</number>
			<number>250</number>
			<number>286</number>
			<number>404</number>
			<number>333</number>
			<number>220</number>
			<number>115</number>
			<number>116</number>
			<number>313</number>
			<number>276</number>
			<number>260</number>
			<number>282</number>
			<number>130</number>
		</row>
	</chart_data>
	<draw>
		<text color="14568a" alpha="70" font="georgia" rotation="0" bold=""
		   size="20" x="72" y="0" width="400" height="400" h_align="left">
		   Last 30 Days</text>
	</draw>
	<legend_rect x="-100" y="-100" width="10" height="10" margin="0" />
	<chart_rect x="72" y="50" width="570" />
	<chart_grid_h alpha="10" color="0066FF" thickness="28" />
	<chart_grid_v alpha="10" color="0066FF" thickness="1" />
	<series_color>
		<value>14568a</value>
	</series_color>
	<chart_value prefix="" suffix=" views" decimals="0" separator=","
	   position="cursor" hide_zero="1" as_percentage="" font="arial" bold=""
	   size="12" color="ffffff" background_color="000000" alpha="80" />
	<axis_category skip="1" size="10" orientation="diagonal_up" />
	<chart_type>line</chart_type>
	<chart_transition type="dissolve" />
</chart>