Log in
Search

Embedding interactive (Math) graphs in wikispaces

The "Other widget" option in wikispaces allow you to embed any type of custom code. Among other things, this let you user powerful javascript libraries. 

For instance, the impressive jsxGraph library, a powerful cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. Check out their long list of examples.

Edit a wikispaces page. Insert a Widget. Choose Other as widget type. This let you type custom html and javascript. 

Here, we will draw this graph:

image

An interactive version is availble on wikispaces on this demo page. Click on the points to change their position and change the shape of the curves. 

First, make sure you embed the jsxGraph library. This should be done once and only once on a given page. Create an other widget with the script tag or add it on top of the first jsxGraph of the page. 

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

Any graph is made of two parts. A zone on the screen in which to draw the graph. The code that governs how the graph should look. 

(1) Add a division tag to define the width and height of the graph drawing area. Give it jxgbox as class and a unique name as id.

<div id='box' class='jxgbox' style='width:500px; height:500px;'></div>

(2) Add the script. In the initBoard function call, refer to the unique division id. 

<script type='text/javascript'>
//<![CDATA[
var addPoint = function(x) {
p.push(brd.create('point', [x,(Math.random()-0.5)*3],{style:6}));
brd.update();
};

var brd = JXG.JSXGraph.initBoard('box', {axis:true,originX: 250, originY: 250, unitX: 50, unitY: 25});
brd.suspendUpdate();
var p = [];
p[0] = brd.create('point', [-4,2], {style:6});
p[1] = brd.create('point', [3,-1], {style:6});
addPoint(-2);
addPoint(0.5);
addPoint(1);
var pol = brd.lagrangePolynomial(p);
var g = brd.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
var g2 = brd.create('functiongraph', [brd.D(pol), -10, 10], {dash:3, strokeColor:'#ff0000'});
brd.unsuspendUpdate();
//]]>
</script>

Click Save on the widget, save on the page and you are done.