Difference between revisions of "CHAOS"

From AAISP Support Site
Jump to: navigation, search
[unchecked revision][unchecked revision]
m
m
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. The HTML provides a form to enter the credentials  
+
In short, the Info command is used to get the graph URLs. The HTML provides a form to enter the credentials or you can edit the javascript to hardcode these.
  
 
HTML:
 
HTML:
 
<source>  
 
<source>  
 
<!DOCTYPE html>
 
<!DOCTYPE html>
<head lang='en'>
+
  <head lang='en'>
<title>Graphs</title>
+
    <title>Graphs</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
+
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script src='chaosgraphs.js'></script>
+
    <script src='chaosgraphs.js'></script>
</head>
+
  </head>
<body>
+
  <body>
 
+
    <form id='login'>
<form id='login'>
+
      <input type='text' name='username' placeholder='username' autofocus />
<input type='text' name='username' placeholder='username' autofocus />
+
      <input type='password' name='password' placeholder='password' />
<input type='password' name='password' placeholder='password' />
+
      <input type='submit' value='Login' />
<input type='submit' value='Login' />
+
    </form>
</form>
+
    <hr />
 
+
    <div id='results'></div>
<hr />
+
  </body>
 
 
<div id='results'></div>
 
 
 
</body>
 
 
</html>
 
</html>
 
 
</source>
 
</source>
  
Line 33: Line 28:
  
 
<source>
 
<source>
 
+
//Function to get service data from chaos using the "info" command
var gxml = new Array(); //Xml for plotting graphs
+
function getgraphs(username,password)
 
 
//Go through each graph div and plot it's graph
 
function plotgraphs()
 
 
{
 
{
$("div.graph").each(function() {
+
  $("#results").html("<p><img src='images/loading-small.gif' alt='Loading' /></p>"); //Show a loading image while wai
  var graph = $(this).attr("graph");
+
ting for chaos
   var url = $(this).attr("url");
+
   if(!username) { var username = $("input[type='text'][name='username']").val(); }
  var units = $(this).attr("units");
+
   if(!password) { var password = $("input[type='password'][name='password']").val(); }
  var pwidth = $(this).parent().width();
+
  //AJAX request for "info" command
   $(this).width(pwidth-300).addClass("waiting");
+
   $.ajax({
  $("div.graphlegend[graph='"+graph+"']").hide();
+
    type: "POST",
   $.ajax({url: url, dataType: "xml", complete: function(data) {
+
    url: "https://chaos.aa.net.uk/info",
  gxml[graph] = $.xml2json(data.responseXML,true);
+
    xhrFields: { withCredentials: true },
  var html = "";
+
    contentType: 'application/json',
  for(var j = 0; j < gxml[graph].dataset.length; j++) {
+
    data: JSON.stringify({username:username,password:password}),
    html+="<div class='legenditem' style='border-left: 5px solid #"+colors[j]+";'><label for='legend-"+gxml[graph].d;
+
    success: function(data) {
  }
+
      var chaos = data;
 
+
      var html = "";
  //Create legend
+
      console.log(chaos);
  $("div.graphlegend[graph='"+graph+"']").html(html);
+
      if(chaos.error != undefined) {
 
+
        //If there is an error display it
  //Plot each graph
+
        html+="<p class='error'>"+chaos.error+"</p>";
  myplot(graph);
+
      }
 
+
      else {
  //Display precise data on hover
+
        //If there is no error, loop through the response and create graphs
  $("div.graph[graph='"+graph+"']").bind("plothover", function(event, pos, item) {
+
        for(var i = 0; i < chaos.login.length; i++) {
    $("div.datapoint").remove();
+
          if(chaos.login[i].broadband_count != 0) {
    if(item) {
+
            for(var j = 0; j < chaos.login[i].broadband.length; j++) {
    var html = "<div class='datapoint' style='top: 20px; right: 50px;'>";
+
              var bb = chaos.login[i].broadband[j];
    if(units == 'B' || units == 'b') { html+=mega(item.datapoint[1])+units; }
+
              html+=bb.circuit+"<br />";
    else if(units != undefined) { html+=item.datapoint[1]+units; }
+
              html+="<img src='"+bb.cqm_png.replace(/http:/g,"https:")+"' alt='CQM graph "+j+"' /><hr />";
    else { html+=item.datapoint[1]; }
+
            }
    html+="</div>";
+
          }
    $("div.graph[graph='"+graph+"']").append(html);
+
          else { html+="No lines"; }
 +
        }
 +
      }
 +
      $("#results").html(html);
 +
      //Put the results into a div
 
     }
 
     }
  });
+
   });
 
 
  //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() {
 
$(document).ready(function() {
plotgraphs();
+
  //Run the getgraphs() function when the form is submitted
 +
  $("#login").submit(function(e) {
 +
    e.preventDefault();
 +
    getgraphs();
 +
    //Or you could run getgraphs with a static username and password e.g.
 +
    //getgraphs('myusername','mypassword');
 +
  });
 
});
 
});
 
</source>
 
</source>

Revision as of 16:13, 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 or you can edit the javascript to hardcode these.

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:

//Function to get service data from chaos using the "info" command
function getgraphs(username,password)
{
  $("#results").html("<p><img src='images/loading-small.gif' alt='Loading' /></p>"); //Show a loading image while wai
ting for chaos
  if(!username) { var username = $("input[type='text'][name='username']").val(); }
  if(!password) { var password = $("input[type='password'][name='password']").val(); }
  //AJAX request for "info" command
  $.ajax({
    type: "POST",
    url: "https://chaos.aa.net.uk/info",
    xhrFields: { withCredentials: true },
    contentType: 'application/json',
    data: JSON.stringify({username:username,password:password}),
    success: function(data) {
      var chaos = data;
      var html = "";
      console.log(chaos);
      if(chaos.error != undefined) {
        //If there is an error display it
        html+="<p class='error'>"+chaos.error+"</p>";
      }
      else {
        //If there is no error, loop through the response and create graphs
        for(var i = 0; i < chaos.login.length; i++) {
          if(chaos.login[i].broadband_count != 0) {
            for(var j = 0; j < chaos.login[i].broadband.length; j++) {
              var bb = chaos.login[i].broadband[j];
              html+=bb.circuit+"<br />";
              html+="<img src='"+bb.cqm_png.replace(/http:/g,"https:")+"' alt='CQM graph "+j+"' /><hr />";
            }
          }
          else { html+="No lines"; }
        }
      }
      $("#results").html(html);
      //Put the results into a div
    }
  });
}

$(document).ready(function() {
  //Run the getgraphs() function when the form is submitted
  $("#login").submit(function(e) {
    e.preventDefault();
    getgraphs();
    //Or you could run getgraphs with a static username and password e.g.
    //getgraphs('myusername','mypassword');
  });
});