AngularJS Question

Draw dynamically changing google chart with angular values

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.

I have this google chart :



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);

}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" class="charts"></div>





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?

Answer