Google Chart with AngularJS
HTML
<script src="https://www.google.com/jsapi"></script>
<div ng-controller="MainController">
<input ng-click="toggleCol()" type="checkbox" value="1" checked /><label for="chk-0">Series 0</label>
<input ng-click="toggleCol()" type="checkbox" value="2" checked /><label for="chk-1">Series 1</label>
<input ng-click="toggleCol()" type="checkbox" value="3" checked /><label for="chk-2">Series 2</label>
<div id="chart_div" style="width: 550px; height:330px;"></div>
</div>
JavaScript
google.load('visualization', '1', {packages:['corechart']});
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.datax = [
['Time', 'R1', 'R2', 'R3'],
['03-01-2017', 50, 35, 10],
['01-02-2017', 60, 37, 20],
['10-02-2017', 15, 12, 40],
['13-02-2017', 76, 78, 50],
['15-02-2017', 90, 70, 30],
['17-02-2017', 90, 58, 30],
['20-02-2017', 90, 40, 60]
];
var options = {
title: 'mobile Releases',
legend: {
position: 'none'
},
vAxis:{
title: 'MS',
titleTextStyle: {
color: '#FF0000'
},
maxValue: 100,
minValue: 0,
gridlines: {
count: 10
}
},
hAxis:{
gridlines:{
count: 10
}
},
curveType: 'function',
explorer: {},
pointSize: 5,
interpolateNulls: true
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var formatPercent = new google.visualization.NumberFormat({
fractionDigits: 0,
suffix: 'ms'
});
var formatTime = new google.visualization.PatternFormat('{0} Uhr');
var data;
var colors = ['red', 'blue', 'green'];
$scope.$watch('datax', function(newValue, oldValue) {
data = google.visualization.arrayToDataTable($scope.datax);
colors.forEach(function (color, index) {
data.setColumnProperty(index + 1, 'color', color);
});
drawChart();
}, true);
$scope.toggleCol = function() {
drawChart();
}
function drawChart() {
var chartColors = [];
var chartColumns = [0];
var view = new google.visualization.DataView(data);
var checks = document.getElementsByTagName('input');
for (var i = 0; i < checks.length; i++) {
var seriesColumn = parseInt(checks[i].value);
if (checks[i].checked) {
chartColumns.push(seriesColumn);
chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
}
}
view.setColumns(chartColumns);
...