Tengo 3 entradas y desde donde, al hacer clic en un botón, obtengo esos valores de entrada y creo un gráfico circular dinámico de visualización de Google que depende de esos valores. Hice como este código a continuación, pero no obtuve el resultado esperado
HTML
<input type="text" name="BigHalo" id="BigHalo"> <input type="text" name="MediumHalo" id="MediumHalo"> <input type="text" name="SmallHalo" id="SmallHalo"> <button type="button" onclick="onclickChartValur()" >CLICK HERE</button> <div id="donutchart" style="width:380px; height:380px;"></div>
CÓDIGO DE ESCRITURA
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart(BigHalo,MediumHalo,SmallHalo) { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Big Halo', BigHalo], ['Medium Halo', MediumHalo], ['Small Halo',SmallHalo] ]); var options = { legend: 'none', pieSliceText: 'label', title: '', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } function onclickChartValur() { var BigHalo = $("#BigHalo").val(); var MediumHalo = $("#MediumHalo").val(); var SmallHalo = $("#SmallHalo").val(); drawChart(BigHalo,MediumHalo,SmallHalo); } </script>
RESULTADO DE ERRORES ::
¡Está resuelto! Lo hice . Aquí les comparto esta técnica.
HTML
<input type="text" name="BigHalo" id="BigHalo"> <input type="text" name="MediumHalo" id="MediumHalo"> <input type="text" name="SmallHalo" id="SmallHalo"> <button type="button" onclick="onclickChartValur()" >CLICK HERE</button> <div id="donutchart" style="width:380px; height:380px;"></div>
Guion
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); function drawChart(BigHalo,MediumHalo,SmallHalo) { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Big Halo', parseInt(BigHalo)], ['Medium Halo', parseInt(MediumHalo)], ['Small Halo', parseInt(SmallHalo)] ]); var options = { legend: 'none', title: '', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } function ontypeChartValur() { var BigHalo = $("#BigHalo").val(); var MediumHalo = $("#MediumHalo").val(); var SmallHalo = $("#SmallHalo").val(); drawChart(BigHalo,MediumHalo,SmallHalo); } </script>
¡Y el evento OnClick este carrito se generará fácilmente! También podemos hacerlo con el evento onKeyup / onKeydown también.
NOTA: parseInt se usa aquí debido a la conversión de cadena a número.