Graphing Program: Completion

You now know nearly everything you need to complete the project: you can draw the tick marks on the axes and you can draw the dots on the graph using the .arc method. When it comes to labeling the axes, you do not want the text to overwrite the tick marks, so you need to know how much room the text takes up.

The code to find out how wide some text is looks like this, where ctx is the graphic context:

(.-width (.measureText ctx "Some text"))

For details, see the Mozilla documentation about the measureText method (link) and the textMetrics object (link).

At this point you might also want to create a ClojureScript project as described in Appendix C to complete the project rather than working in the browser. (You’ll eventually be creating ClojureScript projects, so why not start now?) If you do this, here is the HTML that you will need to put in the resources/public/index.html file:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <div id="app">
    <h2>Graphing Example</h2>
    <canvas id="graphCanvas" width="250" height="250"
        style="border: 1px solid gray"></canvas>
    <script src="js/compiled/graphing.js" type="text/javascript"></script>

Here is the canvas:

This canvas is where the graph will go.

Here is the code that has been presented so far, plus some utility functions that I found helpful in creating the solution, plus stubs (placeholders) for the remaining functions. Feel free to fill in those stubs, or erase everything and write your own (better, improved) version.

Next Section - Graphing Program: Solution