2 <script type="text/javascript" src="//www.google.com/jsapi"></script>
3 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
4 <script type="text/javascript">
5 google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
8 <script type="text/javascript">
9 var queryString = encodeURIComponent("SELECT MINUTE(time) as Time, city, s8 as Node, REGEXP_REPLACE(s8,r'node[0-9]+\.(.*)\.vicci\.org',r'\\1') as Site, AVG(i0) as Cpu, AVG(i1) as Requests FROM [vicci.demoevents] WHERE i0 is not null AND s8 contains 'vicci.org' and not city IN ('princeton','Unknown') and city is not null GROUP BY Time,city,Site,Node ORDER BY Time;");
10 var serverPart = "http://cloud-scrutiny.appspot.com/command?action=send_query&force=ColumnChart&q="
11 var dataSourceUrl = serverPart + queryString;
20 backgroundColor: "black"
23 google.setOnLoadCallback(function() { sendAndDraw(dataSourceUrl); });
25 function showNodeAgg(dt) {
26 var tab = new google.visualization.ChartWrapper({
28 'containerId': 'chart3',
32 'title': 'Network-wide usage',
36 'view': {'columns': [0, 1, 2]}
43 function showSiteTimeAgg(dt) {
44 var lineChart = new google.visualization.ChartWrapper({
45 'chartType': 'LineChart',
46 'containerId': 'chart4',
50 'title': 'Network-wide usage',
54 'view': {'columns': [0, 1, 2]}
56 lineChart.setDataTable(dt);
59 var scatterChart = new google.visualization.ChartWrapper({
60 'chartType': 'ScatterChart',
61 'containerId': 'chart5',
66 // from the 'data' DataTable.
67 'view': {'columns': [1, 2]}
69 scatterChart.setDataTable(dt);
70 scatterChart.draw();*/
72 function showSiteAgg(dt) {
73 var barChart = new google.visualization.ChartWrapper({
74 'chartType': 'ColumnChart',
75 'containerId': 'chart1',
79 'title': 'Site-wise usage',
83 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
84 // from the 'data' DataTable.
85 'view': {'columns': [1, 2, 3]}
87 barChart.setDataTable(dt);
89 var geoChart = new google.visualization.ChartWrapper({
90 'chartType': 'GeoChart',
91 'containerId': 'chart2',
95 'displayMode': 'markers',
98 colorAxis: {colors: ['green', 'purple', 'red']}
100 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
101 // from the 'data' DataTable.
102 'view': {'columns': [0, 2,3]}
104 geoChart.setDataTable(dt);
107 var histogram = new google.visualization.ChartWrapper({
108 'chartType': 'Histogram',
109 'containerId': 'chart6',
114 'title': 'Sites by load',
115 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
116 // from the 'data' DataTable.
117 'view': {'columns': [1, 2]}
119 histogram.setDataTable(dt);
124 function handleResponse(response) {
125 var supportedClasses = {
126 'Table':google.visualization.Table,
127 'LineChart':google.visualization.LineChart,
128 'ScatterChart':google.visualization.ScatterChart,
129 'ColumnChart':google.visualization.ColumnChart,
130 'GeoChart':google.visualization.GeoChart,
131 'PieChart':google.visualization.PieChart,
132 'Histogram':google.visualization.Histogram
135 /*var slider2 = new google.visualization.ControlWrapper({
136 'controlType': 'NumberRangeFilter',
137 'containerId': 'control3',
139 'filterColumnLabel': 'Cpu',
146 var timeSlider = new google.visualization.ControlWrapper({
147 'controlType': 'NumberRangeFilter',
148 'containerId': 'control1',
150 'filterColumnLabel': 'Time',
155 // Define a bar chart
156 var barChart = new google.visualization.ChartWrapper({
157 'chartType': 'BarChart',
158 'containerId': 'chart1',
162 'hAxis': {'minValue': 0, 'maxValue': 60},
163 'chartArea': {top: 0, right: 0, bottom: 0}
167 var categoryPicker = new google.visualization.ControlWrapper({
168 'controlType': 'CategoryFilter',
169 'allowMultiple': true,
170 'containerId': 'control2',
172 'filterColumnLabel': 'Site',
174 'labelStacking': 'vertical',
179 //var container = document.getElementById('datatable');
180 //var table = new google.visualization.LineChart(container);
181 //var table = new google.visualization.ColumnChart(container);
183 var proxy = new google.visualization.ChartWrapper({
184 'chartType': 'Table',
185 'containerId': 'chart7',
194 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
195 // from the 'data' DataTable.
196 'view': {'columns': [0,1,2,3,4,5]}
199 function core_sum(arr) {
201 for (var i = 0; i < arr.length; i++) {
207 function scaled_sum(arr) {
209 for (var i = 0; i < arr.length; i++) {
215 function count_uniq(arr) {
218 console.log('Starting ret '+ret);
219 for (var i = 0; i < arr.length; i++) {
220 if (!counts[arr[i]]) ret+=1;
225 google.visualization.events.addListener(proxy, 'ready', function () {
226 // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
227 var dt = proxy.getDataTable();
228 var groupedData1 = google.visualization.data.group(dt, [0], [{
231 label: dt.getColumnLabel(4),
232 aggregation: google.visualization.data.sum
236 label: dt.getColumnLabel(5),
237 aggregation: google.visualization.data.sum
240 showSiteTimeAgg(groupedData1);
243 /*google.visualization.events.addListener(proxy, 'ready', function () {
244 // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
245 var dt = proxy.getDataTable();
246 var groupedData0 = google.visualization.data.group(dt, [2], [{
249 label: dt.getColumnLabel(4),
250 aggregation: google.visualization.data.sum
254 label: dt.getColumnLabel(5),
255 aggregation: google.visualization.data.sum
257 // after grouping, the data will be sorted by column 0, then 1, then 2
258 // if you want a different order, you have to re-sort
259 showNodeAgg(groupedData0);
262 google.visualization.events.addListener(proxy, 'ready', function () {
263 // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
264 var dt = proxy.getDataTable();
265 var groupedData0 = google.visualization.data.group(dt, [1,3], [{
269 aggregation: core_sum
273 label: dt.getColumnLabel(5),
274 aggregation: scaled_sum
276 // after grouping, the data will be sorted by column 0, then 1, then 2
277 // if you want a different order, you have to re-sort
278 showSiteAgg(groupedData0);
281 data = response.getDataTable();
282 new google.visualization.Dashboard(document.getElementById('dashboard')).
283 // Establish bindings, declaring the both the slider and the category
284 // picker will drive both charts.
285 bind([categoryPicker,timeSlider], [proxy]).
286 // Draw the entire dashboard.
290 function sendAndDraw(queryString) {
291 query = new google.visualization.Query(queryString)
292 query && query.abort();
293 query.send(function(response) {handleResponse(response);});
298 <div id="dashboard" class="container">
300 <div class="col-md-8">
301 <div class="col-md-4" id="control2"></div>
302 <div class="col-md-4" id="control1"></div>
303 <!--<div class="col-md-4" id="control3"></div>-->
307 <div class="col-md-8">
308 <div class="col-md-4" id="chart1">
310 <div class="col-md-4" id="chart2">
313 <div class="col-md-4" id="chart3">
318 <div class="col-md-8">
319 <div class="col-md-4" id="chart4">
322 <div class="col-md-4" id="chart5">
324 <div class="col-md-4" id="chart6">
329 <div id="chart7" style="display:none"></div>