I recently started working with AngularJS and Google charts. I've successfully created a Google chart using data from AngularJS. It's functioning properly, but now I want to make the chart dynamic based on my Angular Scope value.
I have a filter button that, when clicked, will change my Angular Scope values and subsequently update my chart. Here is the code snippet:
<div id="side_pane" class="side">
<label>GENDER</label></br>
<label><input type="radio" ng-model='gender' ng-value='"M"' name="gender">MALE</label></br>
<label><input type="radio" ng-model='gender' ng-value='"F"' name="gender">FEMALE</label><br/></br>
<div>
<button ng-click="getFilterData(gender)">FILTER</button>
</div> //Filter Button
</div>
<div id="fc">
<div ng-view id="calender_chart_id" style="width:100%; height: 200px; margin-left:100px;"></div>
</div>
<script type="text/javascript" src="public/modules/AreaChart.js"></script> //Google chart call
If you're not familiar with Google charts, just think of it as a regular JS file. Thank you!