Create New Chart with Data from User Input - CanvasJS JavaScript Charts

Create New Chart with Data from User Input - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
Y Value: <input id="yValue" type="number" step="any" placeholder="Enter Y-Value" value= "20">
<button id="renderButton">Add DataPoint &amp; Render</button>

JavaScript

var count = 0;
var dps, containerId, chart;
function addDataPointsAndRender() {
  dps = [];
  yValue = Number(document.getElementById("yValue").value);
  dps.push({
    y: yValue
  });
  containerId = "chartContainer" + count++;
  $( "#renderButton" ).after("<div id=" +  containerId + " style='width: 100%; height: 200px;'> </div>");
  chart = new CanvasJS.Chart(containerId, {
    title: {
      text: "Chart from user input"
    },
    data: [{
      type: "doughnut",
      dataPoints: dps
    }]
  });
  chart.render();
}

$("#renderButton").click(function() {
  addDataPointsAndRender();
});