1 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
2 <script type="text/javascript">
3 google.load("visualization", "1.0", {packages:["corechart"]});
4 google.setOnLoadCallback(function() {
5 drawChart("experiments","cpu","day");
6 drawChart("resources","cpu","day");
8 function drawChart(graph, orderby, period) {
9 var options = { 'height':260,
11 {title: 'CPU, Memory usage (%)',textStyle:{color: '#302562'}},
12 {title: 'Bandwidth (Kbps)',textStyle:{color: '#302562'}}
15 0: { type: "bar", targetAxisIndex: 0},
16 1: { type: "bar", targetAxisIndex: 0},
17 2: { type: "bar", targetAxisIndex: 1},
18 3: { type: "bar", targetAxisIndex: 1},
22 var jsonData = $.ajax({
24 url: "http://slicestat.onelab.eu/top/" + graph,
27 data: { orderby: orderby, period: period },
28 success: function(ret) {
30 var data = new google.visualization.DataTable();
31 data.addColumn('string', graph);
32 data.addColumn('number', 'CPU (%)');
33 data.addColumn('number', 'MEM (%)');
34 data.addColumn('number', 'SND (Kbps)');
35 data.addColumn('number', 'RCV (Kbps)');
37 $.each(ret, function() {
40 result.push([this[0] + " | number of resources: " + this[1], this[2], this[3], this[4], this[5]]);
43 result.push([this[0] + " | number of experiments: " + this[1], this[2], this[3], this[4], this[5]]);
49 var chart = new google.visualization.ColumnChart(document.getElementById(graph));
50 chart.draw(data, options);
54 // var data = google.visualization.arrayToDataTable(obj, false);
58 $(document).ready(function () {
61 $('a.stats-orderby').click(function(event) {
62 event.preventDefault();
64 orderby = $(this).data('orderby');
65 graph = $(this).data('graph');
67 $('a.stats-orderby[data-graph='+graph+']').removeClass('current');
69 drawChart(graph, orderby, period);
70 $(this).addClass('current');
73 $('a.stats-period').click(function(event) {
74 event.preventDefault();
75 period = $(this).data('period');
76 graph = $(this).data('graph');
78 $('a.stats-period[data-graph='+graph+']').removeClass('current');
80 $('#stats-period-'+graph+'-txt').text($(this).text());
82 drawChart(graph, orderby, period);
83 $(this).addClass('current');
87 <style>div#graph {margin:0;padding:0;border:0;}</style>
89 <div class="container">
91 <div class="col-md-12">
92 <h1>Experiment statistics <span class="htitle">top experiments per resource usage in the <span id="stats-period-experiments-txt">last day</span></span></h1>
96 <div class="col-md-7">
98 <a class="stats-orderby current" data-orderby="cpu" data-graph="experiments" href="#">CPU usage</a> ·
99 <a class="stats-orderby" data-orderby="mem" data-graph="experiments" href="#">Memory usage</a> ·
100 <a class="stats-orderby" data-orderby="snd" data-graph="experiments" href="#">Sending bandwidth</a> ·
101 <a class="stats-orderby" data-orderby="rcv" data-graph="experiments" href="#">Receiving bandwidth</a>
103 <div class="col-md-5">
105 <a class="stats-period current" data-period="day" data-graph="experiments" href="#">Last day</a> ·
106 <a class="stats-period" data-period="week" data-graph="experiments" href="#">Last week</a> ·
107 <a class="stats-period" data-period="month" data-graph="experiments" href="#">Last month</a> ·
108 <a class="stats-period" data-period="3months" data-graph="experiments" href="#">Last three months</a>
112 <div class="col-md-12">
113 <div id="experiments"></div>
117 <div class="container">
119 <div class="col-md-12">
120 <h1>Resource statistics <span class="htitle">top resources per usage in the <span id="stats-period-resources-txt">last day</span></span></h1>
124 <div class="col-md-7">
126 <a class="stats-orderby current" data-orderby="cpu" data-graph="resources" href="#">CPU usage</a> ·
127 <a class="stats-orderby" data-orderby="mem" data-graph="resources" href="#">Memory usage</a> ·
128 <a class="stats-orderby" data-orderby="snd" data-graph="resources" href="#">Sending bandwidth</a> ·
129 <a class="stats-orderby" data-orderby="rcv" data-graph="resources" href="#">Receiving bandwidth</a>
131 <div class="col-md-5">
133 <a class="stats-period current" data-period="day" data-graph="resources" href="#">Last day</a> ·
134 <a class="stats-period" data-period="week" data-graph="resources" href="#">Last week</a> ·
135 <a class="stats-period" data-period="month" data-graph="resources" href="#">Last month</a> ·
136 <a class="stats-period" data-period="3months" data-graph="resources" href="#">Last three months</a>
140 <div class="col-md-12">
141 <div id="resources"></div>