In that case, you will need to wrap the drawChart() function in a parent function that is called when the API is loaded. The drawChart() function is called when a change is made to the numeric inputs.
Code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
var qID = '{QID}';
var thisQuestion = $('#question'+qID);
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(initChart);
// This function is called when the Google Visualization API is loaded.
function initChart() {
// Insert the chart wrapper
$('.question-text', thisQuestion).append('<div id="chart_wrapper_'+qID+'" class="chart-wrapper" />');
// A function that:
// - Creates and populates a data table,
// - Instantiates the pie chart
// - Passes in the data
// - Draws the chart.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Subquestion');
data.addColumn('number', 'Value');
var dataRows = [];
$('.question-item', thisQuestion).each(function(i) {
var thislabel = $.trim($('.control-label:eq(0)', this).text());
var thisValue = ($.trim($(':text.form-control:eq(0)', this).val()) == '') ? 0 : Number($(':text.form-control:eq(0)', this).val());
dataRows.push([thislabel, thisValue]);
});
data.addRows(dataRows);
// Set chart options
var options = {
//'title':'Some chart title',
'width':400,
'height':300};
// Instantiate and draw the chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_wrapper_'+qID+''));
chart.draw(data, options);
}
$(':text.form-control', thisQuestion).on('keyup change', function(e){
drawChart();
});
}
});
</script>
