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