In this recipe we are going to create a quotes graph that shows the value of an action, in this case the Google action, for one day. Every minute the graph is going to update itself and the update is going to be animated.
Open the files downloaded from the Packt Publishing website, look into the Chapter 7 | recipe 3 folder and follow along.
The following are the steps required to build this graph:
- Get the
HorizontalAxisandVerticalAxisclass from the Drawing a bar chart with Flex recipe in Chapter 3, Creating Bar Charts. - In
HorizontalAxis.as, remove the labels; we won't be needing them. - In
VerticalAxis.as, addminimumValueas a parameter. This axis is not going to start at 0 for this recipe but at the minimum value specified. The following is the line that needs to be modified (range is the difference betweenmaximumValueandminimumValue).textField.text = String(Math.round(((i + 1) / (_numberOfMarks)) * range + minimumValue));
- Now create
LinePart.asand add thecreateLinefunction to draw the initial line:public function createLine():void { graphics.lineStyle(2, 0x4e81d4); graphics.moveTo(startX, graphHeight - startY); graphics.lineTo(endX, graphHeight - endY); } - Now create the
_onEnterFramefunction. The goal here is to draw intermediary lines that will end with the target line. - Add the
AnimatedLineChartclass with itscreateGraphfunction. - Add the
updatefunction to it, where you go over every existing line and animate it. If you don't have enough you can create new ones. - Create the
Mainclass. - Instantiate
AnimatedLineChartand add it to the stage. - Query the Yahoo! Finance API and once you have the data, call the update function on
AnimatedLineChart. - Repeat step 10 every minute.
In order to animate this sort of graph, we can't just tween a property like we would with a bar chart. We need to erase what is on the screen and redraw intermediate states until the animation is over. Then we can fade in the new parts using TweenLite.
Most of this happens in LinePart.as. When the data is updated, the chart tells each line segment that already exists to animate with new coordinates. If it doesn't have enough line segments, it will create new ones but fade them in just after the existing ones have finished moving.
In LinePart.as, the _onEnterFrame function does all the heavy lifting. First, it will erase the existing line by calling graphics.clear(), and after that it checks if the animation has run long enough. We wanted our animation to last for 0.5 seconds and our frame rate was 30 frames per second, so we need the _onEnterFrame function to run 15 times.
If it ran 15 times, draw the final line; if not draw an intermediary line with the current coordinates going towards the final ones.
Now we need to get our data. This is pretty simply done using Yahoo! Finance API. Using this URL: http://bit.ly/Rzk7Cd, you can get back a JSON string with the value of the stock of Google. In that URL, just change the GOOG for any other company symbol to get their stock value. You can query that URL every minute to get an updated value. Once you get a new value, you add it to the existing data and call an update on the graph.
In this type of graph, it is not just the line that needs to be updated.
- The Creating a line graph based on a function recipe in Chapter 1, Getting Started with Graph Drawing
- The Zooming in on specific data set recipe