Recently, I asked here how to properly connect a script with google charts to a form with input data, I was prompted to have a fully working script. But it works only on online editors (jsfiddle, jsbin). When opening a file with a browser from a computer (checked by chrome and firefox), the script still does not work, tell me, please, the reason.
document.getElementById('drawChart').addEventListener('click', function(event) { // 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(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); var mushrooms = document.getElementById('mushrooms').value; data.addRows([ ['Mushrooms', parseInt(mushrooms)], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } }); <script src="https://www.gstatic.com/charts/loader.js"></script> <!--Form--> Mushrooms: <input id="mushrooms"> <button id="drawChart">build</button> <!--Div that will hold the pie chart--> <div id="chart_div"></div> 
