# JSXGraph: interactive javascript graphs

By Murray Bourne, 26 May 2010

**UPDATE:** The examples on this page used out-of-date versions on JSXGraph. In most cases, I've updated them elsewhere on the site. You'll see links to the updated applets (which in most cases are now mobile friendly).

## JSXGraph information

I've been investigating JSXGraph over the last few weeks and I'm quite impressed.

JSXGraph is a javascript-based grapher from the mathematics people at the University of Bayreuth in Germany.

**Advantages of JSXGraph **

- It works in all major browsers and is cross-platform.
- It even works on Apple's iPod touch, iPhone and iPad, since it is not Flash- or java applet-based.
- No upload of any files - all the programming is done within the <script> tags on the page.
- Once the user has downloaded the actual JSXGraph script to their browser (76.2 kB on a gzipped server), the file sizes are very small (this page is only about 12 kB).
- Easy to implement with only 3 text-based elements: (a) A call to the JSXGraph javascript file (jsxgraphcore.js); (b) An empty "div" tag to hold the graph; and (c) The javascript that describes your graph
- Much smaller than java applets and much less clunky
- No need for a plugin of any sort - just javascript which is enabled by default on virtually all browsers
- There are many demo examples on which you can base new projects
- Compared to graphs with SVG, there are less compatability issues
- If I need to change anything, it's just a change to the code. This is much easier compared to development in Flash, where I would need to open the third party application (Flash), make the change, create the SWF file, then upload the SWF file to the server
- It works in a WordPress blog, as you can see below. There's a JSXGraph WordPress plugin under development.

**Disadvantages**** of JSXGraph**

- You really need to have a good understanding of javascript to get anything worthwhile out of JSXGraph (you can view the page source for this page to see how it is done). So it's not really a "plug and play" application (there are no WYSIWYG interfaces or wizards), so it's not really that friendly if you want newbie students to develop new applications using it. [
**Update:**This is my attempt to provide a user-friendly grapher: Plot graphs using JSXGraph] - The documentation is still rather sparse (since it is quite a new development). So there's quite a bit of "guess and check" involved.

JSXGraph doesn't behave all that well in Internet Explorer. But this is not JSXGraph's fault - it's just one of IE's many irritations. It still works, but (for example) IE does not display the grid scale (numbers on the axes) in the examples on this page. But at least it works.

You can get more information, including examples and documentation here: JSXGraph.

This wiki contains lots of examples: Showcases

## Examples using JSXGraph

The following examples are my recent efforts. Most are based on existing examples in the JSXGraph site.

## Investigate Slope and y-intercept of a Straight Line

With this one you can drag either point A or point B, and you can see the resulting linear equation in the form *y = mx + b*. You could use this to investigate what the equation of a straight line is when you have:

- A horizontal line (What is
*m*? What is*b*?) - A vertical line (What is
*m*? What is*b*?) - A line through the origin (What is
*m*? What is*b*?)

**UPDATED APPLET:** I've replaced this applet to a new one on this page: Gradient (Slope) and Inclination of a Line.

At the bottom right of each screen is a facility to zoom in (the "+" sign) and pan left right and up-down. Try it!

## Ellipse

With this one you can drag point D around the ellipse. In this case the equation of the ellipse is: .

Points A and B are each at a focus of the ellipse (these points are fixed).

You could use this one to investigate the property that Length AD + Length BD is constant for a particular ellipse.

[In this example, AD + BD = 16. It jumps to 15.9 occasionally because of rounding.]

**UPDATED APPLET:** I've replaced this applet on this page: Interactive ellipse graphs.

## Random Balls

You can even do animations with JSXGraph. Here are moving random balls. This uses javascript's "setInterval" time function.

You can't actually do anything in this one - just allow yourself to get hypnotized!

**Watch this space!**

## Pentagon

Drag **point A** to change the size and position of the pentagon.

**Watch this space!**

## Investigate Sine Curve - Amplitude and phase shift

Move the magenta dot up and down or left and right to investigate the amplitude and phase shift of a sine curve.

The equation of the curve appears in the form *y = a *sin (*bx* + *c*)

**UPDATES:** There are new and similar graphs here:

Sine and cosine graphs - period

## Graphs using polar coordinates

This one lets you change the angle for a function of the form *r* = *f*(θ), where we are using polar coordinates.

Drag the blue dot left and right (slowly) along the slider to change the angle and to see the resulting length *r*.

The magenta curve starts when θ = 0.

**UPDATE: ** You can see examples of polar coordinate graphs using JSXGraph (in the answers) on this page: Curves in Polar Coordinates

Also see Radians - an Introduction for a lesson which includes a JSXGraph interactive.

## Conclusion

JSXGraph is a useful addition for those of us who want to create interactive math graphs. It is cross-browser and cross-platform, easy to implement, but takes some javascript knowledge to develop new graphs.

See the 13 Comments below.

28 May 2010 at 3:31 am [Comment permalink]

BTW: The creator of this nifty piece is the university of Bayreuth in Germany (Bayreuth is also well known for its annual Wagner Festival, where you have to wait years to get tickets.)

28 May 2010 at 5:44 am [Comment permalink]

Thanks, Vonjd. In my enthusiasm to publish, I forgot to add that detail.

I have amended the post.

5 Jun 2010 at 11:26 pm [Comment permalink]

[...] reading through the carnival, I was especially interested in (as a math teacher), JSXGraph, an interactive graphing application that you can easily embed in webpages using javascript. [...]

8 Jun 2010 at 7:55 pm [Comment permalink]

Hello,

I would like to know that is this scrip support to opera or mozilla firefox.

Thanks

8 Jun 2010 at 9:03 pm [Comment permalink]

Hi posoft. Yes, JSXGraph is cross-browser and cross-platform. That's one of its main advantages.

26 Jul 2010 at 4:58 am [Comment permalink]

I used to have problems with radians and degrees until I went through your radians article today. The explanations are fantastic.

Please keep up the good work.

God bless

Thomas

27 Jul 2010 at 9:46 am [Comment permalink]

Hi Thomas. Glad you found the article useful!

8 Jul 2011 at 5:34 pm [Comment permalink]

mathematics become easier and understandable when demonstrated through audio vidio aids in a mathematics lab

13 Jan 2012 at 10:48 am [Comment permalink]

Very Good work, will help my children visualize what is going on in Calculus.

8 Aug 2013 at 1:58 am [Comment permalink]

Hi all,

This javascript graphing display sounds interesting, so I have a question:

Context: server side database passing SQL/Access data to a dynamic web page (ie: created on the fly). I want to take this interactive further.

a) I see one can easily manipulate simple graphics by the user but can I pass user manipulated data back to server in a stream for recalculation on the server side, if necessary? AJAX, etc. stream data.

I presume one can build 2nd, 3rd order derivative graphical displays - what limitations are introduced or does this interactive build on javascript?

8 Aug 2013 at 5:25 pm [Comment permalink]

@John: You should be able to do Ajax calls from JSXGraph.

Also, it is possible to do higher order graphs. See here for an example.

8 Jul 2018 at 12:57 am [Comment permalink]

Did you use jsxGraph for the Gradient (Slope) and Inclination of a Line) ? The applet is nice, clean, and to the point. Would you be willing to post the code? I've been using Desmos for my algebra classes but now I want to learn to use jsxGraph.

8 Jul 2018 at 10:13 am [Comment permalink]

@Vic: I'm currently using a mix of JSXGraph and my own variant of a much simpler and leaner library based on ASCIIsvg.

The page you asked about, Gradient (Slope) and Inclination of a Line, is actually using the latter. You can see more information on this library here: ASCIIsvg-IM.js Demo and Syntax.

Some other pages in the Plane Analytic Geometry chapter (like Parallel Lines are still currently using JSXGraph.

The code for any of these pages can be found by right clicking and choosing "Show page source...".

I suggest you stick with JSXGraph and see how it works first (it is more sophisticated and better documented than my own library and there is a good support network). You may find this JSXGraph coding summary useful. It's a list of the things I kept forgetting how to do.

Good luck with it!