Onclick Event Google Visualization Pie Chart create with Dynamic input value

Question

I have 3 inputs and from where by click in a button get those input value and create a Google Visualization dynamic Pie Chart depend on those value . I have made like this code below , but did not getting expecting result

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>

SCRIPT CODE

<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>

ERROR RESULT ::

EXPECTING RESULT

Answer 1

It is Solved! I made it . Here I am sharing this technique.

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>

Script

   <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>

And OnClick event this cart will be generate easily ! Also we can make it with onKeyup / onKeydown event also.

NOTE : parseInt is used here because of convert string to number.