CODEWITHSUNDEEP
javascriptplotly.js
justin
justin

Reputation: 563

Data displayed upon submission of a form is visible for a moment and then disappears

I am trying to create create a calculator(form) that allows a user to submit some data and a graph will be drawn using plotly.js upon submission. Right now I am just trying to get an example graph(that has nothing to do with the data) to render upon submission of an empty form. However, the graph displays for a split second and then disappears. It seems as it if the graph is visible for the half a second the page takes to refresh and then vanishes. How can I prevent this from happening? 

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
  <form>
    <button type="submit" onclick="calculate()">Calculate</button><br>
  </form>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

</body>

<script>
function calculate(){

  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);


};
</script>
</html>

Upvotes: 0

Views: 38

Answers (1)

Claudia Chersin
Claudia Chersin

Reputation: 192

Change the type of button from 'submit' to 'button' 

function calculate(){

  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);


};
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
  <form>
    <button type="button" onclick="calculate()">Calculate</button><br>
  </form>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

</body>

<script>

</script>
</html>

See also this question

Upvotes: 1

Related Questions