title: Re-Draw google chart on button click / javascript
body: <p>I'm new to .js programming and I have a problem with google charts in javascript.
  I'm using a simple HTML form where I enter some data, then on button click my script runs.</p>
  
  <p>I would like the code to re-draw (or update) the chart on every button click.</p>
  
  <p>The problem seems to be, that once the google library has finished loading for the first time, my script stops executing at the point where the command for loading is.</p>
  
  <p>I tried the solution from this post <a href="https://stackoverflow.com/questions/30640728/google-chart-redraw-onclick">Google chart redraw onclick</a>, but it didn't work for me.</p>
  
  <p>The file looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form"&gt;
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;div id="gender"&gt;
    &lt;h3&gt;Gender&lt;/h3&gt;
    &lt;fieldset&gt;
     &lt;input type="radio" id="male" name="gender_select" class="optGender" value="männlich" checked&gt;&lt;span class="optGender"&gt;male&lt;/span&gt;&lt;/input&gt;&lt;br&gt;
     &lt;input type="radio" id="female" name="gender_select" class="optGender" value="weiblich" &gt;&lt;span class="optGender"&gt;female&lt;/span&gt;&lt;/input&gt;&lt;br&gt;
     Bodyweight: &lt;input type="text" id="bodyweight"&gt;&lt;/input&gt;
    &lt;/fieldset&gt;
   &lt;/div&gt;
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;div id="chart"&gt;
   &lt;/div&gt;
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;div id="squat"&gt;
    &lt;p&gt;
     &lt;h3&gt;Squat&lt;/h3&gt;
     &lt;fieldset&gt;
      &lt;span class="spreps"&gt;Reps&lt;/span&gt;&lt;input type="text" id="reps_squat" required&gt;&lt;br&gt;
      &lt;span class="spweight"&gt;Weight&lt;/span&gt;&lt;input type="text" id="weight_squat" required&gt;&lt;br&gt;
      &lt;span class="spmax"&gt;Calculated Max&lt;/span&gt;&lt;input type="text" id="total_squat" readonly&gt;&lt;br&gt;
     &lt;/fieldset&gt;
    &lt;/p&gt;
   &lt;/div&gt;
  &lt;!------------------------------------------------------------------------------------------------------&gt;
  
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;div id="bench"&gt;
    &lt;p&gt; 
     &lt;h3&gt;Benchpress&lt;/h3&gt;
     &lt;fieldset&gt;
      &lt;span class="spreps"&gt;Reps&lt;/span&gt;&lt;input type="text" id="reps_bench" required&gt;&lt;br&gt;
      &lt;span class="spweight"&gt;Weight&lt;/span&gt;&lt;input type="text" id="weight_bench" required&gt;&lt;br&gt;
      &lt;span class="spmax"&gt;Calculated Max&lt;/span&gt;&lt;input type="text" id="total_bench" readonly&gt;&lt;br&gt;
     &lt;/fieldset&gt;
    &lt;/p&gt;
   &lt;/div&gt;
  &lt;!------------------------------------------------------------------------------------------------------&gt;
  
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;div id="deadlift"&gt;
    &lt;p&gt;
     &lt;h3&gt;Deadlift&lt;/h3&gt;
     &lt;fieldset&gt;
      &lt;span class="spreps"&gt;Reps&lt;/span&gt;&lt;input type="text" id="reps_deadlift" required&gt;&lt;br&gt;
      &lt;span class="spweight"&gt;Weight&lt;/span&gt;&lt;input type="text" id="weight_deadlift" required&gt;&lt;br&gt;
      &lt;span class="spmax"&gt;Calculated Max&lt;/span&gt;&lt;input type="text" id="total_deadlift" readonly&gt;&lt;br&gt;
     &lt;/fieldset&gt;
    &lt;/p&gt;
   &lt;/div&gt;  
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;p&gt;
    &lt;input type="button" alt="Berechnen" class="button" id="btn_calcTotal" value="Total berechnen" onclick="initialize()"&gt;
   &lt;/p&gt;
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;div id="total"&gt;
    &lt;p&gt;
    &lt;h3&gt;calculated Total&lt;/h3&gt;
     &lt;input type="text" id="total_all" readonly&gt;
  
    &lt;/p&gt;
   &lt;/div&gt;
  
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;!--Load the AJAX API--&gt;
      &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;!------------------------------------------------------------------------------------------------------&gt;
   &lt;script&gt;
    function initialize() {
   // delete old entries
   document.getElementById("total_squat").value = "";
   document.getElementById("total_bench").value = "";
   document.getElementById("total_deadlift").value = "";
   document.getElementById("total_all").value = "";
   
   // read weight
   var dWeight = parseFloat(document.getElementById("bodyweight").value);
   
   // read gender &amp; get weightclass
   var sGender = "";
    if (document.getElementById("male").checked == true ) {
     sGender = document.getElementById("male").value;
    }
    else {
     sGender = document.getElementById("female").value;
    }
   
   // read exercise values
   var irepsSquat = parseFloat(document.getElementById("reps_squat").value.replace(',','.'));
   var dweightSquat = parseFloat(document.getElementById("weight_squat").value.replace(',','.'));
  
   var irepsBench = parseFloat(document.getElementById("reps_bench").value.replace(',','.'));
   var dweightBench = parseFloat(document.getElementById("weight_bench").value.replace(',','.'));
  
   var irepsDeadlift = parseFloat(document.getElementById("reps_deadlift").value.replace(',','.'));
   var dweightDeadlift = parseFloat(document.getElementById("weight_deadlift").value.replace(',','.'));
   
   // check if reps &amp; weight are valid -&gt; calculate (Squat)
   if (check(irepsSquat) || check(dweightSquat)) {
    window.alert("Bitte Wiederholungen &amp; Übungsgewicht eintragen");
    return;
   }
   else {
    var total_sq = calculate(irepsSquat, dweightSquat);
   }
   // check if reps &amp; weight are valid -&gt; calculate (Benchpress)
   if (check(irepsBench) || check(dweightBench)){
    window.alert("Bitte Wiederholungen &amp; Übungsgewicht eintragen");
    return;
   }
   else {
    var total_bp = calculate(irepsBench, dweightBench);
   }
   // check if reps &amp; weight are valid -&gt; calculate (Deadlift)
   if (check(irepsBench) || check(dweightBench)){
    window.alert("Bitte Wiederholungen &amp; Übungsgewicht eintragen");
    return;
   }
   else {
    var total_dl = calculate(irepsDeadlift, dweightDeadlift);
   }
   
   // calculate total &amp; wilk points -&gt; write it
   document.getElementById("total_squat").value = total_sq;
   document.getElementById("total_bench").value = total_bp;
   document.getElementById("total_deadlift").value = total_dl;
   
   var total_all = (parseFloat(total_sq) + parseFloat(total_bp) + parseFloat(total_dl)).toFixed(2);
   document.getElementById("total_all").value = total_all; 
               
   // Load the Visualization API
      google.charts.load("current", {packages:['corechart']});
   
      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(loadChartData(total_all));
  }
  
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Checks ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  function check(val) {
   if (isNaN(val)) {
    return true;
   }
   else {
    return false;
   }
  }
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ calculate 1RM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  function calculate(iReps, dWeightE) {
     return (dWeightE/(1.0278-(0.0278*iReps))).toFixed(2);
  }
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
  function loadChartData(total_all) {
   var dnorm1 = 300;
   var dnorm2 = 450;
   
   // Create the data table
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'label');
   data.addColumn('number', 'Weight');
   data.addRows([
     ['Own Total', parseFloat(total_all)],
     ['Kadernorm 1', parseFloat(dnorm1)], 
     ['Kadernorm 2', parseFloat(dnorm2)] 
   ]);
   drawChart(data);
  }
  
  function drawChart(data) {
   // Instantiate new chart
   var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
   
   // Set chart options
   var options = {'title':'Comparison of own Total vs. national team levels in kg',
         'width':700,
         'height':400,
         };
  
   // Draw chart, passing in some options
   chart.draw(data, options);
  
  }
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   &lt;/script&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>