JSXGraph 1

Posted on 05/08/2019, in Web development.

I wonder how we can draw mathematical graphs, charts, idea,… using only web’s components (JS, HTML5, CSS,…). I found JSXGraph with its power.

Docs

Step by step from the beginning: here.
Wiki
Very first examples
JSXGraph Reference Card
This site contains a lot of settings and examples.
Geometrical shapes examples
Source options

Installation

Check this site.

The base index.html file

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
      <script type="text/javascript" src="jsxgraphcore.js"></script>
    </head>
    <body>
      <h1>Self-learning JSXGraph</h1>
      <h2>by <a target="_blank" href="https://dinhanhthi.com">Anh-Thi DINH</a></h2>
      <p>
        Edit the code in the file <b>current.js</b> and reload the site to see the changes.
      </p>
    
      <hr />
    
      <div id="thi"></div>
    
      <script type="text/javascript" src="./current.js"></script>
    </body>
  </html>

Automatically reload site if js file changes

Using live-server

Install nodejs first.
Install live-server using nodejs: npm install -g live-server
cd to the project folder
run live-server (accept all networks notification)
http://127.0.0.1:8080/
Enjoy!

Settings

Options

JXG.Options
  .axis
    .ticks
      .majorHeight = 0
      .insertTicks = false
      .ticksDistance = 10 // height of main ticks

You should “free” a board before reusing it

JXG.JSXGraph.freeBoard(board);

Everything below is inside

var board = JXG.JSXGraph.initBoard('box',
  {
    // the codes
  }
);

Position of the original coordinate: originX:50, originY:25 (from the left and the top in pixel)
unitX:20, unitY:10: determines the number of pixels for one unit on the x-axis/y-axis

others

axis: true, // display axis?
grid: false, // display grid?
showNavigation: false, // show navigation?
showCopyright: false // show copyright?

First examples

Simple axis (with ticks)

JXG.Options
  .axis
    .ticks
      .majorHeight = 0
      .insertTicks = false
      .ticksDistance = 10 // height of main ticks

var board = JXG.JSXGraph.initBoard('box',
  {
    boundingbox:[-10,10,10,-10], // box's size
    axis: true, // display axis?
    grid: false, // display grid?
    showNavigation: false, // show navigation?
    showCopyright: false // show copyright?
  }
);