Examples

Examples in the JSXGraph-wiki:

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

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

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

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 = 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>

18 Comments

  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)
      instead of
      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); }]);

        i.e. ftype() instead of ftype.

        • 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?

      Or JFGraph requires special license?

  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
    https://sites.google.com/a/moe.edu.sg/dmnteachgeogebra/geogebra-lessons-pages

    (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 ?
    Thank you for your help.

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

      oh i just realized … problem was somewhere else… sorry

22 Trackbacks

  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

    [...] Homepage (No Ratings Yet)  Loading … ,1 views addthis_url = ‘http://www.codeindex.cn/9861′; addthis_title = ‘强大的JS画图工具 – JSXGraph’; addthis_pub = ‘grf110′; 相关阅读 (related posts): PHP、AJAX动态布局 — April 27, 2009用Jquery创建类型 Skype-like 的按钮 — April 25, 2009Javascript, Ajax, jQuery工具箱 — April 21, 2009(mb)Gallery 1.0 — April 17, 2009Switch Page Layouts with jQuery & CSS — April 11, 2009jQuery菜单 – jBreadCrumb — April 11, 2009一个轻量级的jQuery lightbox — April 7, 2009Sliding Boxes and Captions with jQuery — April 7, 2009Simple Toggle with CSS & jQuery — April 5, 2009Side Navigation Tooltip / Popup Bubble — April 5, 2009 Tagged with: [ jquery, JSXGraph, SVG, VML ] You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  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 [...]

  8. [...] Link Live Examples Download [...]

  9. [...] Link Live Examples Download [...]

  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 [...]

  • Archives