CHAOS: Difference between revisions

From AAISP Support Site
mNo edit summary
Line 3: Line 3:
This is a quick example of getting cqm graphs from CHAOS.
This is a quick example of getting cqm graphs from CHAOS.


In short, the Info command is used to get the graph URLs.
In short, the Info command is used to get the graph URLs. The HTML provides a form to enter the credentials


HTML:
HTML:

Revision as of 16:10, 12 January 2015

Getting CQM Graphs

This is a quick example of getting cqm graphs from CHAOS.

In short, the Info command is used to get the graph URLs. The HTML provides a form to enter the credentials

HTML:

 
<!DOCTYPE html>
<head lang='en'>
<title>Graphs</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script src='chaosgraphs.js'></script>
</head>
<body>

<form id='login'>
<input type='text' name='username' placeholder='username' autofocus />
<input type='password' name='password' placeholder='password' />
<input type='submit' value='Login' />
</form>

<hr />

<div id='results'></div>

</body>
</html>

Javascript:

var gxml = new Array(); //Xml for plotting graphs

//Go through each graph div and plot it's graph
function plotgraphs()
{
 $("div.graph").each(function() {
  var graph = $(this).attr("graph");
  var url = $(this).attr("url");
  var units = $(this).attr("units");
  var pwidth = $(this).parent().width();
  $(this).width(pwidth-300).addClass("waiting");
  $("div.graphlegend[graph='"+graph+"']").hide();
  $.ajax({url: url, dataType: "xml", complete: function(data) {
   gxml[graph] = $.xml2json(data.responseXML,true);
   var html = "";
   for(var j = 0; j < gxml[graph].dataset.length; j++) {
    html+="<div class='legenditem' style='border-left: 5px solid #"+colors[j]+";'><label for='legend-"+gxml[graph].d;
   }

   //Create legend
   $("div.graphlegend[graph='"+graph+"']").html(html);

   //Plot each graph
   myplot(graph);

   //Display precise data on hover
   $("div.graph[graph='"+graph+"']").bind("plothover", function(event, pos, item) {
    $("div.datapoint").remove();
    if(item) {
     var html = "<div class='datapoint' style='top: 20px; right: 50px;'>";
     if(units == 'B' || units == 'b') { html+=mega(item.datapoint[1])+units; }
     else if(units != undefined) { html+=item.datapoint[1]+units; }
     else { html+=item.datapoint[1]; }
     html+="</div>";
     $("div.graph[graph='"+graph+"']").append(html);
    }
   });

   //Show/Hide data when the legend items are clicked
   $("input.legend[type='checkbox'][graph='"+graph+"']").unbind("change").change(function() {
    var checked = $(this).attr("checked");
    var graph = $(this).attr("graph");
    if($("input.legend[type='checkbox'][graph='"+graph+"']:checked").length == 0 ) { $(this).attr("checked","true");}
    else { myplot(graph); }
   });

  }});
 });
}

function myplot(graph)
{
 var mode = '';
 var bwidth = $("div.graph[graph='"+graph+"']").attr("width");
 if(bwidth == 'hour') { bwidth = 60*60*1000; }
 else if(bwidth == 'day') { bwidth = 60*60*24*1000; }
 else if(bwidth == 'week') { bwidth = 60*60*24*7*1000; }
 else if(bwidth == 'month') { bwidth = 60*60*24*30*1000; }
 var format = $("div.graph[graph='"+graph+"']").attr("format");
 if(format == undefined) { format = ''; } else { mode = 'time'; }
 var bars = '';
 if($("div.graph[graph='"+graph+"']").attr("type") == 'bars') { bars = true; }

 var gdata = new Array();
 for(var j = 0; j < gxml[graph].dataset.length; j++) {
  if($("input.legend[type='checkbox'][id='legend-"+gxml[graph].dataset[j].title+"']").attr("checked") != undefined) {
   var gjson = new Array();
   for(var i = 0; i < gxml[graph].dataset[j].data.length; i++) {
    if(mode == 'time') { gjson[i] = [Date.parse(gxml[graph].dataset[j].data[i].x),gxml[graph].dataset[j].data[i].y];}
    else { gjson[i] = [gxml[graph].dataset[j].data[i].x,gxml[graph].dataset[j].data[i].y]; }
   }
   gdata.push({label: gxml[graph].dataset[j].title, data: gjson, color: "#"+colors[j]});
  }
 }
 //console.log(gdata);

 $.plot($("div.graph[graph='"+graph+"']"),gdata,{
  xaxis: {
   mode: mode,
   timeformat: format,
  },
  yaxis: {
   tickFormatter: mega,
  },
  legend: {
   show: false,
   backgroundOpacity: 1,
  },
  bars: {
   barWidth: bwidth,
   show: bars,
   fill: bars,
  },
  grid: {
   hoverable: true,
  },
 });
 $("div.graph[graph='"+graph+"']").removeClass("waiting");
 $("div.graphlegend[graph='"+graph+"']").show();
}

$(document).ready(function() {
 plotgraphs();
});