CHAOS: Difference between revisions

This is a quick example of getting cqm graphs from CHAOS.

In short, the Info command is used to get the graph URLs.

HTML:

</source>

Javascript:

<source>

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();

});