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.

How to code JSXGraph axes, ticks and grids
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:

JSXGraph axes, ticks and grids

It's presented in several steps which increase in complexity. By the end, you'll see a graph that allows you to:

  1. See grid lines and labels all the time, no matter what zoom level is used
  2. 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)
  3. Zoom in and out in one direction only (along the x- or y-direction)

How to code JSXGraph axes, ticks and grids
Improved grids on a JSXGraph graph

I hope those of you new to JSXGraph will find it useful.

See the 5 Comments below.

5 Comments on “How to code JSXGraph axes, ticks and grids”

  1. John Rodgers says:

    Thank you and much needed examples. This will save hours, or perhaps more importntly, allow projects to move ahead.

    Some of the plots seem to be demonstrting zoom, but the zoom pnel is missing. Is it suppoesed to do that?

  2. John Rodgers says:

    Sorry, I guess I have to read your post more closely.

  3. Murray says:

    @John: Glad you found it useful. Yes, I use the keyboard-based zoom most of the time now (rather than the navigation panel), as it is a lot quicker and easier.

  4. Adrian says:

    Hello,

    I need grid cells, be square.
    In this example:
    http://www.intmath.com/cg3/jsxgraph-axes-ticks-grids.php
    they are rectangles.
    How do I solve this problem?

    Thanks

  5. Murray says:

    @Adrian: You need keepaspectratio:true in the board definition. There's an example about half way down the other JSXGraph example page, here:

    http://www.intmath.com/cg3/jsxgraph-coding-summary.php

Leave a comment


Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can't mix both types of math entry in your comment.

Search IntMath, blog and Forum