Stack Overflow
Stack Overflow

Questions tagged [jsxgraph]

JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser.

JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.

JSXGraph allows you to create dynamic mathematics with JavaScript.

https://jsxgraph.org/

167 questions
3
votes
1 answer

How to dynamically identify areas formed by lines enclosed in a polygon drawn using JSX graph

I have a graph in which users can create points and draw lines. These lines can be moved by the user. I also have added a fixed polygon (EFGH) around the lines. Now I need to find a way to allow users to click and pick the area that is formed by the…
Pratheesh Russell
  • 585
  • 4
  • 16
3
votes
1 answer

How to delete the created point when using JSXGraph?

Recently I am working on plotting the algorithm gameOfLife. I find that JSXGraph is very handy and useful. I just need to include the libraries and add several lines to plot, as shown in a minimal example below. …
Leslie Wong
  • 109
  • 1
  • 6
3
votes
1 answer

JsxGraph from Dart using Dart JS interop

I am trying to use the plotting library JSXGraph from Dart using dart js but I have problems. This is working javascript code var board = JXG.JSXGraph.initBoard( 'box', { boundingbox: [-10, 10, 2, -1], axis: true, …
zegkljan
  • 8,051
  • 5
  • 34
  • 49
3
votes
2 answers

RaphaëlJS, dojo.gfx, JSXgraph comparison

I'm going to build a simple math graph for a browser application. Therefore all the JS-Vector Libraries might work out well. But I want to know about any experiences you collected using those. For me a basic feature is binding events to paths and…
pex
  • 7,351
  • 4
  • 32
  • 41
2
votes
2 answers

Fill the intersection area between circle and function in JSXGraph

I have a circle and simple function Math.cos(x) I want the circle to be filled when it intersects with that function (fill only the upper side). But it's not working. Script: // circle var point1 = app.board.create('point', [0,0], {size: 2,…
Porizm
  • 531
  • 4
  • 16
2
votes
1 answer

Does the CSS example on JSXGraph's website for JSXGraph work?

I tried my best to copy this example here from the JSXGraph website: https://jsxgraph.uni-bayreuth.de/wiki/index.php/Using_CSS_styles Here's the abbreviated HTML: Covid…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 07 '20 at 01:01">asked Nov 07 '20 at 01:01</time> <a href="../../users/10246285/idealius" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10246285.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="idealius" /> </a> <div class="s-user-card--info"> <a href="../../users/10246285/idealius" class="s-user-card--link">idealius</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">23</li> <li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-57792424"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/57792424/how-can-i-prevent-user-to-get-outside-certain-coordinates-in-jsxgraph" class="question-hyperlink">How can I prevent user to get outside certain coordinates in JSXGraph?</a></h3> <div class="excerpt">Im trying to prevent the user to stay within (1000, 1000) and (-1000, -1000) area in JSXGraph. Is it even possible ? </div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/math" class="post-tag grid--cell" title="show questions tagged 'math'" rel="tag">math</a> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 04 '19 at 16:23">asked Sep 04 '19 at 16:23</time> <a href="../../users/11870338/exmark2" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11870338.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="EXMark2" /> </a> <div class="s-user-card--info"> <a href="../../users/11870338/exmark2" class="s-user-card--link">EXMark2</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">45</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-50813656"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/50813656/how-to-sum-two-maxima-lisp-lists-elementwise-in-order-to-use-them-in-a-jsxgrap" class="question-hyperlink">How to sum two Maxima/LISP-lists elementwise, in order to use them in a JSXgraph embedded in a Moodle STACK-exam?</a></h3> <div class="excerpt">What the title says. I'm trying to build a graphical, two-variable optimization problem for students to solve using the STACK-type Moodle-question, which uses Maxima as a backend for dealing with the math. I've tried the following: /*Constants*/ c1…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/list" class="post-tag grid--cell" title="show questions tagged 'list'" rel="tag">list</a> <a href="../../questions/tagged/common-lisp" class="post-tag grid--cell" title="show questions tagged 'common-lisp'" rel="tag">common-lisp</a> <a href="../../questions/tagged/moodle" class="post-tag grid--cell" title="show questions tagged 'moodle'" rel="tag">moodle</a> <a href="../../questions/tagged/maxima" class="post-tag grid--cell" title="show questions tagged 'maxima'" rel="tag">maxima</a> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 12 '18 at 09:25">asked Jun 12 '18 at 09:25</time> <a href="../../users/6449910/sesodesa" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6449910.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="sesodesa" /> </a> <div class="s-user-card--info"> <a href="../../users/6449910/sesodesa" class="s-user-card--link">sesodesa</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,473</li> <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li> <li class="s-award-bling s-award-bling__silver" title="15 silver badges">15</li> <li class="s-award-bling s-award-bling__bronze" title="24 bronze badges">24</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-47876887"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/47876887/jsxgraph-how-do-i-update-a-line-s-points" class="question-hyperlink">jsxgraph: How do I update a line's points?</a></h3> <div class="excerpt">Say I created a line with: var line = board.create('line', [2, 2], [3, 3], { ... }); The documentation states for Line.point1: You really should not set this field directly as it may break JSXGraph's udpate system so your construction won't be…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 18 '17 at 21:46">asked Dec 18 '17 at 21:46</time> <a href="../../users/173630/nnyby" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/173630.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="nnyby" /> </a> <div class="s-user-card--info"> <a href="../../users/173630/nnyby" class="s-user-card--link">nnyby</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,748</li> <li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li> <li class="s-award-bling s-award-bling__silver" title="49 silver badges">49</li> <li class="s-award-bling s-award-bling__bronze" title="105 bronze badges">105</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-44570369"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/44570369/how-to-create-axes-outside-of-graph-plane" class="question-hyperlink">How to create axes outside of graph plane</a></h3> <div class="excerpt">I'd like to create a graph where the x and y axis are to the bottom and left of the graph respectively. I guess this would mean creating the axes outside of the bounding box? So I get something like this: 10 - | 9 - | 8 - | 7 - | …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 15 '17 at 14:39">asked Jun 15 '17 at 14:39</time> <a href="../../users/119886/ed" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/119886.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ed." /> </a> <div class="s-user-card--info"> <a href="../../users/119886/ed" class="s-user-card--link">ed.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,696</li> <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li> <li class="s-award-bling s-award-bling__silver" title="22 silver badges">22</li> <li class="s-award-bling s-award-bling__bronze" title="25 bronze badges">25</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-42130143"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/42130143/setting-compression-level-in-node-zlib" class="question-hyperlink">Setting compression level in node zlib</a></h3> <div class="excerpt">How do I force zlib to use compression level 9. https://nodejs.org/dist/latest/docs/api/zlib.html I need to set this since the browser side decompression file base64 encoded string compressed in level…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/node.js" class="post-tag grid--cell" title="show questions tagged 'node.js'" rel="tag">node.js</a> <a href="../../questions/tagged/zlib" class="post-tag grid--cell" title="show questions tagged 'zlib'" rel="tag">zlib</a> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 09 '17 at 06:54">asked Feb 09 '17 at 06:54</time> <a href="../../users/4882074/chandan-kumar" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4882074.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Chandan Kumar" /> </a> <div class="s-user-card--info"> <a href="../../users/4882074/chandan-kumar" class="s-user-card--link">Chandan Kumar</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">127</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badge">2</li> <li class="s-award-bling s-award-bling__bronze" title="8 bronze badge">8</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-27702288"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/27702288/bounding-box-values-not-supports-fraction-in-jsx-graph" class="question-hyperlink">Bounding box values not supports fraction in Jsx graph</a></h3> <div class="excerpt">Here i attached fiddle link http://jsfiddle.net/anandi2i/9c16urun/3/ Not able to draw my graph with start value as 2.5 and end value as 12.5 Is jsxGraph API supports the fraction value? i don't know... People who know something related to…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 30 '14 at 08:55">asked Dec 30 '14 at 08:55</time> <a href="../../users/3041427/anand" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3041427.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Anand" /> </a> <div class="s-user-card--info"> <a href="../../users/3041427/anand" class="s-user-card--link">Anand</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">99</li> <li class="s-award-bling s-award-bling__bronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-74753385"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/74753385/customizing-jsxgraph-fullscreen-mode" class="question-hyperlink">Customizing JSXgraph fullscreen mode?</a></h3> <div class="excerpt">Fullscreen mode in JSXgraph always adds big gray margins around the board, giving the impression I don't take full advantage of a big screen. Can one configure fullscreen mode, so as to minimize the use of these margins? </div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/fullscreen" class="post-tag grid--cell" title="show questions tagged 'fullscreen'" rel="tag">fullscreen</a> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 10 '22 at 13:36">asked Dec 10 '22 at 13:36</time> <a href="../../users/8598139/sacha-friedli" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8598139.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="sacha friedli" /> </a> <div class="s-user-card--info"> <a href="../../users/8598139/sacha-friedli" class="s-user-card--link">sacha friedli</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">13</li> <li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-72648495"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/72648495/jsxgraph-is-there-a-more-robust-metric-for-majorheight" class="question-hyperlink">JSXGraph: Is there a more robust metric for majorHeight?</a></h3> <div class="excerpt">I recently discovered how flexibly one can actually draw axes. However, I struggle with grid lines for the ticks. I can calculate the required majorHeight and set it for any specific combination of canvas size and axis lengths. But when the canvas…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 16 '22 at 15:42">asked Jun 16 '22 at 15:42</time> <a href="../../users/7875049/florianl" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7875049.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="FlorianL" /> </a> <div class="s-user-card--info"> <a href="../../users/7875049/florianl" class="s-user-card--link">FlorianL</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">267</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-68296162"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>1</strong></span> <div class="viewcount">vote</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/68296162/how-does-jsxgraph-add-hover-effect" class="question-hyperlink">How does JSXGraph add hover effect?</a></h3> <div class="excerpt">everyone! I am new to jsxgraph, and I would like to know how does JSXGraph add all the hover effect to many elements? Since I can't find any class changed or mouseover event on, for example, the function graph(path element in svg, the slider…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jsxgraph" class="post-tag grid--cell" title="show questions tagged 'jsxgraph'" rel="tag">jsxgraph</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 08 '21 at 05:38">asked Jul 08 '21 at 05:38</time> <a href="../../users/15457528/y0000" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/15457528.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Y0000" /> </a> <div class="s-user-card--info"> <a href="../../users/15457528/y0000" class="s-user-card--link">Y0000</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">90</li> <li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <div class="s-pagination--item is-selected">1</div> <a class="s-pagination--item" href="../../questions/tagged/jsxgraph_page=2" rel="" title="Go to page 2">2</a> <a class="s-pagination--item" href="../../questions/tagged/jsxgraph_page=3" rel="" title="Go to page 3">3</a> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/jsxgraph_page=11" rel="" title="Go to page 11">11</a> <a class="s-pagination--item" href="../../questions/tagged/jsxgraph_page=12" rel="" title="Go to page 12">12</a> <a class="s-pagination--item" href="../../questions/tagged/jsxgraph_page=2" rel="next" title="Go to page 2"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>