title: Draw dynamically changing google chart with angular values
body: <p>I have searched a lot but still did not get a clear answer so I just thought of asking it once again so someone can clear it for me.</p>
  
  <p>I have this google chart :</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-js lang-js prettyprint-override"><code> google.charts.load('current', {'packages': ['corechart']});
  google.charts.setOnLoadCallback(drawChart1);
  
      function drawChart1() {
          var data = google.visualization.arrayToDataTable([
          ['Year', 'Savings'],
          [0, 0],
          [1, 2546250],
          [2, 2851500],
          [3, 3156750],
          [4, 3462000],
          [5, 3767250],
      ]);
  
  
      var options = {
          hAxis: {title: '', titleTextStyle: {color: '#ccc'}, count: 8},
          vAxis: {minValue: 0, gridlineColor: '#bcbcbc', backgroundColor: 'red', count: 8, format: '$#,###'},
          legend: {position: 'none'},
          colors: ['#91c33b'],
      };
      var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
          chart.draw(data, options);
  
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;div id="chart_div" class="charts"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see i have used static values for the points, but i need them to change according to a slider that i have added in angular. Is it possible to somehow redraw the charts whenever the slider is moved or updated, and the chart to take dyncamic values and not static?</p>