|
'''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.
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>
| 