From AAISP Support Site
Revision as of 17:16, 12 January 2015 by AA-Andrew (talk | contribs)
Jump to navigation Jump to search

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.


<!DOCTYPE html>
  <head lang='en'>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script src='chaosgraphs.js'></script>
    <form id='login'>
      <input type='text' name='username' placeholder='username' autofocus />
      <input type='password' name='password' placeholder='password' />
      <input type='submit' value='Login' />
    <hr />
    <div id='results'></div>

Javascript (chaosgraphs.js), you'll also need jquery:

//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
    type: "POST",
    url: "",
    xhrFields: { withCredentials: true },
    contentType: 'application/json',
    data: JSON.stringify({username:username,password:password}),
    success: function(data) {
      var chaos = data;
      var html = "";
      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"; }
      //Put the results into a div

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