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("cpu");
   6 });
   7 function drawChart(orderby) {
   8         var options = {
   9                 'height':280,
  10
  11                 series: {
  12                 0: { type: "bar", targetAxisIndex: 0},
  13                 1: { type: "bar", targetAxisIndex: 0},
  14                 2: { type: "bar", targetAxisIndex: 1},
  15                 3: { type: "bar", targetAxisIndex: 1},
  16             }
  17                 };
  18
  19         var jsonData = $.ajax({
  20             type: 'GET',
  21                 url: "http://slicestat.onelab.eu/top/slices",
  22                 dataType: "json",
  23                 async: false,
  24                 data: { orderby: orderby },
  25             success: function(ret) {
  26                 var result = [];
  27                 var data = new google.visualization.DataTable();
  28                                 data.addColumn('string', 'Slice');
  29                                 data.addColumn('number', 'CPU (%)');
  30                                 data.addColumn('number', 'MEM (%)');
  31                                 data.addColumn('number', 'SND (Kb)');
  32                                 data.addColumn('number', 'RCV (Kb)');
  33
  34                                 $.each(ret, function() {
  35                         result.push([this[0] + " | number of nodes: " + this[1], this[2], this[3], this[4], this[5]]);
  36                 });
  37                 data.addRows(result);
  38
  39                                 var chart = new google.visualization.ColumnChart(document.getElementById('graph'));
  40                                 chart.draw(data, options);
  41             }
  42         }).responseText;
  43
  44     //  var data = google.visualization.arrayToDataTable(obj, false);
  45
  46
  47   }
  48   $(document).ready(function () {
  49         $('a.stats-orderby').click(function(event) {
  50                 $('a.stats-orderby').removeClass('current');
  51                 event.preventDefault();
  52                 drawChart($(this).data('orderby'));
  53                 $(this).addClass('current');
  54         });
  55   });
  56 </script>
  57 <style>div#graph {margin:0;padding:0;border:0;}</style>
  58 <div class="stats">
  59 <div class="container">
  60     <div class="row">
  61         <div class="col-md-12">
  62                 <h1>Statistics <span class="htitle">top experiments per resource usage in the last 24 hours</span></h1>
  63         </div>
  64     </div>
  65         <div class="row">
  66                 <div class="col-md-6">
  67                         Order by:
  68                         <a class="stats-orderby current" data-orderby="cpu" href="#">CPU usage</a> -
  69                         <a class="stats-orderby" data-orderby="mem" href="#">Memory usage</a> -
  70                         <a class="stats-orderby" data-orderby="snd" href="#">Sent traffic</a> -
  71                         <a class="stats-orderby" data-orderby="rcv" href="#">Received traffic</a>
  72                 </div>
  73         </div>
  74         <div class="row">
  75                 <div class="col-md-12">
  76                         <div id="graph"></div>
  77                 </div>
  78         </div>
  79 </div>
  80 </div>