planetstack/core/static/planetstack_graphs.js

   1 google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
   2
   3 function renderChart(newStyle, dialog, container, dataSourceUrl, yColumn, xColumn, aggFunc, options) {
   4     if ( newStyle ) {
   5         $(dialog).dialog("open");
   6     }
   7     else {
   8         $(container).empty();
   9         $(dialog).modal('show');
  10         $('.modal-body').scrollTop(0);
  11     }
  12
  13     console.log(dataSourceUrl);
  14
  15     var query = new google.visualization.Query(dataSourceUrl);
  16     query && query.abort();
  17     query.send(function(response) {handleResponse_psg(container, response, yColumn, xColumn, aggFunc, options);});
  18 }
  19
  20 // NOTE: appended _psg to showLine() and handleResponse() to prevent conflict
  21 //       with Sapan's analytics page.
  22
  23 function agg_bandwidth(arr) {
  24         var ret = 0;
  25         for (var i = 0; i < arr.length; i++) {
  26                 ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
  27         }
  28         return ret;
  29 }
  30
  31 function showLine_psg(container, dt, options) {
  32     console.log("showline_psg");
  33
  34     var base_options = {
  35             'width': 520,
  36             'height': 300,
  37             'pages': true,
  38             'numRows': 9,
  39             'backgroundColor': 'transparent',
  40             'titleTextStyle': {"color": "black"},
  41             'legend': 'none',
  42             'hAxis': {"baselineColor": "darkBlue",
  43                       "textStyle": {"color": "black"}},
  44             'vAxis': {"baselineColor": "darkBlue",
  45                       "textStyle": {"color": "black"}},
  46           }
  47
  48     options = $.extend(true, {}, base_options, options);
  49
  50     var lineChart = new google.visualization.ChartWrapper({
  51           'chartType': 'LineChart',
  52           'containerId': container.substring(1),
  53           'view': {'columns': [0, 1]},
  54           'options': options
  55         });
  56         lineChart.setDataTable(dt);
  57         lineChart.draw();
  58
  59 }
  60
  61 function fixDate(unixDate) {
  62     return new Date(unixDate*1000);
  63 }
  64
  65 function fixDate2(unixDate) {
  66     return new Date(unixDate);
  67 }
  68
  69 function handleResponse_psg(container, response, yColumn, xColumn, aggFunc, options) {
  70     var supportedClasses = {
  71                     'Table':google.visualization.Table,
  72                     'LineChart':google.visualization.LineChart,
  73                     'ScatterChart':google.visualization.ScatterChart,
  74                     'ColumnChart':google.visualization.ColumnChart,
  75                     'GeoChart':google.visualization.GeoChart,
  76                     'PieChart':google.visualization.PieChart,
  77                     'Histogram':google.visualization.Histogram};
  78
  79     var proxy = new google.visualization.ChartWrapper({
  80       'chartType': 'Table',
  81       'containerId': 'graph_work',
  82       'options': {
  83         'width': 800,
  84         'height': 300,
  85          pageSize:5,
  86          page:'enable',
  87         'legend': 'none',
  88         'title': 'Nodes'
  89       },
  90       'view': {'columns': [0,1]}
  91     });
  92
  93     google.visualization.events.addListener(proxy, 'ready', function () {
  94         var dt = proxy.getDataTable();
  95         var groupedData1 = google.visualization.data.group(dt, [{
  96            column: yColumn,
  97            type: 'datetime',
  98            modifier: fixDate2,
  99            }],
 100            [{
 101             column: xColumn,
 102             type: 'number',
 103             label: dt.getColumnLabel(xColumn),
 104             aggregation: aggFunc}]);
 105
 106         console.log(groupedData1.getColumnRange(0))
 107         console.log(groupedData1.getColumnRange(1))
 108         showLine_psg(container, groupedData1, options);
 109     });
 110
 111     proxy.setDataTable(response.getDataTable());
 112
 113     proxy.draw();
 114 }
 115
 116 $('.nodesLabel, .nodesValue').click(function() {
 117         renderChart(false,"#chartsModal", "#graph", window.pageAnalyticsUrl, 0, "Number of Nodes", 2, "Node Count", google.visualization.data.sum);
 118 });
 119
 120 $('.cpuLabel, .cpuValue').click(function() {
 121         var jsonData = window.pageAnalyticsData;
 122         renderChart(false,"#chartsModal", "#graph", window.pageAnalyticsUrl, 0, "Average CPU", 1, "Average CPU", google.visualization.data.sum);
 123 });
 124 $('.bandwidthLabel, .bandwidthValue').click(function() {
 125         var jsonData = window.pageBandData;
 126         renderChart(false,"#chartsModal", "#graph", window.pageBandUrl, 0, "Total Bandwidth (Gbps)", 1, "Total Bandwidth", agg_bandwidth);
 127 });