Right now, the graph looks out of place. Let's draw some reference points to the graph starting with the X and Y axes:
- Use the paint new sprite option to draw a small square sprite, and name it grid. You can use any color you want, but I'm using black.
- Let's draw the X axis first. From the Motion palette, add the go to x: and y: block. Set our original X and Y coordinates (-200, -140).
- From the Pen palette, add the set pen color to block and select black as the color.
- From the pen palette, add the pen down block.
- From the Motion palette, add the change x by block and set the value to 320. We'll build the graph 20 pixels bigger than we expect to use.
- From the Pen palette, add the pen up block.
- Next, we need to draw the Y axis. We can use the same block of code with a couple of slight alterations. Duplicate the existing blocks and append it to the script.
- Since we want to draw the Y axis, we need to swap out the second change x by block with a change y by block.
- Set the value in the change y by block to 300.
- After we draw the line, we don't want to see the grid sprite any longer. From the Looks palette, add the hide block to the end of the script.
- Double-click on the script and draw the grid.
At this point, we need to decide how we want to control the grid sprite because after we click the flag, our grid will disappear. I'm going to choose to add a when space key pressed control block to the top of my script so that it is consistent with the previous sprites. And the less controls our program uses, the easier it will be to use.
Using one sprite, we drew two lines that only touched at the origin of our graph. After the grid sprite drew for 320 pixels, we applied the pen up block. This prevented any additional marks on the screen.
To draw the Y axis, we went back to the graph's origin, put the pen tool down, and drew a vertical line for 300 pixels.
Our numbers were not totally random. We changed x by 320 because we needed at least 300 pixels for a 30-day graph. Remember, we set one day equal to ten pixels in our original graphing formula.
The 300 pixels on the Y axis got us to the top of the stage without going off the edge. Even though our graph could potentially go off the stage, keeping our Y axis just short of the stage edge helps reinforce an off-the-charts reaction when we get really big numbers.
Adding some labels to our graphs would be nice. Before we jump into the formula to calculate interest, take some time to label our graph. I'm going to call the X axis Days and the Y axis Amt.
Next, identify days 15 and 30 on the X axis. If you like, you can try to identify some major numbers on the Y axis, but the calculations we use to graph might create some problems identifying label points. Remember, this graph accurately represents the data with a sharp, upward trending curve rather than a precise representation of the data on the graph.
Because this graph won't be permanent, set each new label to hide when the flag is clicked and to show when the space key is pressed.
Review the following screenshot if you need some help getting started:
Even if we do find some way to accurately label some points on the Y axis, our graph will be representing very large numbers. It will help our user to understand the problem better if we label the final value in our calculation.
Let's add an if block to the grapher-double sprite to say the final amount.