If zooming and panning is not enough to give a clear insight into the data, another option is to link graphs. When a user selects a data point he wants to inspect, a new graph opens, giving a detailed look at the information.
This recipe will work with two datasets and show the basics of interacting in graphs. You can adapt this to suit your specific situation.
This recipe will start, once again, from the initial graph. Although the end result is the same, we have restructured the code a little to help us keep everything organized when we start adding the recipe's code. We've also added a second graph and dataset that will represent our zoomed in data.
package com.graphing.link
{
import com.graphing.PointGraphPoint;
import flash.display.Sprite;
import com.graphing.PointGraph;
import flash.events.MouseEvent;
public class Recipe7 extends Sprite
{
private var _graph:PointGraph;
private var _data:Array = [[0, 20], [50, 70], [100, 0], [150, 150], [200, 300], [250, 200], [300, 400], [350, 20], [400, 60], [450, 250], [500, 90], [550, 400], [600, 500], [650, 450], [700, 320]];
private var _graph2:PointGraph;
private var _data2:Array = [[0,30],[50,80],[100,10],[150,160],[200,310],[250,210],[300,410],[350,30],[400,70],[450,260],[500,100],[550,410],[600,510],[650,460],[700,330]];
public function Recipe7()
{
initGraph();
addChild(_graph);
}
private function initGraph():void {
_graph = new PointGraph();
_graph.data = _data;
_graph.graphWidth = 800;
_graph.graphHeight = 600;
_graph.graphLeft = -50;
_graph.graphRight = 750;
_graph.graphTop = 550;
_graph.graphBottom = -50;
_graph.createGraph();
_graph.drawHorizontalAxis(0, 0, 700, 50, ["0", "700"]);
_graph.drawVerticalAxis(0, 0, 500, 50, ["0", "250", "500"]);
}
}
}We first create the graph that will be shown when the user clicks on a point:
- Add a function inside the
Recipe7class that creates the second graph, half the size of the original one, positioned in the middle of the screen.private function initGraph2():void { _graph2 = new PointGraph(); _graph2.data = _data2; _graph2.graphWidth = 400; _graph2.graphHeight = 300; _graph2.graphLeft = -50; _graph2.graphRight = 750; _graph2.graphTop = 550; _graph2.graphBottom = -50; _graph2.createGraph(); _graph2.x = 200; _graph2.y = 150; _graph2.drawHorizontalAxis(0, 0, 700, 50, ["0", "700"]); _graph2.drawVerticalAxis(0, 0, 500, 50, ["0", "250", "500"]); } - In the
Recipe7constructor, call this method so the second graph is initialized correctly. Add the following line underneathinitGraph():initGraph2();The next step is actually showing the graph when the user clicks on a data point.
- In the constructor, start listening for clicks.
_graph.addEventListener(MouseEvent.CLICK, onClickDetail);
- In the click listener, show the second graph and hide the first one:
private function onClickDetail(event:MouseEvent):void { if (event.target is PointGraphPoint) { _graph.alpha = .2; addChild(_graph2); event.stopPropagation(); stage.addEventListener(MouseEvent.CLICK, onClickHideDetail); } } - And finally we need to hide the second graph and display the first one again when the user clicks another time.
private function onClickHideDetail(event:MouseEvent):void { stage.removeEventListener(MouseEvent.CLICK, onClickHideDetail); _graph.alpha = 1; removeChild(_graph2); }If you run the program now and click on any data point, it will fade out the original graph and show a half-size second graph in the middle of the screen. If you click anywhere, the second graph will hide.
This recipe is a combination of all the techniques we've seen in this chapter.
First we use the properties of the graph object to create one in the middle of the screen and only half the size of the original one. Obviously, you can create any graph you like inside the initGraph2 method. You can even add a parameter and make it dependent upon the point selected. Although in that case you may need to run the method inside the click listener, so it generates the correct graph each time (see the There's more… section for more details on this extension).
Notice that we don't add the second graph to the stage, so it will remain invisible. When the user clicks on the first graph, we filter out only the clicks on actual points.
To show the second graph, we simply fade out the first one by adjusting the alpha value and attaching the second graph to the stage. Since we add it after the first graph, it will show up on top of it.
Calling the event's stopPropagation method will make sure that the event is not sent to other event handlers. In this case, if we didn't stop the propagation of the event, it would also fire the new click handler we attached to hide the second graph. Try to comment out this line and see what happens.
Hiding the second graph is almost the reverse of showing it. We remove the hide handler, remove the second graph from the stage, and change back the alpha value of the first graph.
Now let's talk about some other options, or possibly some pieces of general information that are relevant to this task.
In a real example, you will probably want to show a different data set depending on what point the user clicked on. This can be achieved by analyzing the event.target event in the onClickDetail method.
The event.target event can be cast to a PointGraphPoint class. This can be used to obtain data on the selected point, which in turn can be used to select the correct data set, or even the correct graph, if you want to show completely different graph types.
Chapter 7, Animating a Graph,will give you some techniques to animate your graphs. This can be used to create a smooth transition between the two graphs. For instance, you could fade in the new graph while fading out the old one. Or you can create a zooming animation to give the impression of zooming into the selected data.