How to code JSXGraph axes, ticks and grids
By Murray Bourne, 13 Oct 2014
I've been creating graphs with JSXGraph for some time now, and I often get caught up with the problem of getting the axes to do what I want. Often you can't see the grid lines, so you have no idea of the scale of the graph, as can be seen in this screen shot.
No y-axis scale indication - JSXGraph plot
Similarly, I found the business of creating grids (or are they ticks?) was quite troublesome.
So I set about trying to get it clear in my own mind. I wrote a summary of my discoveries here:
It's presented in several steps which increase in complexity. By the end, you'll see a graph that allows you to:
- See grid lines and labels all the time, no matter what zoom level is used
- See axes all the time (by "docking" them to the side if the graph is dragged - or zoomed - so the axes would go beyond view)
- Zoom in and out in one direction only (along the x- or y-direction)
Improved grids on a JSXGraph graph
I hope those of you new to JSXGraph will find it useful.
See the 7 Comments below.