How to display graph using Javascript

Question

I am trying to display a graph on my website. Users enter a function in an input box, and the Javascript library is supposed to display the graph of the function. When I load my current code, the graph doesn't show, and my browser alerts me that functionPlot is not defined.

I have tried to tweak functionPlot into many different forms, but it is not working. I saw that this code worked for someone else on the Web, but it just doesn't work for me. Thank you!

<form id="antoine-input" name="antoine-input" class="form-horizontal my-form" method="POST" action="form.php">
  <p>
    <input type="text" id="eq" name="eq" value="x+10" />
  </p>
</form>
<div id="plot" style="height:650px; width:650px;"></div>

function draw() {
  try {
    functionPlot({
      target: '#plot',
      data: [{
        fn: document.getElementById('eq').value,
        sampler: 'builtIn', //Use the evaluator of math.js
        graphType: 'polyline'
      }]
    });
  } catch (err) {
    console.log(err);
    alert(err);
  }

  document.getElementById('antoine-input').onsubmit = function(event) {
    event.preventDefault();
    draw();
  };

  draw();
}

functionPlot is a global function. If you haven't declared it in your code, where and how do you load it? — mahalde
– mahalde, Commented Jul 19, 2019 at 7:13

shrys · Accepted Answer · 2019-07-19 07:15:43Z

Be sure to add the d3 and functionPlot libraries. Also, you need to put draw call and the event declaration outside the draw function:

function draw() {
  try {
    functionPlot({
      target: '#plot',
      data: [{
        fn: document.getElementById('eq').value,
        sampler: 'builtIn', //Use the evaluator of math.js
        graphType: 'polyline'
      }]
    });
  } catch (err) {
    console.log(err);
    alert(err);
  }
}


document.getElementById('antoine-input').onsubmit = function(event) {
  event.preventDefault();
  draw();
};
draw();

<script src="https://unpkg.com/d3@3/d3.min.js"></script>
<script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
<form id="antoine-input" name="antoine-input" class="form-horizontal my-form" method="POST" action="form.php">
  <p>
    <input type="text" id="eq" name="eq" value="x+10" />
  </p>
</form>

<div id="plot" style="height:650px; width:650px;"></div>

Collectives™ on Stack Overflow

How to display graph using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related