title: How to update the Google chart with events?
body: <p>I am using Google API to draw chart set event that whenever my button clicked one value of my chart will change but unfortunately nothing happened so is there any page to update Google without reload the page?<br>
  Google Chart Link<br>
  <a href="https://developers.google.com/chart/interactive/docs/gallery/timeline" rel="nofollow">https://developers.google.com/chart/interactive/docs/gallery/timeline</a><br>
  Javascript code:    </p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
         'version':'1','packages':['timeline']}]}"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var test=10;
          $(document).ready(function(){
              $("#test").click(function(){
                  alert("Awd");
                  test = 12;
              });
          });
          google.setOnLoadCallback(drawChart);
          function drawChart() {
              var container = document.getElementById('example5.3');
              var chart = new google.visualization.Timeline(container);
              var dataTable = new google.visualization.DataTable();
              dataTable.addColumn({ type: 'string', id: 'Room' });
              dataTable.addColumn({ type: 'string', id: 'Name' });
              dataTable.addColumn({ type: 'date', id: 'Start' });
              dataTable.addColumn({ type: 'date', id: 'End' });
              dataTable.addRows([
                  [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,test,0,0),  new Date(0,0,0,14,0,0) ],
                  [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                  [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
                  [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                  [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                  [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
                  [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
                  [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
                  [ 'Petunia Room',   'App Engine',          new Date(0,0,0,21,30,0), new Date(0,0,1,0,30,0) ]]);
  
              var options = {
                  timeline: { colorByRowLabel: true },
                  backgroundColor: '#ffd'
              };
  
              chart.draw(dataTable, options);
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>And Html :   </p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;button id="test" class="btn btn-primary"&gt;&lt;/button&gt;
      &lt;div id="example5.3" style="width: 900px; height: 200px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>