<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function () { var dps = []; //dataPoints. var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Accepting DataPoints from User Input" }, data: [{ type: "line", dataPoints: dps }] }); function addDataPointsAndRender() { xValue = Number(document.getElementById("xValue").value); yValue = Number(document.getElementById("yValue").value); dps.push({ x: xValue, y: yValue }); chart.render(); } var renderButton = document.getElementById("renderButton"); renderButton.addEventListener("click", addDataPointsAndRender); } </script> <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </head> <body> X Value: <input id="xValue" type="number" step="any" placeholder="Enter X-Value"> Y Value: <input id="yValue" type="number" step="any" placeholder="Enter Y-Value"> <select id="select1"> <option value="bar">Bar</option> <option value="pie">Pie</option> <option value="column">Column</option> </select> </p> <button id="renderButton">Add DataPoint & Render</button> <div id="chartContainer" style="height: 270px; width: 100%;"> </div> </body> </html>En el código anterior, ¿cómo puedo cambiar el valor del tipo de gráfico en el atributo de datos de esta función data: [{ type: "line", dataPoints: dps }] dinámicamente con la ayuda de las opciones de selección de html? por favor ayúdenme ya que soy un principiante en JS y las soluciones con la ayuda de jquery también serán bienvenidas...