forked from eseidel/cycletimes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
graph.html
101 lines (92 loc) · 3.55 KB
/
graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src='graph_data.js'></script>
<script type="text/javascript">
// Most of this is from http://jsfiddle.net/asgallant/WaUu2/
google.load("visualization", "1", {packages:["controls"]});
google.setOnLoadCallback(loadedCharts);
function loadedCharts() {
setupChart('chrome_chart', 'chrome_filter', window.chrome_stats);
setupChart('blink_chart', 'blink_filter', window.blink_stats);
}
function setupChart(chart_div, filter_div, data_array) {
var data = google.visualization.arrayToDataTable(data_array);
var chartOptions = {
title: 'Minutes from Commit to Release',
hAxis: {
title: 'Revision',
},
vAxis: {
title: 'Minutes',
},
isStacked: true,
};
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
// you can comment out this next line if you want to have a default selection other than the whole list
initState.selectedValues.push(data.getColumnLabel(i));
}
// you can set individual columns to be the default columns (instead of populating via the loop above) like this:
// initState.selectedValues.push(data.getColumnLabel(4));
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: chart_div,
dataTable: data,
options: chartOptions,
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: filter_div,
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
</script>
</head>
<script>
</script>
<body>
<h1>Chrome</h1>
<div id="chrome_filter"></div>
<div id="chrome_chart" style="width: 1200px; height: 500px;"></div>
<h1>Blink</h1>
<div id="blink_filter"></div>
<div id="blink_chart" style="width: 1200px; height: 500px;"></div>
</body>
</html>