Due to the way the display list works, we don't have access to the stage until the graph is attached to it. This means we have to create the graph after the ADDED_TO_STAGE event is fired. This detail is not important for the rest of the recipe, so if you don't understand it at this point, don't worry.

Instead of transforming the graph shape (via its x, y, scaleX, and scaleY parameters), we transform the coordinates of the point. The result is that the circle is always as we expected and is not scaled with your coordinates system (see the Scaling woes section in the previous recipe).

We now start with the same program as the Building point charts recipe, but using the new Graph class:

package  
{
  import flash.display.Sprite;

  public class Recipe3 extends Sprite
  {
    private var graph:Graph;

    public function Recipe3() 
    {
      graph = new Graph( -400, 300, 400, -300);
      addChild(graph);

      graph.drawPoint(0, 0);
      graph.drawPoint(20, 20);
      graph.drawPoint(-40,-40);
    }

  }
}

If everything went right, you should see, once again, the exact same result. Only now, our main program (Recipe3) only shows what we want to do (that is, to create a graph and draw points). How those actions are performed, is written inside the Graph class.

Now to create this recipe. We need a way to draw lines. Add the following method to the Graph class:

public function drawLine(x1:Number, y1:Number, x2:Number, y2:Number):void
{
  var transformedLocation1:Point = matrix.transformPoint(new Point(x1, y1));
  var transformedLocation2:Point = matrix.transformPoint(new Point(x2, y2));

  graphics.lineStyle(2, 0x000000);
  graphics.moveTo(transformedLocation1.x, transformedLocation1.y);
  graphics.lineTo(transformedLocation2.x, transformedLocation2.y);
}

Now let's do something useful with this. Say you want to draw the sine function in the range starting from –π/2 and ending at π/2. The result will go from -1 to 1. So we use (-π/2, 1) and (π/2) as the upper-left and lower-right corners of our graph.

But a sine is not a linear function, so we can't just draw one line from (–π/2, -1) to (π/2, 1). What we will do, is approximate the sine curve by splitting it into smaller parts and drawing a number of shorter lines.

Take a look at the following code:

package  
{
  import flash.display.Sprite;
  import flash.geom.Point;

  public class Recipe3 extends Sprite
  {
    private var graph:Graph;

    public function Recipe3() 
   {
      graph = new Graph( -Math.PI/2, 1, Math.PI/2, -1);
      addChild(graph);

      var i:Number = -Math.PI/2;
      var step:Number = 0.1;
      var previousPoint:Point = new Point(i, Math.sin(i));
      for (i += step; i <= Math.PI/2; i += step)
      {
        var point:Point = new Point(i, Math.sin(i));
        graph.drawLine(previousPoint.x, previousPoint.y , point.x, point.y);
        previousPoint = point;
      }
    }

  }
}

The result is the sine curve, as shown in the following screenshot:

Because we used many small lines (the program uses π / 0.1 or 31 pieces), the segments are hardly distinguishable.

Change the step variable to 1 and you'll immediately see the separate lines, as shown in the following screenshot:

You can still see the sine curve, but it's clear that the three segments don't have a very good approximation.