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