How to import Geogebra files into JSXGraph

[19 Jul 2010]

Update: Jan 2014

Unfortunately, this method no longer works very well (and doesn’t work at all in some cases.)

My Example 1 below does not even display any part of the original GGB file, and I changed the second example to pure JSXGraph some time ago.

I don’t believe the Geogebra reader is a high priority for the JSXGraph developers. Fair enough, they have plenty of other things to do!

So if you follow the steps below, good luck to you if it actually works.

The problem

GeoGebra is an excellent free tool for exploring math. (See my GeoGebra software – a Review). It’s also a great tool for math teachers to create interactive math applets for students.

A big advantage of GeoGebra is that it is very easy to use. You can have a graph on the screen in minutes and start finding slopes, intersections, angle size and many other goodies.

The downside with GeoGebra is that the user’s computer needs Java (not javascript). Steve Jobs is now refusing to allow Java on any of his iPhones or iPads, and this means users of such devices will miss out on being able to use GeoGebra files.

(He’s also refusing to allow Flash, and this is leading to a re-think for many of us that create Web pages. What is the future of Java and Flash?)

One Solution

JSXGraph is a neat javascript-based (not Java) interactive mathematics tool (see my overview at JSXGraph: interactive javascript graphs).

JSXGraph also allows you to build interactive graphs that are delivered on a Web page. But the downside is you have to have fairly good javascript skills – it is essentially a coding exercise, whereas GeoGebra uses a graphic interface.

Import GeoGebra files into JSXGraph

One handy thing you can do is to import the GeoGebra output files (.GGB extension) into JSXGraph. Well, you don’t really "import" the files – more accurately you get JSXGraph to interpret the Geogebra GGB file, and display it on your HTML page.

This is how it’s done.

  • Create a new HTML file that will contain the embedded GeoGebra file. Make sure your saved GeoGebra file (something.ggb) is in the same directory as the HTML file.
  • The HTML file needs 2 simple scripts at the top (these call the JSXGraph code and an extra GeoGebra interpreter code). Put these lines just before the </head> (closing head tag) at the top of your page. (If you are doing this on a blog, put these 2 lines at the beginning of your blog post,)

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js" type=’text/javascript’></script>
<script src="http://jsxgraph.uni-bayreuth.de/distrib/GeogebraReader.js" type="text/javascript" ></script>

  • In the body of your HTML file, import the GeoGebra file as follows (the only thing you will need to change for your own case will be the name of the GGB file):

<div id="box" style="width:500px;height:500px;border:1px solid #cfcfcf"></div>
<script type="text/javascript">
var b = JXG.JSXGraph.loadBoardFromFile(‘box’, ‘something.ggb‘, ‘Geogebra’);
</script>

And that’s it!

Example 1

Below is an example of a file I created in GeoGebra. You are seeing it as interpreted by JSXGraph. If you are viewing this on an iPhone or iPad, you should also be able to see the graph.

The blue curve is f(x) = loge(x), and the magenta line is the tangent at a point on the curve.

You can drag the dot representing the point (lower left corner), and observe the slope as it changes. Some observation will tell you the slope is the reciprocal of whatever the x-value is at that point. (Pause at x = 1, x = 2, x = 3, etc and observe the slope at those points.)

Example 2

Update, Jan 2014: As mentioned above, I converted the following example to pure JSXGraph some time ago (when the GGB import failed…

I recently rewrote the Radius of Curvature page on Interactive Mathematics. This is an application of differentiation that I’ve always found interesting.

The "Exploration" section on that page (about 1/2 way down) involves a graph I created in GeoGebra and have rendered using JSXGraph.

The reader can investigate what a "radius of curvature" really means using the interactive graph.

Update: The import process described on this page doesn’t play nicely with Internet Explorer browser. (Actually, most things don’t play nicely with IE). So I re-wrote the interactive once again from scratch this time using JSXGraph, so it will work on all browsers. So it is no longer an example of this technique of importing a GGB file into JSXGraph.

Known Issue

I’ve found that some text that shows just fine in GeoGebra does not appear when rendered in JSXGraph.

Concluding Remarks

JSXGraph has a lot of promise as a cross-platform, cross-browser interactive math tool. GeoGebra is very good for creating applets in a visual interface.

Putting the 2 together has lots of potential – especially when we let the students do it!

Share this page

9 Comments on “How to import Geogebra files into JSXGraph”

  1. Markus Hohenwarter says:

    GeoGebra 4 will allow to export HTML5/JavaScript applets that don’t need Java on the client anymore. This is part of our GeoGebraMobile project. You can already try this with GeoGebra 4 Beta, see http://www.geogebra.org/forum/viewtopic.php?f=22&t=1387

    Please see some examples for GeoGebraMobile applets at http://www.geogebra.org/mobile/test/milestones/

  2. Murray says:

    Thanks for the heads up, Markus! Unfortunately, your first link didn’t work.

    I downloaded GeoGebra4 but couldn’t find a HTML5/javascript option in “Export as dynamic HTML”…?

  3. Norry says:

    (He’s also refusing to allow Flash, and this is leading to a re-think for many of us that create Web pages. What is the future of Java and Flash?)
    …………………….

    No, no and no! It makes us not to buy ipad. Why to buy something that not let us to use it more than having fun with facebook etc…

  4. Addie Evans says:

    I did this exactly but it did not work. I checked obvious problems…

    any suggestions?

  5. Murray says:

    @Addie – Do you have an example page? I may be able to spot the problem.

  6. seneca says:

    I tried your instructions about Import GeoGebra files into JSXGraph but does not work.
    any suggestions?

  7. Murray says:

    @Seneca. I fiddled with this for quite a while but I had to give up. As you would have noticed, my own example on the blog page doesn’t work any more, either. (Thanks for alerting me to this.)

    Seems the JSXGraph developers are no longer working on this import option. Each of the GGB import scripts I tried failed.

    As Markus said in an earlier comment, GeoGebra can now be exported as HTML5 (by publishing it to GeogebraTube). This is a better option!

  8. seneca says:

    Too bad it does not work GeogebraReader.js
    Currently, when exporting Geogebra as HTML5, the expressions
    mathematics LaTeX, do not look good.
    However, with JsxGRaph are perfect.

  9. Murray says:

    @Seneca: Yes, this is a problem.

    I updated this post so it better reflects the current situation.

Leave a comment


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>