introducing time-series-graph

<p><em>A Google Finance-esque Charting Class for Flash written in AS3</em></p>
<p>Over at Google Code you'll find my new <a href="http://code.google.com/p/time-series-graph/">time-series-graph class</a>.  It's a simple charting class that lets you insert a chart similar (very similar) to that used by Google in their <a href="http://finance.google.com/finance?q=google&hl=en">Finance Pages</a>.</p>
<p>Go over to <a href="http://code.google.com/p/time-series-graph/">my project page</a> or just <a href="http://time-series-graph.googlecode.com/files/time-series-graph-ver0.5.2.zip">download the .zip file</a> of the class.  The .zip file includes
</p>
<ul>
	<li>a folder called "Charting" that contains a .fla file that includes the movie clips necessary for the class (compile this for an example of the class)</li>
	<li>a folder lib/com/indiemaps/charting that contains the actual .as  file of the class</li>
</ul>

<p>To use the charting class, do the following:
<ul>
	<li>Drop my indiemaps folder into your lib/com directory</li>
	<li>Open up Charting/charting.fla and copy the files in its library into your .fla file's library</li>
	<li>Use the following code in your .as or .fla file</li>
</ul>
<div class="code">
<ul>
	<li>var myGraph = new TimeSeriesGraph(this);</li>
	<li>myGraph.setGraphSize(width, height);</li>
	<li>myGraph.drawGraphs(valueArray, dateArray);</li>
	<li>myGraph.applySecondGraph(valueArray,dateArray);</li>
	<li>addChild(myGraph);</li>
</ul>
</div>
<p>The above code should be pretty self-explanatory, except perhaps for the arrays.  You need to have your data that you'd like to graph in two arrays.  The first is an array of your data values, from first to last, in chronological order.  The second needs to be <em>an array of date objects</em> that corresponds to your value array.  Creating these arrays is up to you, though it should be pretty simple.</p>

<p>Other public methods include</p>
<div class="code">
<ul>
	<li>removeSecondGraph() //removes the smaller bar graph, showing only the main graph in the graph window</li>
	<li>changeLabels("First Label", "Second Label", "First Units", "Second Units")</li>
	<li>mainAverage() //returns the average value of the currently viewed main window</li>
	<li>mainMin() //returns the minimum value in the currently viewed main window</li>
	<li>mainMax() //returns the maximum value in the currently viewed main window</li>
</ul>
</div>
<p>Below you'll find an example of the chart in action.  I've loaded in George W. Bush's Gallup Poll approval ratings on the main graph window and those who responded "unsure" in the smaller bar chart.</p>
<p><!-- insert flash swf to be compliant -->
<object type="application/x-shockwave-flash" base="http://indiemaps.com/blog/flash/" data="http://indiemaps.com/blog/flash/approvalDemo.swf" width="500" height="400">
<param base="http://indiemaps.com/blog/flash/" name="movie" value="http://indiemaps.com/blog/flash/approvalDemo.swf" />
</object></p>
<p>This was originally a part of the <a href="http://indiemaps.com/blog/index.php/portfolio/dashboard.txt">Hydrologic Dashboard</a> that I'm working on for UW Sea Grant.  I recoded it as a general class so that I (and others) could simply add it to any project.  Of course, there's plenty more to do.  I can think of a dozen more public methods that could be added to the class.  So if you're interested, go ahead and <a href="http://code.google.com/p/time-series-graph/source">check out the code</a> and go to town.</p>
<p>Coding this has also made me realize that I need to learn Flex.  <a href="http://www.meutzner.com/blog/">Brendan Meutzner</a> has already coded <a href="http://www.meutzner.com/blog/index.cfm/2007/8/14/Google-Finance-with-Flex-Code">a very similar but better charting component</a> for use in Flex.  And apparently it took much less than the dozen+ hours it took me to create time-series-graph, thanks mostly to the use of mxml and Flex's built-in charting components.  I hadn't seen Brendan's component until after I completed mine; at least now Flash programmers can get in on the charting fun.</p>