portal/templates/_widget-stats-top-slices.html

   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");
   7 });
   8 function drawChart(graph, orderby, period) {
   9         var options = { 'height':260,
  10                 vAxes:[
  11                         {title: 'CPU, Memory usage (%)',textStyle:{color: '#302562'}},
  12                         {title: 'Bandwidth (Kbps)',textStyle:{color: '#302562'}}
  13                 ],
  14                 series: {
  15                 0: { type: "bar", targetAxisIndex: 0},
  16                 1: { type: "bar", targetAxisIndex: 0},
  17                 2: { type: "bar", targetAxisIndex: 1},
  18                 3: { type: "bar", targetAxisIndex: 1},
  19             }
  20                 };
  21
  22         var jsonData = $.ajax({
  23             type: 'GET',
  24                 url: "http://slicestat.onelab.eu/top/" + graph,
  25                 dataType: "json",
  26                 async: false,
  27                 data: { orderby: orderby, period: period },
  28             success: function(ret) {
  29                 var result = [];
  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)');
  36
  37                                 $.each(ret, function() {
  38                                         switch(graph) {
  39                                                 case "experiments":
  40                                                         result.push([this[0] + " | number of resources: " + this[1], this[2], this[3], this[4], this[5]]);
  41                                                 break;
  42                                                 case "resources":
  43                                                         result.push([this[0] + " | number of experiments: " + this[1], this[2], this[3], this[4], this[5]]);
  44                                                 break;
  45                                         }
  46                 });
  47                 data.addRows(result);
  48
  49                                 var chart = new google.visualization.ColumnChart(document.getElementById(graph));
  50                                 chart.draw(data, options);
  51             }
  52         }).responseText;
  53
  54     //  var data = google.visualization.arrayToDataTable(obj, false);
  55
  56
  57   }
  58   $(document).ready(function () {
  59         var orderby = "cpu";
  60         var period = "day";
  61         $('a.stats-orderby').click(function(event) {
  62                 event.preventDefault();
  63
  64                 orderby = $(this).data('orderby');
  65                 graph = $(this).data('graph');
  66
  67                 $('a.stats-orderby[data-graph='+graph+']').removeClass('current');
  68
  69                 drawChart(graph, orderby, period);
  70                 $(this).addClass('current');
  71         });
  72
  73         $('a.stats-period').click(function(event) {
  74                 event.preventDefault();
  75                 period = $(this).data('period');
  76                 graph = $(this).data('graph');
  77
  78                 $('a.stats-period[data-graph='+graph+']').removeClass('current');
  79
  80                 $('#stats-period-'+graph+'-txt').text($(this).text());
  81
  82                 drawChart(graph, orderby, period);
  83                 $(this).addClass('current');
  84         });
  85   });
  86 </script>
  87 <style>div#graph {margin:0;padding:0;border:0;}</style>
  88 <div class="stats">
  89 <div class="container">
  90     <div class="row">
  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>
  93         </div>
  94     </div>
  95         <div class="row">
  96                 <div class="col-md-7">
  97                         Order by:
  98                         <a class="stats-orderby current" data-orderby="cpu" data-graph="experiments" href="#">CPU usage</a> &middot;
  99                         <a class="stats-orderby" data-orderby="mem" data-graph="experiments" href="#">Memory usage</a> &middot;
 100                         <a class="stats-orderby" data-orderby="snd" data-graph="experiments" href="#">Sending bandwidth</a> &middot;
 101                         <a class="stats-orderby" data-orderby="rcv" data-graph="experiments" href="#">Receiving bandwidth</a>
 102                 </div>
 103                 <div class="col-md-5">
 104                         Period:
 105                         <a class="stats-period current" data-period="day" data-graph="experiments" href="#">Last day</a> &middot;
 106                         <a class="stats-period" data-period="week" data-graph="experiments" href="#">Last week</a> &middot;
 107                         <a class="stats-period" data-period="month" data-graph="experiments" href="#">Last month</a> &middot;
 108                         <a class="stats-period" data-period="3months" data-graph="experiments" href="#">Last three months</a>
 109                 </div>
 110         </div>
 111         <div class="row">
 112                 <div class="col-md-12">
 113                         <div id="experiments"></div>
 114                 </div>
 115         </div>
 116 </div>
 117 <div class="container">
 118     <div class="row">
 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>
 121         </div>
 122     </div>
 123         <div class="row">
 124                 <div class="col-md-7">
 125                         Order by:
 126                         <a class="stats-orderby current" data-orderby="cpu" data-graph="resources" href="#">CPU usage</a> &middot;
 127                         <a class="stats-orderby" data-orderby="mem" data-graph="resources" href="#">Memory usage</a> &middot;
 128                         <a class="stats-orderby" data-orderby="snd" data-graph="resources" href="#">Sending bandwidth</a> &middot;
 129                         <a class="stats-orderby" data-orderby="rcv" data-graph="resources" href="#">Receiving bandwidth</a>
 130                 </div>
 131                 <div class="col-md-5">
 132                         Period:
 133                         <a class="stats-period current" data-period="day" data-graph="resources" href="#">Last day</a> &middot;
 134                         <a class="stats-period" data-period="week" data-graph="resources" href="#">Last week</a> &middot;
 135                         <a class="stats-period" data-period="month" data-graph="resources" href="#">Last month</a> &middot;
 136                         <a class="stats-period" data-period="3months" data-graph="resources" href="#">Last three months</a>
 137                 </div>
 138         </div>
 139         <div class="row">
 140                 <div class="col-md-12">
 141                         <div id="resources"></div>
 142                 </div>
 143         </div>
 144 </div>
 145 </div>