# Examples

Examples in the JSXGraph-wiki:

First impressions (the points A,B,C,D,E can be dragged):

/* <![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});
var pol = JXG.Math.Numerics.lagrangePolynomial(p);
var g = brd.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
var g2 = brd.create('functiongraph', [JXG.Math.Numerics.D(pol), -10, 10],
{dash:3, strokeColor:'#ff0000'});
brd.unsuspendUpdate();/* ]]&gt; */

Here is the source code for the above construction. It uses the JSXGraph plugin for WordPress.

<pre><jsxgraph width="500" height="500" box="box">

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});
var pol = JXG.Math.Numerics.lagrangePolynomial(p);
var g = brd.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
var g2 = brd.create('functiongraph', [JXG.Math.Numerics.D(pol), -10, 10],
{dash:3, strokeColor:'#ff0000'});
brd.unsuspendUpdate();
</jsxgraph></pre>


1. wilf
Posted January 11, 2010 at 11:55 pm | Permalink

Cool.

2. Posted January 28, 2010 at 2:49 am | Permalink

I am a teacher. I would like to create a regular n-sided polygon inscribed inside a circle with radius r. Both r and n should be controlled by sliders. How can this be done?

3. agentyikes
Posted February 2, 2010 at 12:41 pm | Permalink

Thanks very much for your help. The stuffs are so great that I am very much addicted to it.
I have two more questions.
1. When I use brd.riemannsum(f,500,type,0,6).toFixed(4) and f = function(x) { return x*x;} with any type (left, right … etc), the result is 72.2160. The accuracy seems not very good. Any way to improve it?
2. Is there a way to have a slider without the value displayed on its side?
Thanks again for the cool stuff.

• Posted February 2, 2010 at 2:14 pm | Permalink

1) Is it possible that you called
type = left;
brd.riemannsum(f,500,type,0,6).toFixed(4)
type = ‘left’;
brd.riemannsum(f,500,type,0,6).toFixed(4) ?
i.e. type has to contain a string.
2) Good request! The next release will enable the attribute “withLabel:false” for sliders, too.

Thank you very much,
Alfred

4. agentyikes
Posted February 2, 2010 at 3:00 pm | Permalink

Thanks!
I did use a string ‘left’ to test and still get the same answer 72.2160.

• Posted February 2, 2010 at 4:33 pm | Permalink

The page
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Riemann_sum_III
contains your example and it works. Maybe, there is some simple typo in your code.

• Posted February 2, 2010 at 5:08 pm | Permalink

I found your (impressive) wiki page.
The problem is a small typo:
brd.createElement(‘text’,[-5.5,17,
function(){ return '~~ ' +
(brd.riemannsum(f,n.Value(),ftype(),a,b.Value())).toFixed(4); }]);

• agentyikes
Posted February 2, 2010 at 11:13 pm | Permalink

Thanx a lot!

5. Posted June 19, 2010 at 5:53 pm | Permalink

Забавненько!

6. Posted November 10, 2010 at 9:57 pm | Permalink

I don’t know if anybody noticed this but I believe this is worth mentioning:
you can use the text element to place images on the board. For instance, if you want to place a GIF file name “alpha.gif” at the (0,0) position this is how you can do it:

var talpha = board.createElement(‘text’,[0,0,'']);

The implications of this are just amazing: instead of a fixed position you can use point coordinates to place the image dynamically! To give you an example just look at the file

http://w3.ualg.pt/~orodrig/calvec/deslopar.html

and try to move the vector dragging around its lower point. The boldface v, which is a GIF file, will move together with the vector!

7. Posted April 12, 2011 at 11:30 am | Permalink

Hi guys, I cleaned my homepage and decided to retouch my stuff dedicated to Geometry. You can have a look at

http://w3.ualg.pt/~orodrig/Math/Geometry/

So visit it, enjoy it, and if you like it then copy, enhance and distribute. And of course any comments (except nasty ones) will be welcome. Next step will be trigonometry, but I’m also experimenting with “alive” graphics to display physic concepts: gravity, Hook’s law, first principle of Thermodynamics. It’s so much fun that I just don’t know where to start!

Thanks for sharing JSXgraph!!!!

Best regards

Atte.

Orlando

• florin
Posted July 1, 2011 at 7:32 pm | Permalink

Can I use JFGraph on my website in the same way I use dojo or jQuery?

8. Posted August 10, 2011 at 12:27 am | Permalink

I am a teacher. I have Geogebra applets embedded in Google sites by a google gadget in xml file, pointing to a ggb file in the site subdirectory.

Interested to know how to use jsxgraph operating on ggb or intergeo files
and embedding it in Google site.

The location of my site is at

(due to length of url, I used the tinyurl in your comment input for website)

My ggb files are downloadable at each webpage resource under attachments section

Regards,
Lew W.S

9. Posted November 9, 2011 at 9:39 pm | Permalink

I just tried JSXGraph on the iPOD under Safari. Unfortunately, the control buttons in the lower right corner of the JSXGraph window do not work there. Is this a known problem or did I do anything wrong?

Best regards,

Lars

• Posted November 10, 2011 at 1:25 pm | Permalink

Thanks for pointing this out. We restricted the event bubbling to prevent accidental text selection on mouse devices and document zooming/panning on touch devices and were a little bit too restrictive on touch devices. It is fixed and the fix will be released with the next version of JSXGraph.

10. Scajda
Posted April 18, 2012 at 2:48 pm | Permalink

Hi, jsxgraph is great, however i have problem,
I would like to make another event handler for right mouse click, but it is in conflict with right click jsx point dragging. Is there a way to turn of draggable only for right click ?

• Scajda
Posted April 18, 2012 at 2:54 pm | Permalink

oh i just realized … problem was somewhere else… sorry

1. By Angelforge’s Blog » Blog Archive » JSXGraph on March 24, 2009 at 7:25 pm

[...] JSXGraph » Examples [...]

2. By 强大的JS画图工具 - JSXGraph - Code Index on April 27, 2009 at 3:56 pm

3. By 20 Fresh JavaScript Data Visualization Libraries on January 17, 2010 at 3:06 pm

[...] JSXGraph Demo [...]

4. [...] JSXGraph Demo [...]

5. [...] JSXGraph Demo [...]

6. [...] JSXGraph Demo [...]

7. [...] JSXGraph Demo [...]

10. [...] JSXGraph Demo [...]

11. [...] JSXGraph Demo [...]

12. By Mensagem ao Candidado Paulo Teixeira « DiRaOL on September 7, 2010 at 8:46 pm

[...] “JSXGraph – Graphics with JavaScript“. No link abaixo tem alguns exemplos: http://jsxgraph.uni-bayreuth.de/wp/examples/ Acho que pode ser uma alternativa interessante. Não sei exatamente no que vocês estavam pensando, [...]

13. [...] I don't remember how I came about the JSXgraph javascript library for geometric, function drawing library. But the results are pleasant. Here we will embed an example from the JSX main site at http://jsxgraph.uni-bayreuth.de/wp/examples/ [...]

14. [...] I don't remember how I came about the JSXgraph javascript library for geometric, function drawing library. But the results are pleasant. Here we will embed an example from the JSX main site at http://jsxgraph.uni-bayreuth.de/wp/examples/ [...]

15. By » Test for JSXGraph IdeasLog on July 2, 2011 at 1:11 am

[...] following is a grasp from JsxGraph to test if it works on my [...]

16. By RIP Flash « Android on November 9, 2011 at 5:40 pm

[...] you think this is a good idea, go to the pages at this site with your Android device and try to move one of the red points. In the desktop browser, all works [...]

17. [...] JSXGraph Demo [...]

18. By 20 Taze JavaScript Veri Görselleştirme Uygulaması | on September 10, 2012 at 9:04 pm

[...] JSXGraph Demo [...]

19. By 推荐5款JavaScript绘图类库 – IT伯伯 on November 28, 2012 at 2:13 pm

[...] 示例：http://jsxgraph.uni-bayreuth.de/wp/examples/ [...]

20. By » Another test for MathJax IdeasLog on June 15, 2013 at 4:03 am

[...] of MathJax $int_{-infty}^{infty} frac{sin x}{1 + x^2} d x$ and the following is a grasp from JsxGraph to test if it works on my [...]

21. [...] page. No plugins are required! Special care has been taken to optimize the performance.MORE / INFO DEMOCubism.js PluginCubism.js is a D3 plugin for visualising time-based data series. You can use it to [...]

22. [...] http://jsxgraph.uni-bayreuth.de/wp/examples/ kann man sich mal ansehen, was so alles mit der Bibliothek geht. Noch eindrucksvoller zeigt der [...]