Difference between revisions of "CHAOS"

From AAISP Support Site
Jump to: navigation, search
[unchecked revision][unchecked revision]
(Created page with "=Getting CQM Graphs= <source> <!DOCTYPE html> <head lang='en'> <title>Graphs</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script src='chaosgra...")
 
m (Getting CQM Graphs)
Line 1: Line 1:
 
=Getting CQM Graphs=
 
=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.
 +
 +
HTML:
 
<source>  
 
<source>  
 
<!DOCTYPE html>
 
<!DOCTYPE html>
Line 23: Line 28:
 
</html>
 
</html>
  
 +
</source>
 +
 +
Javascript:
 +
 +
<source>
 +
 +
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();
 +
});
 
</source>
 
</source>

Revision as of 16:08, 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.

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();
});