CHAOS: Difference between revisions
Content deleted Content added
mNo edit summary |
|||
| (31 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
'''CHAOS''' is our API - it's still work in progress, and further features will be added. |
|||
=Getting CQM Graphs= |
|||
==CHAOS Version 1== |
|||
This is a quick example of getting cqm graphs from CHAOS. |
|||
'''Disabled''' |
|||
In short, the Info command is used to get the graph URLs. The HTML provides a form to enter the credentials |
|||
Version 1 is no longer available for use. Use version 2 instead. |
|||
HTML: |
|||
<source> |
|||
<!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> |
|||
==CHAOS Version 2.x== |
|||
<form id='login'> |
|||
<input type='text' name='username' placeholder='username' autofocus /> |
|||
<input type='password' name='password' placeholder='password' /> |
|||
<input type='submit' value='Login' /> |
|||
</form> |
|||
CHAOS is an application interface (API) for machine to machine interaction with our control and ordering systems. It provides a means to perform the following key operations:- |
|||
<hr /> |
|||
*Access information about an existing service, eg your remaining quota |
|||
*Adjust settings on an existing service |
|||
*Obtain usage data relating to an existing service |
|||
*Obtain sync rates of a DSL line |
|||
*Obtain VoIP call rate card |
|||
*Order a cease of an existing service |
|||
*Order a change to an existing service |
|||
*Check availability of new services |
|||
*Order a new service, including creating a new account |
|||
*etc. |
|||
The control systems cover a wide range of services, including broadband, ethernet, telephony, domains, email, mobile SIMs, and so on. |
|||
<div id='results'></div> |
|||
Whilst CHAOS may initially not provide access to all of these services, it is intended to be a general platform that can be extended over time to provide a comprehensive machine to machine interface to all of our services. |
|||
</body> |
|||
</html> |
|||
===Further Information=== |
|||
</source> |
|||
Manual: http://aa.net.uk/pdf/CHAOS2.pdf |
|||
==Uses== |
|||
Javascript: |
|||
Here are some projects that are using the CHAOS API: |
|||
*'''Munin Plugin by Nat Morris''' |
|||
**[https://github.com/natm/munin-plugins-aaisp Code on Github], [https://munin.hw.esgob.com/broadband-day.html Example] |
|||
**Just need to provide one account & password, it will automatically graph multiple lines and produce combined graphs etc. |
|||
*'''MQTT Service by Nat Morris''' |
|||
**[https://github.com/natm/aaisp-to-mqtt Code on Github] |
|||
** Publish circuit statistics to an [https://en.wikipedia.org/wiki/MQTT MQTT] broker, makes it very easy to integrate with home automation projects such as [https://home-assistant.io/ Home Assistant] and [http://www.openhab.org/ openHAB]. |
|||
<source> |
|||
[[Category:Control Pages]] |
|||
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> |
|||