Rohit Kumar aka iDaDarkLord Rohit Kumar aka iDaDarkLord - 11 months ago 54
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 Source