2333 lines
65 KiB
JavaScript
2333 lines
65 KiB
JavaScript
/*
|
|
|
|
|
|
*/
|
|
|
|
function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, water_mark, separator, legend_position, height, colors, hide_labels) {
|
|
var labels = labels.split(separator);
|
|
var data = values.split(separator);
|
|
if (colors != '') {
|
|
colors = colors.split(separator);
|
|
}
|
|
|
|
var pieRadius = 0.9;
|
|
|
|
var color = null;
|
|
for (var i = 0; i < nseries; i++) {
|
|
if (colors != '') {
|
|
color = colors[i];
|
|
}
|
|
|
|
data[i] = { label: labels[i], data: parseFloat(data[i]), color: color}
|
|
}
|
|
|
|
var label_conf;
|
|
|
|
if (width < 400 || hide_labels) {
|
|
label_conf = {
|
|
show: false
|
|
};
|
|
}
|
|
else {
|
|
label_conf = {
|
|
show: true,
|
|
radius: pieRadius,
|
|
formatter: function(label, series) {
|
|
return '<div style="font-size:' + font_size + 'pt;' +
|
|
'text-align:center;padding:2px;color:white;">' +
|
|
label + '<br/>' + series.percent.toFixed(2) + '%</div>';
|
|
},
|
|
background: {
|
|
opacity: 0.5,
|
|
color: ''
|
|
}
|
|
};
|
|
}
|
|
|
|
var show_legend = true;
|
|
if (legend_position == 'hidden') {
|
|
show_legend = false;
|
|
}
|
|
|
|
var conf_pie = {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
radius: pieRadius,
|
|
//offset: {top: -100},
|
|
label: label_conf,
|
|
//$label_str
|
|
}
|
|
},
|
|
legend: {
|
|
show: show_legend
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true
|
|
}
|
|
};
|
|
|
|
if (width < 400) {
|
|
conf_pie.legend.labelFormatter = function(label, series) {
|
|
return label + " (" + series.percent.toFixed(2) + "%)";
|
|
}
|
|
}
|
|
|
|
switch (legend_position) {
|
|
case 'bottom':
|
|
conf_pie.legend.position = "se";
|
|
break;
|
|
case 'right':
|
|
case 'inner':
|
|
conf_pie.legend.container = $('#'+graph_id+"_legend");
|
|
default:
|
|
//TODO FOR TOP OR LEFT OR RIGHT
|
|
break;
|
|
}
|
|
|
|
var plot = $.plot($('#'+graph_id), data, conf_pie);
|
|
|
|
var legends = $('#'+graph_id+' .legendLabel');
|
|
legends.css('font-size', font_size+'pt');
|
|
|
|
// Events
|
|
$('#' + graph_id).bind('plothover', pieHover);
|
|
$('#' + graph_id).bind('plotclick', pieClick);
|
|
$('#' + graph_id).bind('mouseout',resetInteractivity);
|
|
$('#' + graph_id).css('margin-left', 'auto');
|
|
$('#' + graph_id).css('margin-right', 'auto');
|
|
|
|
function pieHover(event, pos, obj) {
|
|
if (!obj) return;
|
|
|
|
index = obj.seriesIndex;
|
|
legends.css('color', '#3F3F3D');
|
|
legends.eq(index).css('color', '');
|
|
}
|
|
|
|
// Reset styles
|
|
function resetInteractivity() {
|
|
legends.css('color', '#3F3F3D');
|
|
}
|
|
|
|
if (water_mark) {
|
|
set_watermark(graph_id, plot,
|
|
$('#watermark_image_' + graph_id).attr('src'));
|
|
}
|
|
}
|
|
|
|
function pandoraFlotPieCustom(graph_id, values, labels, width,
|
|
font_size, font, water_mark, separator, legend_position, height,
|
|
colors,legend,background_color) {
|
|
|
|
font = font.split("/").pop().split(".").shift();
|
|
var labels = labels.split(separator);
|
|
var legend = legend.split(separator);
|
|
var data = values.split(separator);
|
|
var no_data = 0;
|
|
if (colors != '') {
|
|
colors = colors.split(separator);
|
|
}
|
|
var colors_data = ['#FC4444','#FFA631','#FAD403','#5BB6E5','#F2919D','#80BA27'];
|
|
var color = null;
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (colors != '') {
|
|
color = colors[i];
|
|
}
|
|
var datos = data[i];
|
|
data[i] = { label: labels[i], data: parseFloat(data[i]), color: color };
|
|
if (!datos)
|
|
no_data++;
|
|
|
|
}
|
|
|
|
var label_conf;
|
|
var show_legend = true;
|
|
|
|
if((width <= 450)) {
|
|
show_legend = false;
|
|
label_conf = {
|
|
show: false
|
|
};
|
|
}
|
|
else {
|
|
label_conf = {
|
|
show: true,
|
|
radius: 0.75,
|
|
formatter: function(label, series) {
|
|
return '<div style="font-size:' + font_size + 'pt;' +
|
|
'text-align:center;padding:2px;color:white;">' +
|
|
series.percent.toFixed(2) + '%</div>';
|
|
},
|
|
background: {
|
|
opacity: 0.5,
|
|
color: ''
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
var conf_pie = {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
radius: 3/4,
|
|
innerRadius: 0.4
|
|
//label: label_conf
|
|
}
|
|
},
|
|
legend: {
|
|
show: show_legend,
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true
|
|
}
|
|
};
|
|
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
|
|
conf_pie.series.pie.label = {show: false};
|
|
}
|
|
|
|
var plot = $.plot($('#'+graph_id), data, conf_pie);
|
|
if (no_data == data.length) {
|
|
$('#'+graph_id+' .overlay').remove();
|
|
$('#'+graph_id+' .base').remove();
|
|
$('#'+graph_id).prepend("<img style='width:50%;' src='images/no_data_toshow.png' />");
|
|
|
|
}
|
|
var legends = $('#'+graph_id+' .legendLabel');
|
|
var j = 0;
|
|
legends.each(function () {
|
|
//$(this).css('width', $(this).width());
|
|
$(this).css('font-size', font_size+'pt');
|
|
$(this).removeClass("legendLabel");
|
|
$(this).addClass(font);
|
|
$(this).text(legend[j]);
|
|
j++;
|
|
});
|
|
|
|
if ($('input[name="custom_graph"]').val()) {
|
|
$('.legend>div').css('right',($('.legend>div').height()*-1));
|
|
$('.legend>table').css('right',($('.legend>div').height()*-1));
|
|
}
|
|
//$('.legend>table').css('border',"1px solid #E2E2E2");
|
|
|
|
if(background_color == 'transparent') {
|
|
$('.legend>table').css('background-color',"");
|
|
$('.legend>div').css('background-color',"");
|
|
$('.legend>table').css('color',"#aaa");
|
|
} else if (background_color == 'white') {
|
|
$('.legend>table').css('background-color',"white");
|
|
$('.legend>table').css('color',"black");
|
|
} else if (background_color == 'black') {
|
|
$('.legend>table').css('background-color',"black");
|
|
$('.legend>table').css('color',"#aaa");
|
|
}
|
|
|
|
$('.legend').hover(function() {
|
|
return false;
|
|
});
|
|
|
|
var pielegends = $('#'+graph_id+' .pieLabelBackground');
|
|
pielegends.each(function () {
|
|
$(this).css('transform', "rotate(-35deg)").css('color', 'black');
|
|
});
|
|
var labelpielegends = $('#'+graph_id+' .pieLabel');
|
|
labelpielegends.each(function () {
|
|
$(this).css('transform', "rotate(-35deg)").css('color', 'black');
|
|
});
|
|
|
|
// Events
|
|
$('#' + graph_id).bind('plothover', pieHover);
|
|
$('#' + graph_id).bind('plotclick', Clickpie);
|
|
$('#' + graph_id).bind('mouseout', resetInteractivity);
|
|
$('#' + graph_id).css('margin-left', 'auto');
|
|
$('#' + graph_id).css('margin-right', 'auto');
|
|
|
|
function pieHover(event, pos, obj) {
|
|
if (!obj) return;
|
|
|
|
index = obj.seriesIndex;
|
|
legends.css('color', '#3F3F3D');
|
|
legends.eq(index).css('color', '');
|
|
}
|
|
|
|
function Clickpie(event, pos, obj) {
|
|
if (!obj) return;
|
|
percent = parseFloat(obj.series.percent).toFixed(2);
|
|
valor = parseFloat(obj.series.data[0][1]);
|
|
|
|
if (valor > 1000000){
|
|
value = Math.round((valor / 1000000)*100)/100;
|
|
value = value + "M";
|
|
}else{ if (valor > 1000) {
|
|
value = Math.round((valor / 1000)*100)/100;
|
|
value = value + "K";
|
|
}
|
|
else
|
|
value = valor;
|
|
}
|
|
|
|
alert(''+obj.series.label+': '+ value +' ('+percent+'%)');
|
|
}
|
|
|
|
// Reset styles
|
|
function resetInteractivity() {
|
|
legends.each(function () {
|
|
// fix the widths so they don't jump around
|
|
$(this).css('color', '#3F3F3D');
|
|
});
|
|
}
|
|
|
|
if (water_mark) {
|
|
set_watermark(graph_id, plot,
|
|
$('#watermark_image_' + graph_id).attr('src'));
|
|
}
|
|
|
|
window.onresize = function(event) {
|
|
$.plot($('#' + graph_id), data, conf_pie);
|
|
if (no_data == data.length) {
|
|
$('#'+graph_id+' .overlay').remove();
|
|
$('#'+graph_id+' .base').remove();
|
|
$('#'+graph_id).prepend("<img style='width:50%;' src='images/no_data_toshow.png' />");
|
|
}
|
|
var legends = $('#'+graph_id+' .legendLabel');
|
|
var j = 0;
|
|
legends.each(function () {
|
|
//$(this).css('width', $(this).width());
|
|
$(this).css('font-size', font_size+'pt');
|
|
$(this).removeClass("legendLabel");
|
|
$(this).addClass(font);
|
|
$(this).text(legend[j]);
|
|
j++;
|
|
});
|
|
|
|
if ($('input[name="custom_graph"]').val()) {
|
|
$('.legend>div').css('right',($('.legend>div').height()*-1));
|
|
$('.legend>table').css('right',($('.legend>div').height()*-1));
|
|
}
|
|
//$('.legend>table').css('border',"1px solid #E2E2E2");
|
|
$('.legend>table').css('background-color',"transparent");
|
|
|
|
|
|
var pielegends = $('#'+graph_id+' .pieLabelBackground');
|
|
pielegends.each(function () {
|
|
$(this).css('transform', "rotate(-35deg)").css('color', 'black');
|
|
});
|
|
var labelpielegends = $('#'+graph_id+' .pieLabel');
|
|
labelpielegends.each(function () {
|
|
$(this).css('transform', "rotate(-35deg)").css('color', 'black');
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
function pandoraFlotHBars(graph_id, values, labels, water_mark,
|
|
maxvalue, water_mark, separator, separator2, font, font_size, background_color, tick_color, min, max) {
|
|
|
|
var colors_data = ['#FC4444','#FFA631','#FAD403','#5BB6E5','#F2919D','#80BA27'];
|
|
values = values.split(separator2);
|
|
font = font.split("/").pop().split(".").shift();
|
|
var datas = new Array();
|
|
for (i = 0; i < values.length; i++) {
|
|
var serie = values[i].split(separator);
|
|
|
|
|
|
var aux = new Array();
|
|
for (j = 0; j < serie.length; j++) {
|
|
var aux2 = parseFloat(serie[j]);
|
|
aux.push([aux2, j]);
|
|
datas.push( {
|
|
data: [[aux2, j]],
|
|
color: colors_data[j]
|
|
});
|
|
};
|
|
}
|
|
|
|
var labels_total=new Array();
|
|
labels = labels.split(separator);
|
|
i = 0;
|
|
for (i = 0; i < labels.length; i++) {
|
|
labels_total.push([i, labels[i]]);
|
|
}
|
|
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
|
var k=0;
|
|
var options = {
|
|
series: {
|
|
bars: {
|
|
show: true,
|
|
barWidth: 0.75,
|
|
align: "center",
|
|
lineWidth: 1,
|
|
fill: 1,
|
|
horizontal: true,
|
|
}
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 1,
|
|
tickColor: tick_color,
|
|
backgroundColor: { colors: [background_color, background_color] }
|
|
},
|
|
xaxis: {
|
|
color: tick_color,
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: font_size,
|
|
axisLabelFontFamily: font+'Font',
|
|
tickFormatter: xFormatter,
|
|
},
|
|
yaxis: {
|
|
color: tick_color,
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: font_size,
|
|
axisLabelFontFamily: font+'Font',
|
|
ticks: yFormatter,
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
|
|
// Fixed to avoid the graphs with all 0 datas
|
|
// the X axis show negative part instead to
|
|
// show the axis only the positive part.
|
|
if (maxvalue == 0) {
|
|
options['yaxis']['min'] = 0;
|
|
// Fixed the values with a lot of decimals in the situation
|
|
// with all 0 values.
|
|
options['yaxis']['tickDecimals'] = 0;
|
|
}
|
|
|
|
if (max) {
|
|
options['xaxis']['max'] = max;
|
|
}
|
|
if (min) {
|
|
options['xaxis']['min'] = min;
|
|
}
|
|
|
|
var plot = $.plot($('#' + graph_id), datas, options );
|
|
|
|
$('#' + graph_id).HUseTooltip();
|
|
$('#' + graph_id).css("margin-left","auto");
|
|
$('#' + graph_id).css("margin-right","auto");
|
|
//~ $('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true });
|
|
|
|
function yFormatter(v, axis) {
|
|
format = new Array();
|
|
for (i = 0; i < labels_total.length; i++) {
|
|
var label = labels_total[i][1];
|
|
// var shortLabel = reduceText(label, 25);
|
|
var title = '';
|
|
// if (label !== shortLabel) {
|
|
title = label;
|
|
// label = shortLabel;
|
|
// }
|
|
|
|
if(label.length > 30){
|
|
if(label.indexOf(" - ")){
|
|
var label_temp = label.split(" - ");
|
|
}
|
|
else if(label.indexOf(" ")){
|
|
var label_temp = label.split(" ");
|
|
}
|
|
else{
|
|
var label_temp = '';
|
|
label_temp[0] = label.substring(0, (label.length/2));
|
|
label_temp[1] = label.substring((label.length/2));
|
|
}
|
|
label = reduceText(label_temp[0], 20)+"<br>"+reduceText(label_temp[1], 20);
|
|
}
|
|
|
|
format.push([i,'<div style="font-size:'+font_size+'pt !important; word-break:keep-all; max-width: 150px;margin-right:20px;" title="'+title+'" class="'+font+'">'
|
|
+ label
|
|
+ '</div>']);
|
|
}
|
|
return format;
|
|
}
|
|
|
|
function xFormatter(v, axis) {
|
|
label = parseFloat(v);
|
|
text = label.toLocaleString();
|
|
if ( label >= 1000000)
|
|
text = text.substring(0,4) + "M";
|
|
else if (label >= 100000)
|
|
text = text.substring(0,3) + "K";
|
|
else if (label >= 1000)
|
|
text = text.substring(0,2) + "K";
|
|
|
|
return '<div style="font-size:'+font_size+'pt !important;">'+text+'</div>';
|
|
}
|
|
|
|
if (water_mark) {
|
|
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
|
|
}
|
|
}
|
|
|
|
var previousPoint = null, previousLabel = null;
|
|
|
|
$.fn.HUseTooltip = function () {
|
|
$(this).bind("plothover", function (event, pos, item) {
|
|
if (item) {
|
|
if ((previousLabel != item.series.label) || (previousPoint != item.seriesIndex)) {
|
|
previousPoint = item.seriesIndex;
|
|
previousLabel = item.series.label;
|
|
$("#tooltip").remove();
|
|
|
|
var x = item.datapoint[0];
|
|
var y = item.datapoint[1];
|
|
|
|
var color = item.series.color;
|
|
showTooltip(pos.pageX,
|
|
pos.pageY,
|
|
color,
|
|
"<strong>" + x + "</strong>");
|
|
}
|
|
} else {
|
|
$("#tooltip").remove();
|
|
previousPoint = null;
|
|
}
|
|
});
|
|
};
|
|
$.fn.VUseTooltip = function () {
|
|
$(this).bind("plothover", function (event, pos, item) {
|
|
if (item) {
|
|
if ((previousLabel != item.series.label) || (previousPoint != item.seriesIndex)) {
|
|
previousPoint = item.seriesIndex;
|
|
previousLabel = item.series.label;
|
|
|
|
$("#tooltip").remove();
|
|
|
|
var x = item.datapoint[0];
|
|
var y = item.datapoint[1];
|
|
|
|
var color = item.series.color;
|
|
showTooltip(pos.pageX,
|
|
pos.pageY,
|
|
color,
|
|
"<strong>" + y + "</strong>");
|
|
}
|
|
} else {
|
|
$("#tooltip").remove();
|
|
previousPoint = null;
|
|
}
|
|
});
|
|
};
|
|
|
|
function showTooltip(x, y, color, contents) {
|
|
$('<div id="tooltip">' + contents + '</div>').css({
|
|
position: 'absolute',
|
|
display: 'none',
|
|
top: y,
|
|
left: x,
|
|
border: '2px solid ' + color,
|
|
padding: '3px',
|
|
'font-size': '9px',
|
|
'border-radius': '5px',
|
|
'background-color': '#fff',
|
|
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
|
|
opacity: 0.9
|
|
}).appendTo("body").fadeIn(200);
|
|
}
|
|
|
|
function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors, water_mark, maxvalue, water_mark, separator, separator2, font, font_size , from_ux, from_wux, background_color, tick_color) {
|
|
values = values.split(separator2);
|
|
legend = legend.split(separator);
|
|
font = font.split("/").pop().split(".").shift();
|
|
labels_long = labels_long.length > 0 ? labels_long.split(separator) : 0;
|
|
colors = colors.length > 0 ? colors.split(separator) : [];
|
|
|
|
var colors_data = colors.length > 0
|
|
? colors
|
|
: ['#FFA631','#FC4444','#FAD403','#5BB6E5','#F2919D','#80BA27'];
|
|
var datas = new Array();
|
|
|
|
for (i = 0; i < values.length; i++) {
|
|
var serie = values[i].split(separator);
|
|
|
|
var aux = new Array();
|
|
for (j = 0; j < serie.length; j++) {
|
|
var aux2 = parseFloat(serie[j]);
|
|
aux.push([aux2, j]);
|
|
if (from_ux) {
|
|
datas.push( {
|
|
data: [[j, aux2]],
|
|
color: colors_data[j]
|
|
});
|
|
}
|
|
else {
|
|
datas.push( {
|
|
data: [[j, aux2]],
|
|
color: colors_data[0]
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
var labels_total=new Array();
|
|
labels = labels.split(separator);
|
|
i = 0;
|
|
for (i = 0; i < labels.length; i++) {
|
|
labels_total.push([i, labels[i]]);
|
|
}
|
|
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
|
|
|
var options = {
|
|
series: {
|
|
bars: {
|
|
show: true,
|
|
lineWidth: 1,
|
|
fill: 1,
|
|
align: "center",
|
|
barWidth: 1
|
|
}
|
|
},
|
|
xaxis: {
|
|
color:tick_color,
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: font_size,
|
|
axisLabelFontFamily: font+'Font',
|
|
axisLabelPadding: 0,
|
|
ticks: xFormatter,
|
|
labelWidth: 130,
|
|
labelHeight: 50,
|
|
},
|
|
yaxis: {
|
|
color:tick_color,
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: font_size,
|
|
axisLabelFontFamily: font+'Font',
|
|
axisLabelPadding: 100,
|
|
autoscaleMargin: 0.02,
|
|
tickFormatter: function (v, axis) {
|
|
label = parseFloat(v);
|
|
text = label.toLocaleString();
|
|
if ( label >= 1000000)
|
|
text = text.substring(0,4) + "M";
|
|
else if (label >= 100000)
|
|
text = text.substring(0,3) + "K";
|
|
else if (label >= 1000)
|
|
text = text.substring(0,2) + "K";
|
|
|
|
return '<div style="font-size:'+font_size+'pt !important;">'+text+'</div>';
|
|
}
|
|
},
|
|
legend: {
|
|
noColumns: 100,
|
|
labelBoxBorderColor: "",
|
|
margin: 100,
|
|
container: true,
|
|
sorted: false
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth: 1,
|
|
tickColor: tick_color,
|
|
backgroundColor: { colors: [background_color, background_color] }
|
|
}
|
|
};
|
|
|
|
if(from_wux){
|
|
options.series.bars.barWidth = 0.5;
|
|
options.grid.aboveData = true;
|
|
options.grid.borderWidth = 0;
|
|
options.grid.markings = [ { xaxis: { from: -0.25, to: -0.25 }, color: "#000" },
|
|
{ yaxis: { from: 0, to: 0 }, color: "#000" }];
|
|
options.grid.markingsLineWidth = 0.3;
|
|
|
|
options.xaxis.tickLength = 0;
|
|
options.yaxis.tickLength = 0;
|
|
}
|
|
|
|
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
|
|
options.xaxis.labelWidth = 100;
|
|
|
|
var plot = $.plot($('#'+graph_id),datas, options );
|
|
$('#' + graph_id).VUseTooltip();
|
|
$('#' + graph_id).css("margin-left","auto");
|
|
$('#' + graph_id).css("margin-right","auto");
|
|
|
|
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
|
|
$('#'+graph_id+' .xAxis .tickLabel')
|
|
.find('div')
|
|
.css('top', '+0px')
|
|
.css('left', '-20px');
|
|
// Format functions
|
|
function xFormatter(v, axis) {
|
|
var format = new Array();
|
|
for (i = 0; i < labels_total.length; i++) {
|
|
var label = labels_total[i][1];
|
|
var shortLabel = reduceText(label, 28);
|
|
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
|
|
shortLabel = reduceText(label, 18);
|
|
var title = '';
|
|
if (label !== shortLabel) {
|
|
title = label;
|
|
label = shortLabel;
|
|
}
|
|
|
|
format.push([i,
|
|
'<div class="'+font+'" title="'+title+'" style="word-break: normal; transform: rotate(-45deg); position:relative; top:+30px; left:0px; max-width: 100px;font-size:'+font_size+'pt !important;">'
|
|
+ label
|
|
+ '</div>']);
|
|
}
|
|
return format;
|
|
}
|
|
|
|
function yFormatter(v, axis) {
|
|
return '<div class="'+font+'" style="font-size:'+font_size+'pt !important;">'+v+'</div>';
|
|
}
|
|
|
|
function lFormatter(v, axis) {
|
|
return '<div style="font-size:'+font_size+'pt !important;">'+v+'</div>';
|
|
}
|
|
|
|
if (water_mark) {
|
|
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
|
|
}
|
|
}
|
|
|
|
function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumulate_data, intervaltick, water_mark, maxvalue, separator, separator2, graph_javascript, id_agent, full_legend) {
|
|
values = values.split(separator2);
|
|
labels = labels.split(separator);
|
|
legend = legend.split(separator);
|
|
acumulate_data = acumulate_data.split(separator);
|
|
datacolor = datacolor.split(separator);
|
|
if (full_legend != false) {
|
|
full_legend = full_legend.split(separator);
|
|
}
|
|
|
|
// Check possible adapt_keys on classes
|
|
check_adaptions(graph_id);
|
|
|
|
var datas = new Array();
|
|
|
|
for (i=0;i<values.length;i++) {
|
|
var serie = values[i].split(separator);
|
|
var aux = new Array();
|
|
$.each(serie,function(i,v) {
|
|
aux.push([v, i]);
|
|
});
|
|
|
|
datas.push({
|
|
data: aux,
|
|
bars: { show: true, fill: true ,fillColor: datacolor[i] , horizontal: true, lineWidth:0, steps:false }
|
|
});
|
|
}
|
|
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
|
|
|
var regex = /visual_console/;
|
|
var match = regex.exec(window.location.href);
|
|
|
|
if (match == null) {
|
|
var options = {
|
|
series: {
|
|
stack: stack,
|
|
shadowSize: 0.1,
|
|
color: '#ddd'
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderWidth:1,
|
|
borderColor: '',
|
|
tickColor: '#fff'
|
|
},
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
color: '',
|
|
tickSize: intervaltick,
|
|
tickLength: 0
|
|
} ],
|
|
yaxes: [ {
|
|
show: false,
|
|
tickLength: 0
|
|
}],
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
}
|
|
else {
|
|
var options = {
|
|
series: {
|
|
stack: stack,
|
|
shadowSize: 0.1,
|
|
color: '#ddd'
|
|
},
|
|
grid: {
|
|
hoverable: false,
|
|
clickable: false,
|
|
borderWidth:1,
|
|
borderColor: '',
|
|
tickColor: '#fff'
|
|
},
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
color: '',
|
|
tickSize: intervaltick,
|
|
tickLength: 0
|
|
} ],
|
|
yaxes: [ {
|
|
show: false,
|
|
tickLength: 0
|
|
}],
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
}
|
|
|
|
var plot = $.plot($('#'+graph_id), datas, options );
|
|
|
|
if (match == null) {
|
|
// Events
|
|
$('#'+graph_id).bind('plothover', function (event, pos, item) {
|
|
if (item) {
|
|
var from = legend[item.seriesIndex];
|
|
var to = legend[item.seriesIndex+1];
|
|
|
|
if (to == undefined) {
|
|
to = '>';
|
|
}
|
|
|
|
$('#extra_'+graph_id).text(from+'-'+to);
|
|
var extra_height = parseInt($('#extra_'+graph_id).css('height').split('px')[0]);
|
|
var extra_width = parseInt($('#extra_'+graph_id).css('width').split('px')[0]);
|
|
$('#extra_'+graph_id).css('left',pos.pageX-(extra_width/4)+'px');
|
|
//$('#extra_'+graph_id).css('top',plot.offset().top-extra_height-5+'px');
|
|
$('#extra_'+graph_id).show();
|
|
}
|
|
});
|
|
|
|
$('#'+graph_id).bind('plotclick', function(event, pos, item) {
|
|
if (item) {
|
|
//from time
|
|
var from = legend[item.seriesIndex];
|
|
//to time
|
|
var to = legend[item.seriesIndex+1];
|
|
//current date
|
|
var dateObj = new Date();
|
|
|
|
if (full_legend != "") {
|
|
newdate = full_legend[item.seriesIndex];
|
|
newdate2 = full_legend[item.seriesIndex+1];
|
|
}
|
|
else {
|
|
var month = dateObj.getUTCMonth() + 1; //months from 1-12
|
|
var day = dateObj.getUTCDate();
|
|
var year = dateObj.getUTCFullYear();
|
|
newdate = year + "/" + month + "/" + day;
|
|
}
|
|
|
|
if(!to){
|
|
to= '23:59';
|
|
}
|
|
|
|
if (full_legend != "") {
|
|
if (newdate2 == undefined) {
|
|
window.location='index.php?sec=eventos&sec2=operation/events/events&id_agent='+id_agent+'&date_from='+newdate+'&time_from='+from+'&status=-1';
|
|
}
|
|
else {
|
|
window.location='index.php?sec=eventos&sec2=operation/events/events&id_agent='+id_agent+'&date_from='+newdate+'&time_from='+from+'&date_to='+newdate2+'&time_to='+to+'&status=-1';
|
|
}
|
|
}
|
|
else {
|
|
window.location='index.php?sec=eventos&sec2=operation/events/events&id_agent='+id_agent+'&date_from='+newdate+'&time_from='+from+'&date_to='+newdate+'&time_to='+to+'&status=-1';
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#'+graph_id).bind('mouseout',resetInteractivity);
|
|
}
|
|
|
|
// Reset interactivity styles
|
|
function resetInteractivity() {
|
|
$('#extra_'+graph_id).hide();
|
|
}
|
|
|
|
// Format functions
|
|
function xFormatter(v, axis) {
|
|
for (i = 0; i < acumulate_data.length; i++) {
|
|
if (acumulate_data[i] == v) {
|
|
return '<span style=\'font-size: 6pt\'>' + legend[i] + '</span>';
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
|
|
colors, type, serie_types, water_mark, width, max_x, homeurl, unit,
|
|
font_size, font, menu, events, event_ids, legend_events, alerts,
|
|
alert_ids, legend_alerts, yellow_threshold, red_threshold,
|
|
force_integer, separator, separator2,
|
|
yellow_up, red_up, yellow_inverse, red_inverse,
|
|
series_suffix_str, dashboard, vconsole, xaxisname,background_color,legend_color,
|
|
short_data) {
|
|
|
|
var threshold = true;
|
|
var thresholded = false;
|
|
font = font.split("/").pop().split(".").shift();
|
|
|
|
values = values.split(separator2);
|
|
serie_types = serie_types.split(separator);
|
|
labels_long = labels_long.split(separator);
|
|
labels = labels.split(separator);
|
|
legend = legend.split(separator);
|
|
events = events.split(separator);
|
|
event_ids = event_ids.split(separator);
|
|
if (alerts.length != 0)
|
|
alerts = alerts.split(separator);
|
|
else
|
|
alerts = [];
|
|
alert_ids = alert_ids.split(separator);
|
|
colors = colors.split(separator);
|
|
|
|
var eventsz = new Array();
|
|
$.each(events,function(i,v) {
|
|
eventsz[event_ids[i]] = v;
|
|
});
|
|
|
|
var alertsz = new Array();
|
|
$.each(alerts,function(i,v) {
|
|
alertsz[alert_ids[i]] = v;
|
|
});
|
|
|
|
switch (type) {
|
|
case 'line_simple':
|
|
stacked = null;
|
|
filled = false;
|
|
break;
|
|
case 'line_stacked':
|
|
stacked = 'stack';
|
|
filled = false;
|
|
break;
|
|
case 'area_simple':
|
|
stacked = null;
|
|
filled = true;
|
|
break;
|
|
case 'area_stacked':
|
|
stacked = 'stack';
|
|
filled = true;
|
|
break;
|
|
}
|
|
|
|
var datas = new Array();
|
|
var data_base = new Array();
|
|
|
|
// Prepared to turn series with a checkbox
|
|
// var showed = new Array();
|
|
|
|
var min_check = 0;
|
|
for (i = 0; i < values.length; i++) {
|
|
var serie = values[i].split(separator);
|
|
var aux = new Array();
|
|
$.each(serie, function(i, v) {
|
|
if(v < 0){
|
|
if(min_check > parseFloat(v)){
|
|
min_check = v;
|
|
}
|
|
}
|
|
|
|
aux.push([i, v]);
|
|
});
|
|
|
|
switch (serie_types[i]) {
|
|
case 'area':
|
|
line_show = true;
|
|
points_show = false;
|
|
filled = true;
|
|
steps_chart = false;
|
|
break;
|
|
case 'line':
|
|
default:
|
|
line_show = true;
|
|
points_show = false;
|
|
filled = false;
|
|
steps_chart = false;
|
|
break;
|
|
case 'points':
|
|
line_show = false;
|
|
points_show = true;
|
|
filled = false;
|
|
steps_chart = false
|
|
break;
|
|
case 'unknown':
|
|
case 'boolean':
|
|
line_show = true;
|
|
points_show = false;
|
|
filled = true;
|
|
steps_chart = true;
|
|
break;
|
|
}
|
|
|
|
var serie_color;
|
|
if (colors[i] != '') {
|
|
serie_color = colors[i];
|
|
}
|
|
else {
|
|
serie_color = '#8c2';
|
|
}
|
|
|
|
var normalw = '#efe';
|
|
var warningw = '#ffe';
|
|
var criticalw = '#fee';
|
|
var normal = '#0f0';
|
|
var warning = '#ff0';
|
|
var critical = '#f00';
|
|
|
|
// setup background areas
|
|
//vnormal_max = vwarning_min - 1;
|
|
|
|
var markings = null;
|
|
|
|
// Fill the grid background with weak threshold colors
|
|
//~ markings = [
|
|
//~ { color: normalw, yaxis: { from: -1,to: vnormal_max } },
|
|
//~ { color: warningw, yaxis: { from: vwarning_min, to: vwarning_max } },
|
|
//~ { color: criticalw, yaxis: { from: vcritical_min } },
|
|
//~ { color: criticalw, yaxis: { to: -1 } }
|
|
//~ ];
|
|
|
|
var lineWidth = $('#hidden-line_width_graph').val() || 1;
|
|
|
|
// Data
|
|
data_base.push({
|
|
id: 'serie_' + i,
|
|
data: aux,
|
|
label: legend[i],
|
|
color: serie_color,
|
|
//threshold: [{ below: 80, color: "rgb(200, 20, 30)" } , { below: 65, color: "rgb(30, 200, 30)" }, { below: 50, color: "rgb(30, 200, 30)" }],
|
|
lines: {
|
|
show: line_show,
|
|
fill: filled,
|
|
fillColor: {
|
|
colors: [ { opacity: 0.5 }, { opacity: 1 } ]
|
|
},
|
|
lineWidth: lineWidth,
|
|
steps: steps_chart
|
|
},
|
|
points: { show: points_show }
|
|
});
|
|
|
|
// Prepared to turn series with a checkbox
|
|
// showed[i] = true;
|
|
}
|
|
|
|
if(min_check != 0){
|
|
min_check = min_check -5;
|
|
}
|
|
|
|
// If threshold and up are the same, that critical or warning is disabled
|
|
if (yellow_threshold == yellow_up) yellow_inverse = false;
|
|
if (red_threshold == red_up) red_inverse = false;
|
|
|
|
//Array with points to be painted
|
|
var threshold_data = new Array();
|
|
//Array with some interesting points
|
|
var extremes = new Array ();
|
|
|
|
yellow_threshold = parseFloat (yellow_threshold);
|
|
yellow_up = parseFloat (yellow_up);
|
|
red_threshold = parseFloat (red_threshold);
|
|
red_up = parseFloat (red_up);
|
|
var yellow_only_min = ((yellow_up == 0) && (yellow_threshold != 0));
|
|
red_only_min = ((red_up == 0) && (red_threshold != 0));
|
|
|
|
if (threshold) {
|
|
// Warning interval. Change extremes depends on critical interval
|
|
if (yellow_inverse && red_inverse) {
|
|
if (red_only_min && yellow_only_min) {
|
|
// C: |-------- |
|
|
// W: |········==== |
|
|
|
|
if (yellow_threshold > red_threshold) {
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = red_threshold;
|
|
extremes['warning_normal_fdown_2'] = yellow_threshold;
|
|
}
|
|
} else if (!red_only_min && yellow_only_min) {
|
|
// C: |-------- ------|
|
|
// W: |········===· |
|
|
|
|
if (yellow_threshold > red_up) {
|
|
yellow_threshold = red_up;
|
|
}
|
|
if (yellow_threshold > red_threshold) {
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = red_threshold;
|
|
extremes['warning_normal_fdown_2'] = yellow_threshold;
|
|
}
|
|
} else if (red_only_min && !yellow_only_min) {
|
|
// C: |------- |
|
|
// W: |·······==== ===|
|
|
if (red_threshold < yellow_threshold) {
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = red_threshold;
|
|
extremes['warning_normal_fdown_2'] = yellow_threshold;
|
|
}
|
|
|
|
if (yellow_up < red_threshold) {
|
|
yellow_up = red_threshold;
|
|
}
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_up',
|
|
data: [[max_x, yellow_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_up'] = yellow_up;
|
|
|
|
} else {
|
|
if (yellow_threshold > red_threshold) {
|
|
// C: |-------- ------|
|
|
// W: |········===· ···|
|
|
if (yellow_threshold > red_up) {
|
|
yellow_threshold = red_up;
|
|
}
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: yellow_threshold - red_threshold, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = red_threshold;
|
|
extremes['warning_normal_fdown_2'] = yellow_threshold;
|
|
}
|
|
if (yellow_up < red_up) {
|
|
// C: |-------- ---|
|
|
// W: |····· ·======···|
|
|
if (yellow_up < red_threshold) {
|
|
yellow_up = red_up;
|
|
}
|
|
threshold_data.push({
|
|
id: 'warning_normal_fup',
|
|
data: [[max_x, yellow_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: red_up - yellow_up, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fup_1'] = red_up;
|
|
extremes['warning_normal_fup_2'] = yellow_up;
|
|
}
|
|
// If warning is under critical completely do not paint anything yellow
|
|
// C: |-------- -----|
|
|
// W: |···· ···|
|
|
}
|
|
} else if (yellow_inverse && !red_inverse) {
|
|
if (red_only_min && yellow_only_min) {
|
|
// C: | -----|
|
|
// W: |============··· |
|
|
if (yellow_threshold > red_threshold) {
|
|
yellow_threshold = red_threshold;
|
|
}
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_down',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_down'] = yellow_threshold;
|
|
|
|
} else if (!red_only_min && yellow_only_min) {
|
|
// C: | ---- |
|
|
// W: |======····=== |
|
|
|
|
if (yellow_threshold > red_up) {
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, red_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: yellow_threshold - red_up, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = red_up;
|
|
extremes['warning_normal_fdown_2'] = yellow_threshold;
|
|
}
|
|
|
|
if (yellow_threshold > red_threshold) {
|
|
yellow_threshold = red_threshold;
|
|
}
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_down',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_down'] = yellow_threshold;
|
|
|
|
} else if (red_only_min && !yellow_only_min) {
|
|
if (yellow_threshold < red_threshold) {
|
|
// C: | -----|
|
|
// W: |======= ===·····|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_down',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_down'] = yellow_threshold;
|
|
|
|
if (red_threshold > yellow_up) {
|
|
threshold_data.push({
|
|
id: 'warning_normal_fup',
|
|
data: [[max_x, yellow_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: red_threshold - yellow_up, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fup_1'] = yellow_up;
|
|
extremes['warning_normal_fup_2'] = red_threshold;
|
|
}
|
|
} else {
|
|
// C: | ------------|
|
|
// W: |=====·· ········|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_down',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_down'] = red_threshold;
|
|
}
|
|
} else {
|
|
if (yellow_threshold > red_up) {
|
|
// C: | ----- |
|
|
// W: |====·····=== ===|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_down',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_down'] = red_threshold;
|
|
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, red_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: yellow_threshold - red_up, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = red_up;
|
|
extremes['warning_normal_fdown_2'] = yellow_threshold;
|
|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_up',
|
|
data: [[max_x, yellow_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_up'] = yellow_up;
|
|
} else if (red_threshold > yellow_up){
|
|
// C: | ----- |
|
|
// W: |=== ===·····==|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_down',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_down'] = yellow_threshold;
|
|
|
|
threshold_data.push({
|
|
id: 'warning_normal_fup',
|
|
data: [[max_x, yellow_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: red_threshold - yellow_up, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fup_1'] = yellow_up;
|
|
extremes['warning_normal_fup_2'] = red_threshold;
|
|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_up',
|
|
data: [[max_x, red_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_up'] = red_up;
|
|
} else {
|
|
// C: | -------- |
|
|
// W: |==· ···=======|
|
|
if (yellow_threshold > red_threshold) {
|
|
yellow_threshold = red_threshold;
|
|
}
|
|
if (yellow_up < red_up) {
|
|
yellow_up = red_up;
|
|
}
|
|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_down',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_down'] = yellow_threshold;
|
|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_up',
|
|
data: [[max_x, yellow_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_up'] = yellow_up;
|
|
}
|
|
}
|
|
} else if (!yellow_inverse && red_inverse) {
|
|
if (yellow_only_min && red_only_min) {
|
|
// C: |----- |
|
|
// W: | ··============|
|
|
if (yellow_threshold < red_threshold) {
|
|
yellow_threshold = red_threshold;
|
|
}
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_up',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_up'] = yellow_threshold;
|
|
|
|
} else if (!yellow_only_min && red_only_min) {
|
|
// C: |----- |
|
|
// W: | ··======== |
|
|
if (yellow_threshold < red_threshold) {
|
|
yellow_threshold = red_threshold;
|
|
}
|
|
if (yellow_up > red_threshold) {
|
|
threshold_data.push({
|
|
id: 'warning_normal',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_1'] = yellow_threshold;
|
|
extremes['warning_normal_2'] = yellow_up;
|
|
}
|
|
} else if (yellow_only_min && !red_only_min) {
|
|
// C: |----- ------|
|
|
// W: | ··======······|
|
|
if (yellow_threshold < red_threshold) {
|
|
yellow_threshold = red_threshold;
|
|
}
|
|
if (yellow_threshold < red_up) {
|
|
threshold_data.push({
|
|
id: 'warning_normal',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: (red_up - yellow_threshold), lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_1'] = yellow_threshold;
|
|
extremes['warning_normal_2'] = red_up;
|
|
}
|
|
// If warning is under critical completely do not paint anything yellow
|
|
// C: |-------- -----|
|
|
// W: | ···|
|
|
} else {
|
|
if (red_up > yellow_threshold && red_threshold < yellow_up) {
|
|
// C: |----- ------|
|
|
// W: | ··======· |
|
|
if (yellow_threshold < red_threshold) {
|
|
yellow_threshold = red_threshold;
|
|
}
|
|
if (yellow_up > red_up) {
|
|
yellow_up = red_up;
|
|
}
|
|
|
|
threshold_data.push({
|
|
id: 'warning_normal',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_1'] = yellow_threshold;
|
|
extremes['warning_normal_2'] = yellow_up;
|
|
}
|
|
}
|
|
}
|
|
// If warning is under critical completely do not paint anything yellow
|
|
// C: |-------- -----| or // C: |-------- -----|
|
|
// W: | ···· | // W: | ·· |
|
|
else {
|
|
if (red_only_min && yellow_only_min) {
|
|
if (yellow_threshold < red_threshold) {
|
|
// C: | ---------|
|
|
// W: | =====·········|
|
|
threshold_data.push({
|
|
id: 'warning_normal',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: (red_threshold - yellow_threshold), lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_1'] = yellow_threshold;
|
|
extremes['warning_normal_2'] = red_threshold;
|
|
}
|
|
} else if (red_only_min && !yellow_only_min) {
|
|
// C: | ---------|
|
|
// W: | =====··· |
|
|
if (yellow_up > red_threshold) {
|
|
yellow_up = red_threshold;
|
|
}
|
|
if (yellow_threshold < red_threshold) {
|
|
threshold_data.push({
|
|
id: 'warning_normal',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_1'] = yellow_threshold;
|
|
extremes['warning_normal_2'] = yellow_up;
|
|
}
|
|
} else if (!red_only_min && yellow_only_min) {
|
|
// C: | ------- |
|
|
// W: | ==·······=====|
|
|
|
|
if (yellow_threshold < red_threshold) {
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: red_threshold - yellow_threshold, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = yellow_threshold;
|
|
extremes['warning_normal_fdown_2'] = red_threshold;
|
|
}
|
|
|
|
if (yellow_threshold < red_up) {
|
|
yellow_threshold = red_up;
|
|
}
|
|
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'warning_up',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_up'] = yellow_threshold;
|
|
|
|
} else {
|
|
if (red_threshold > yellow_threshold && red_up < yellow_up ) {
|
|
// C: | ------ |
|
|
// W: | ==······==== |
|
|
threshold_data.push({
|
|
id: 'warning_normal_fdown',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: red_threshold - yellow_threshold, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fdown_1'] = yellow_threshold;
|
|
extremes['warning_normal_fdown_2'] = red_threshold;
|
|
|
|
threshold_data.push({
|
|
id: 'warning_normal_fup',
|
|
data: [[max_x, red_up]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: yellow_up - red_up, lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_fup_1'] = red_up;
|
|
extremes['warning_normal_fup_2'] = yellow_up;
|
|
} else if (red_threshold < yellow_threshold && red_up > yellow_up) {
|
|
// If warning is under critical completely do not paint anything yellow
|
|
// C: | -------- |
|
|
// W: | ···· |
|
|
} else {
|
|
// C: | -------- | or // C: | ------ |
|
|
// W: | ==·· | // W: | ···==== |
|
|
if ((yellow_up > red_threshold) && (yellow_up < red_up)) {
|
|
yellow_up = red_threshold;
|
|
}
|
|
if ((yellow_threshold < red_up) && (yellow_threshold > red_threshold)) {
|
|
yellow_threshold = red_up;
|
|
}
|
|
threshold_data.push({
|
|
id: 'warning_normal',
|
|
data: [[max_x, yellow_threshold]],
|
|
label: null,
|
|
color: warning,
|
|
bars: {show: true, align: "left", barWidth: (yellow_up - yellow_threshold), lineWidth: 0, horizontal: true}
|
|
});
|
|
extremes['warning_normal_1'] = yellow_threshold;
|
|
extremes['warning_normal_2'] = yellow_up;
|
|
}
|
|
}
|
|
}
|
|
// Critical interval
|
|
if (red_inverse) {
|
|
if (!red_only_min) {
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'critical_up',
|
|
data: [[max_x, red_up]],
|
|
label: null,
|
|
color: critical,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
}
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'critical_down',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: critical,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
} else {
|
|
if (red_up == 0 && red_threshold != 0) {
|
|
threshold_data.push({ // barWidth will be correct on draw time
|
|
id: 'critical_up',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: critical,
|
|
bars: {show: true, align: "left", barWidth: 1, lineWidth: 0, horizontal: true}
|
|
});
|
|
} else {
|
|
threshold_data.push({
|
|
id: 'critical_normal',
|
|
data: [[max_x, red_threshold]],
|
|
label: null,
|
|
color: critical,
|
|
bars: {show: true, align: "left", barWidth: (red_up - red_threshold), lineWidth: 0, horizontal: true}
|
|
});
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// The first execution, the graph data is the base data
|
|
datas = data_base;
|
|
// minTickSize
|
|
var count_data = datas[0].data.length;
|
|
var min_tick_pixels = 80;
|
|
|
|
if (unit != "") {
|
|
xaxisname = xaxisname + " (" + unit + ")"
|
|
}
|
|
|
|
var options = {
|
|
series: {
|
|
stack: stacked,
|
|
shadowSize: 0.1
|
|
},
|
|
crosshair: { mode: 'xy' },
|
|
selection: { mode: 'x', color: '#777' },
|
|
export: {
|
|
export_data: true,
|
|
labels_long: labels_long,
|
|
homeurl: homeurl
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderWidth:1,
|
|
borderColor: '#C1C1C1',
|
|
tickColor: background_color,
|
|
markings: markings,
|
|
color: legend_color
|
|
},
|
|
xaxes: [{
|
|
axisLabelFontSizePixels: font_size,
|
|
axisLabelUseCanvas: false,
|
|
tickFormatter: xFormatter,
|
|
labelHeight: 50,
|
|
color: '',
|
|
font: font
|
|
}],
|
|
yaxes: [{
|
|
tickFormatter: yFormatter,
|
|
color: '',
|
|
alignTicksWithAxis: 1,
|
|
labelWidth: 30,
|
|
position: 'left',
|
|
font: font,
|
|
reserveSpace: true,
|
|
min: min_check
|
|
}],
|
|
legend: {
|
|
position: 'se',
|
|
container: $('#legend_' + graph_id),
|
|
labelFormatter: lFormatter
|
|
}
|
|
};
|
|
if (vconsole) {
|
|
options.grid['hoverable'] = false;
|
|
options.grid['clickable'] = false;
|
|
options.crosshair = false;
|
|
options.selection = false;
|
|
}
|
|
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
|
var plot = $.plot($('#' + graph_id), datas, options);
|
|
|
|
// Re-calculate the graph height with the legend height
|
|
if (dashboard || vconsole) {
|
|
var hDiff = $('#'+graph_id).height() - $('#legend_'+graph_id).height();
|
|
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
|
|
}
|
|
else {
|
|
$('#'+graph_id).css('height', hDiff);
|
|
}
|
|
}
|
|
|
|
if (vconsole) {
|
|
var myCanvas = plot.getCanvas();
|
|
plot.setupGrid(); // redraw plot to new size
|
|
plot.draw();
|
|
var image = myCanvas.toDataURL("image/png");
|
|
return;
|
|
}
|
|
|
|
// Adjust the overview plot to the width and position of the main plot
|
|
adjust_left_width_canvas(graph_id, 'overview_'+graph_id);
|
|
update_left_width_canvas(graph_id);
|
|
|
|
// Adjust overview when main chart is resized
|
|
$('#'+graph_id).resize(function(){
|
|
update_left_width_canvas(graph_id);
|
|
});
|
|
|
|
// Adjust linked graph to the width and position of the main plot
|
|
|
|
// Miniplot
|
|
if (!vconsole) {
|
|
var overview = $.plot($('#overview_'+graph_id),datas, {
|
|
series: {
|
|
stack: stacked,
|
|
lines: { show: true, lineWidth: 1 },
|
|
shadowSize: 0
|
|
},
|
|
grid: { borderWidth: 1, hoverable: true, autoHighlight: false},
|
|
xaxis: { },
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
minTickSize: steps,
|
|
color: ''
|
|
} ],
|
|
yaxis: {ticks: [], autoscaleMargin: 0.1 },
|
|
selection: {mode: 'x', color: '#777' },
|
|
legend: {show: false},
|
|
crosshair: {mode: 'x'}
|
|
});
|
|
}
|
|
// Connection between plot and miniplot
|
|
|
|
$('#' + graph_id).bind('plotselected', function (event, ranges) {
|
|
// do the zooming if exist menu to undo it
|
|
if (menu == 0) {
|
|
return;
|
|
}
|
|
dataInSelection = ranges.xaxis.to - ranges.xaxis.from;
|
|
dataInPlot = plot.getData()[0].data.length;
|
|
|
|
factor = dataInSelection / dataInPlot;
|
|
|
|
new_steps = parseInt(factor * steps);
|
|
|
|
plot = $.plot($('#' + graph_id), data_base,
|
|
$.extend(true, {}, options, {
|
|
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to},
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
minTickSize: new_steps,
|
|
color: ''
|
|
} ],
|
|
legend: { show: false }
|
|
}));
|
|
if (thresholded) {
|
|
var zoom_data_threshold = new Array ();
|
|
|
|
var y_recal = axis_thresholded(threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max,
|
|
red_threshold, extremes, red_up);
|
|
plot = $.plot($('#' + graph_id), data_base,
|
|
$.extend(true, {}, options, {
|
|
yaxis: {
|
|
max: y_recal.max,
|
|
min: y_recal.min
|
|
},
|
|
xaxis: {
|
|
min: plot.getAxes().xaxis.min,
|
|
max: plot.getAxes().xaxis.max
|
|
}
|
|
}));
|
|
zoom_data_threshold = add_threshold (data_base, threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max,
|
|
red_threshold, extremes, red_up);
|
|
plot.setData(zoom_data_threshold);
|
|
plot.draw();
|
|
}
|
|
|
|
|
|
$('#menu_cancelzoom_' + graph_id)
|
|
.attr('src', homeurl + '/images/zoom_cross_grey.png');
|
|
|
|
currentRanges = ranges;
|
|
// don't fire event on the overview to prevent eternal loop
|
|
overview.setSelection(ranges, true);
|
|
});
|
|
|
|
$('#overview_' + graph_id)
|
|
.bind('plotselected', function (event, ranges) {
|
|
plot.setSelection(ranges);
|
|
});
|
|
|
|
var legends = $('#legend_' + graph_id + ' .legendLabel');
|
|
|
|
var updateLegendTimeout = null;
|
|
var latestPosition = null;
|
|
var currentPlot = null;
|
|
var currentRanges = null;
|
|
|
|
// Update legend with the data of the plot in the mouse position
|
|
function updateLegend() {
|
|
updateLegendTimeout = null;
|
|
|
|
var pos = latestPosition;
|
|
|
|
var axes = currentPlot.getAxes();
|
|
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
|
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
|
|
return;
|
|
}
|
|
|
|
var j, dataset = currentPlot.getData();
|
|
|
|
var i = 0;
|
|
for (k = 0; k < dataset.length; k++) {
|
|
|
|
// k is the real series counter
|
|
// i is the series counter without thresholds
|
|
var series = dataset[k];
|
|
|
|
if (series.label == null) {
|
|
continue;
|
|
}
|
|
|
|
// find the nearest points, x-wise
|
|
for (j = 0; j < series.data.length; ++j)
|
|
if (series.data[j][0] > pos.x) {
|
|
break;
|
|
}
|
|
|
|
var y = series.data[j][1];
|
|
|
|
var how_bigger = "";
|
|
if (y > 1000000) {
|
|
how_bigger = "M";
|
|
y = y / 1000000;
|
|
}
|
|
else if (y > 1000) {
|
|
how_bigger = "K";
|
|
y = y / 1000;
|
|
}
|
|
else if(y < -1000000) {
|
|
how_bigger = "M";
|
|
y = y / 1000000;
|
|
}
|
|
else if (y < -1000) {
|
|
how_bigger = "K";
|
|
y = y / 1000;
|
|
}
|
|
|
|
if (currentRanges == null || (currentRanges.xaxis.from < j && j < currentRanges.xaxis.to)) {
|
|
$('#timestamp_'+graph_id).show();
|
|
// If no legend, the timestamp labels are short and with value
|
|
if (legend.length == 0) {
|
|
$('#timestamp_'+graph_id).text(labels[j] + ' (' + (short_data ? number_format(y, 0, "", short_data) : parseFloat(y)) + ')');
|
|
}
|
|
else {
|
|
$('#timestamp_'+graph_id).text(labels_long[j]);
|
|
}
|
|
|
|
//$('#timestamp_'+graph_id).css('top', plot.offset().top-$('#timestamp_'+graph_id).height()*1.5);
|
|
|
|
var timesize = $('#timestamp_'+graph_id).width();
|
|
|
|
if (currentRanges != null) {
|
|
dataset = plot.getData();
|
|
}
|
|
|
|
var timenewpos = dataset[0].xaxis.p2c(pos.x)+$('.yAxis>div').eq(0).width();
|
|
|
|
var canvaslimit = plot.width();
|
|
|
|
if (timesize+timenewpos > canvaslimit) {
|
|
$('#timestamp_'+graph_id).css('left', timenewpos - timesize);
|
|
$('#timestamp_'+graph_id).css('top', 50);
|
|
}
|
|
else {
|
|
$('#timestamp_'+graph_id).css('left', timenewpos);
|
|
$('#timestamp_'+graph_id).css('top', 50);
|
|
}
|
|
}
|
|
else {
|
|
$('#timestamp_'+graph_id).hide();
|
|
}
|
|
|
|
var label_aux = series.label;
|
|
|
|
// The graphs of points type and unknown graphs will dont be updated
|
|
if (serie_types[i] != 'points' && series.label != $('#hidden-unknown_text').val()) {
|
|
$('#legend_' + graph_id + ' .legendLabel')
|
|
.eq(i).html(label_aux + '= ' + (short_data ? number_format(y, 0, "", short_data) : parseFloat(y)) + how_bigger + ' ' + unit);
|
|
}
|
|
|
|
$('#legend_' + graph_id + ' .legendLabel')
|
|
.eq(i).css('font-size',font_size+'pt');
|
|
|
|
$('#legend_' + graph_id + ' .legendLabel')
|
|
.eq(i).css('color','');
|
|
|
|
$('#legend_' + graph_id + ' .legendLabel')
|
|
.eq(i).css('font-family',font+'Font');
|
|
|
|
i++;
|
|
}
|
|
}
|
|
|
|
// Events
|
|
$('#' + graph_id).bind('plothover', function (event, pos, item) {
|
|
overview.setCrosshair({ x: pos.x, y: 0 });
|
|
currentPlot = plot;
|
|
latestPosition = pos;
|
|
if (!updateLegendTimeout) {
|
|
updateLegendTimeout = setTimeout(updateLegend, 50);
|
|
}
|
|
|
|
});
|
|
|
|
$('#' + graph_id).bind("plotclick", function (event, pos, item) {
|
|
plot.unhighlight();
|
|
if (item && item.series.label != '' && (item.series.label == legend_events || item.series.label == legend_events+series_suffix_str || item.series.label == legend_alerts || item.series.label == legend_alerts+series_suffix_str)) {
|
|
plot.unhighlight();
|
|
var dataset = plot.getData();
|
|
|
|
var extra_info = '<i>No info to show</i>';
|
|
var extra_show = false;
|
|
|
|
var coord_x = (item.dataIndex/item.series.xaxis.datamax)* (event.target.clientWidth - event.target.offsetLeft + 1) + event.target.offsetLeft;
|
|
|
|
|
|
$('#extra_'+graph_id).css('left',coord_x);
|
|
$('#extra_'+graph_id).css('top', event.target.offsetTop + 55 );
|
|
|
|
switch(item.series.label) {
|
|
case legend_alerts+series_suffix_str:
|
|
case legend_alerts:
|
|
extra_info = '<b>'+legend_alerts+':<br><span style="font-size:xx-small; font-weight: normal;">From: '+labels_long[item.dataIndex];
|
|
if (labels_long[item.dataIndex+1] != undefined) {
|
|
extra_info += '<br>To: '+labels_long[item.dataIndex+1];
|
|
}
|
|
extra_info += '</span></b>'+get_event_details(alertsz[item.dataIndex]);
|
|
extra_show = true;
|
|
break;
|
|
case legend_events+series_suffix_str:
|
|
case legend_events:
|
|
extra_info = '<b>'+legend_events+':<br><span style="font-size:xx-small; font-weight: normal;">From: '+labels_long[item.dataIndex];
|
|
if (labels_long[item.dataIndex+1] != undefined) {
|
|
extra_info += '<br>To: '+labels_long[item.dataIndex+1];
|
|
}
|
|
extra_info += '</span></b>'+get_event_details(eventsz[item.dataIndex]);
|
|
extra_show = true;
|
|
break;
|
|
default:
|
|
return;
|
|
break;
|
|
}
|
|
|
|
if (extra_show) {
|
|
$('#extra_'+graph_id).html(extra_info);
|
|
$('#extra_'+graph_id).css('display','');
|
|
}
|
|
plot.highlight(item.series, item.datapoint);
|
|
}
|
|
else {
|
|
$('#extra_'+graph_id).html('');
|
|
$('#extra_'+graph_id).css('display','none');
|
|
}
|
|
});
|
|
|
|
$('#overview_'+graph_id).bind('plothover', function (event, pos, item) {
|
|
plot.setCrosshair({ x: pos.x, y: 0 });
|
|
currentPlot = overview;
|
|
latestPosition = pos;
|
|
if (!updateLegendTimeout) {
|
|
updateLegendTimeout = setTimeout(updateLegend, 50);
|
|
}
|
|
});
|
|
|
|
$('#'+graph_id).bind('mouseout',resetInteractivity);
|
|
$('#overview_'+graph_id).bind('mouseout',resetInteractivity);
|
|
|
|
//~ // Reset interactivity styles
|
|
function resetInteractivity() {
|
|
$('#timestamp_'+graph_id).hide();
|
|
dataset = plot.getData();
|
|
for (i = 0; i < dataset.length; ++i) {
|
|
var series = dataset[i];
|
|
var label_aux = series.label;
|
|
$('#legend_' + graph_id + ' .legendLabel')
|
|
.eq(i).html(label_aux);
|
|
}
|
|
plot.clearCrosshair();
|
|
overview.clearCrosshair();
|
|
}
|
|
|
|
// Format functions
|
|
function xFormatter(v, axis) {
|
|
if (labels[v] == undefined) {
|
|
return '';
|
|
}
|
|
extra_css = '';
|
|
return '<div class='+font+' style="font-size:'+font_size+'pt; margin-top:15px;'+extra_css+'">'+labels[v]+'</div>';
|
|
}
|
|
|
|
function yFormatter(v, axis) {
|
|
axis.datamin = 0;
|
|
if (short_data) {
|
|
var formatted = number_format(v, force_integer, "", short_data);
|
|
}
|
|
else {
|
|
// It is an integer
|
|
if(v - Math.floor(v) == 0){
|
|
var formatted = number_format(v, force_integer, "", 2);
|
|
} else {
|
|
var formatted = v;
|
|
}
|
|
}
|
|
|
|
return '<div class='+font+' style="font-size:'+font_size+'pt;">'+formatted+'</div>';
|
|
}
|
|
|
|
function lFormatter(v, item) {
|
|
return '<div style="font-size:'+font_size+'pt;">'+v+'</div>';
|
|
// Prepared to turn series with a checkbox
|
|
//return '<div style=color:;font-size:'+font_size+'pt><input type="checkbox" id="' + graph_id + '_' + item.id +'" checked="checked" class="check_serie_'+graph_id+'">'+v+'</div>';
|
|
}
|
|
|
|
if (menu) {
|
|
var parent_height;
|
|
$('#menu_overview_' + graph_id).click(function() {
|
|
$('#overview_' + graph_id).toggle();
|
|
});
|
|
|
|
//~ $('#menu_export_csv_' + graph_id).click(function() {
|
|
//~ exportData({ type: 'csv' });
|
|
//~ });
|
|
|
|
$("#menu_export_csv_"+graph_id)
|
|
.click(function (event) {
|
|
event.preventDefault();
|
|
plot.exportDataCSV();
|
|
});
|
|
|
|
//Not a correct call
|
|
//~ $('#menu_export_json_' + graph_id).click(function() {
|
|
//~ exportData({ type: 'json' });
|
|
//~ });
|
|
|
|
//This is a correct call to export data in json
|
|
//~ $("#menu_export_json_"+graph_id)
|
|
//~ .click(function (event) {
|
|
//~ event.preventDefault();
|
|
//~ plot.exportDataJSON();
|
|
//~ });
|
|
|
|
$('#menu_threshold_' + graph_id).click(function() {
|
|
datas = new Array();
|
|
|
|
if (thresholded) {
|
|
$.each(data_base, function() {
|
|
// Prepared to turning series
|
|
//if(showed[this.id.split('_')[1]]) {
|
|
datas.push(this);
|
|
//}
|
|
});
|
|
plot = $.plot($('#' + graph_id), data_base,
|
|
$.extend(true, {}, options, {
|
|
yaxis: {max: max_draw},
|
|
xaxis: {
|
|
min: plot.getAxes().xaxis.min,
|
|
max: plot.getAxes().xaxis.max
|
|
}
|
|
}));
|
|
thresholded = false;
|
|
}
|
|
else {
|
|
|
|
var max_draw = plot.getAxes().yaxis.datamax;
|
|
// Recalculate the y axis
|
|
var y_recal = axis_thresholded(threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max,
|
|
red_threshold, extremes, red_up);
|
|
plot = $.plot($('#' + graph_id), data_base,
|
|
$.extend(true, {}, options, {
|
|
yaxis: {
|
|
max: y_recal.max,
|
|
min: y_recal.min
|
|
},
|
|
xaxis: {
|
|
min: plot.getAxes().xaxis.min,
|
|
max: plot.getAxes().xaxis.max
|
|
}
|
|
}));
|
|
datas = add_threshold (data_base, threshold_data, plot.getAxes().yaxis.min, plot.getAxes().yaxis.max,
|
|
red_threshold, extremes, red_up);
|
|
thresholded = true;
|
|
|
|
}
|
|
|
|
plot.setData(datas);
|
|
plot.draw();
|
|
|
|
//~ plot.setSelection(currentRanges);
|
|
});
|
|
|
|
$('#menu_cancelzoom_' + graph_id).click(function() {
|
|
// cancel the zooming
|
|
plot = $.plot($('#' + graph_id), data_base,
|
|
$.extend(true, {}, options, {
|
|
xaxis: {max: max_x },
|
|
legend: { show: false }
|
|
}));
|
|
|
|
$('#menu_cancelzoom_' + graph_id)
|
|
.attr('src', homeurl + '/images/zoom_cross.disabled.png');
|
|
overview.clearSelection();
|
|
currentRanges = null;
|
|
|
|
thresholded = false;
|
|
});
|
|
|
|
// Adjust the menu image on top of the plot
|
|
// If there is no legend we increase top-padding to make space to the menu
|
|
if (legend.length == 0) {
|
|
$('#menu_' + graph_id).parent().css('padding-top',
|
|
$('#menu_' + graph_id).css('height'));
|
|
}
|
|
|
|
// Add bottom margin in the legend
|
|
// Estimated height of 24 (works fine with this data in all browsers)
|
|
menu_height = 24;
|
|
var legend_margin_bottom = parseInt(
|
|
$('#legend_'+graph_id).css('margin-bottom').split('px')[0]);
|
|
$('#legend_'+graph_id).css('margin-bottom', '10px');
|
|
parent_height = parseInt(
|
|
$('#menu_'+graph_id).parent().css('height').split('px')[0]);
|
|
adjust_menu(graph_id, plot, parent_height, width);
|
|
}
|
|
|
|
if (!dashboard) {
|
|
if (water_mark)
|
|
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
|
|
adjust_menu(graph_id, plot, parent_height, width);
|
|
}
|
|
}
|
|
|
|
function adjust_menu(graph_id, plot, parent_height, width) {
|
|
if ($('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width') != undefined) {
|
|
left_ticks_width = $('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width').split('px')[0];
|
|
}
|
|
else {
|
|
left_ticks_width = 0;
|
|
}
|
|
|
|
var parent_height_new = 0;
|
|
|
|
var legend_height = parseInt($('#legend_'+graph_id).css('height').split('px')[0]) + parseInt($('#legend_'+graph_id).css('margin-top').split('px')[0]);
|
|
if ($('#overview_'+graph_id).css('display') == 'none') {
|
|
overview_height = 0;
|
|
}
|
|
else {
|
|
overview_height = parseInt($('#overview_'+graph_id).css('height').split('px')[0]) + parseInt($('#overview_'+graph_id).css('margin-top').split('px')[0]);
|
|
}
|
|
|
|
var menu_height = '25';
|
|
|
|
if ($('#menu_'+graph_id).height() != undefined && $('#menu_'+graph_id).height() > 20) {
|
|
menu_height = $('#menu_'+graph_id).height();
|
|
}
|
|
|
|
offset = $('#' + graph_id)[0].offsetTop;
|
|
|
|
$('#menu_' + graph_id).css('top', ((offset) + 'px'));
|
|
|
|
//$('#legend_' + graph_id).css('width',plot.width());
|
|
|
|
//~ $('#menu_' + graph_id).css('left', $('#'+graph_id)[0].offsetWidth);
|
|
|
|
$('#menu_' + graph_id).show();
|
|
}
|
|
|
|
function set_watermark(graph_id, plot, watermark_src) {
|
|
var img = new Image();
|
|
img.src = watermark_src;
|
|
var context = plot.getCanvas().getContext('2d');
|
|
|
|
// Once it's loaded draw the image on the canvas.
|
|
img.addEventListener('load', function () {
|
|
//~ // Now resize the image: x, y, w, h.
|
|
|
|
var down_ticks_height = 0;
|
|
if ($('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height') != undefined) {
|
|
down_ticks_height = $('#'+graph_id+' .yAxis .tickLabel').eq(0).css('height').split('px')[0];
|
|
}
|
|
|
|
var left_pos = parseInt(context.canvas.width - 3) - $('#watermark_image_'+graph_id)[0].width;
|
|
var top_pos = 6;
|
|
//var top_pos = parseInt(context.canvas.height - down_ticks_height - 10) - $('#watermark_image_'+graph_id)[0].height;
|
|
//var left_pos = 380;
|
|
context.drawImage(this, left_pos, top_pos);
|
|
|
|
}, false);
|
|
}
|
|
|
|
function get_event_details (event_ids) {
|
|
table = '';
|
|
if (typeof(event_ids) != "undefined") {
|
|
var inputs = [];
|
|
var table;
|
|
inputs.push ("get_events_details=1");
|
|
inputs.push ("event_ids="+event_ids);
|
|
inputs.push ("page=include/ajax/events");
|
|
|
|
// Autologin
|
|
if ($('#hidden-loginhash').val() != undefined) {
|
|
inputs.push ("loginhash=" + $('#hidden-loginhash').val());
|
|
inputs.push ("loginhash_data=" + $('#hidden-loginhash_data').val());
|
|
inputs.push ("loginhash_user=" + $('#hidden-loginhash_user').val());
|
|
}
|
|
|
|
jQuery.ajax ({
|
|
data: inputs.join ("&"),
|
|
type: 'GET',
|
|
url: action="../../ajax.php",
|
|
timeout: 10000,
|
|
dataType: 'html',
|
|
async: false,
|
|
success: function (data) {
|
|
table = data;
|
|
//forced_title_callback();
|
|
}
|
|
});
|
|
}
|
|
|
|
return table;
|
|
}
|
|
|
|
function adjust_left_width_canvas(adapter_id, adapted_id) {
|
|
var adapter_left_margin = $('#'+adapter_id+' .yAxis .tickLabel').width();
|
|
var adapted_pix = $('#'+adapted_id).width();
|
|
|
|
var new_adapted_width = adapted_pix - adapter_left_margin;
|
|
|
|
$('#'+adapted_id).width(new_adapted_width);
|
|
$('#'+adapted_id).css('margin-left', adapter_left_margin);
|
|
}
|
|
|
|
|
|
function update_left_width_canvas(graph_id) {
|
|
$('#overview_'+graph_id).width($('#'+graph_id).width() - 30);
|
|
$('#overview_'+graph_id).css('margin-left', $('#'+graph_id+' .yAxis .tickLabel').width());
|
|
}
|
|
|
|
function check_adaptions(graph_id) {
|
|
var classes = $('#'+graph_id).attr('class').split(' ');
|
|
|
|
$.each(classes, function(i,v) {
|
|
// If has a class starting with adapted, we adapt it
|
|
if (v.split('_')[0] == 'adapted') {
|
|
var adapter_id = $('.adapter_'+v.split('_')[1]).attr('id');
|
|
adjust_left_width_canvas(adapter_id, graph_id);
|
|
}
|
|
});
|
|
}
|
|
|
|
function number_format(number, force_integer, unit, short_data) {
|
|
if (force_integer) {
|
|
if (Math.round(number) != number) {
|
|
return '';
|
|
}
|
|
}
|
|
else {
|
|
short_data ++;
|
|
decimals = pad(1, short_data, 0);
|
|
number = Math.round(number * decimals) / decimals;
|
|
}
|
|
|
|
var shorts = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"];
|
|
var pos = 0;
|
|
while (1) {
|
|
if (number >= 1000) { //as long as the number can be divided by 1000
|
|
pos++; //Position in array starting with 0
|
|
number = number / 1000;
|
|
}
|
|
else if (number <= -1000) {
|
|
pos++;
|
|
number = number / 1000;
|
|
}
|
|
else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
return number + ' ' + shorts[pos] + unit;
|
|
}
|
|
|
|
function pad(input, length, padding) {
|
|
var str = input + "";
|
|
return (length <= str.length) ? str : pad(str+padding, length, padding);
|
|
}
|
|
// Recalculate the threshold data depends on warning and critical
|
|
function axis_thresholded (threshold_data, y_min, y_max, red_threshold, extremes, red_up) {
|
|
|
|
var y = {
|
|
min: 0,
|
|
max: 0
|
|
};
|
|
|
|
// Default values
|
|
var yaxis_resize = {
|
|
up: null,
|
|
normal_up: 0,
|
|
normal_down: 0,
|
|
down: null
|
|
};
|
|
// Resize the y axis to display all intervals
|
|
$.each(threshold_data, function() {
|
|
if (/_up/.test(this.id)){
|
|
yaxis_resize['up'] = this.data[0][1];
|
|
}
|
|
if (/_down/.test(this.id)){
|
|
if (/critical/.test(this.id)) {
|
|
yaxis_resize['down'] = red_threshold;
|
|
} else {
|
|
yaxis_resize['down'] = extremes[this.id];
|
|
}
|
|
}
|
|
if (/_normal/.test(this.id)){
|
|
var end;
|
|
if (/critical/.test(this.id)) {
|
|
end = red_up;
|
|
} else {
|
|
end = extremes[this.id + '_2'];
|
|
}
|
|
if (yaxis_resize['normal_up'] < end) yaxis_resize['normal_up'] = end;
|
|
if (yaxis_resize['normal_down'] > this.data[0][1]) yaxis_resize['normal_down'] = this.data[0][1];
|
|
}
|
|
});
|
|
|
|
// If you need to display a up or a down bar, display 10% of data height
|
|
var margin_up_or_down = (y_max - y_min)*0.10;
|
|
|
|
// Calculate the new axis
|
|
y['max'] = yaxis_resize['normal_up'] > y_max ? yaxis_resize['normal_up'] : y_max;
|
|
y['min'] = yaxis_resize['normal_down'] > y_min ? yaxis_resize['normal_down'] : y_min;
|
|
if (yaxis_resize['up'] !== null) {
|
|
y['max'] = (yaxis_resize['up'] + margin_up_or_down) < y_max
|
|
? y_max
|
|
: yaxis_resize['up'] + margin_up_or_down;
|
|
}
|
|
if (yaxis_resize['down'] !== null) {
|
|
y['min'] = (yaxis_resize['down'] - margin_up_or_down) < y_min
|
|
? yaxis_resize['up'] + margin_up_or_down
|
|
: y_min;
|
|
}
|
|
|
|
return y;
|
|
}
|
|
function add_threshold (data_base, threshold_data, y_min, y_max,
|
|
red_threshold, extremes, red_up) {
|
|
|
|
var datas = new Array ();
|
|
|
|
$.each(data_base, function() {
|
|
// Prepared to turning series
|
|
//if(showed[this.id.split('_')[1]]) {
|
|
datas.push(this);
|
|
//}
|
|
});
|
|
|
|
// Resize the threshold data
|
|
$.each(threshold_data, function() {
|
|
if (/_up/.test(this.id)){
|
|
this.bars.barWidth = y_max - this.data[0][1];
|
|
}
|
|
if (/_down/.test(this.id)){
|
|
var end;
|
|
if (/critical/.test(this.id)) {
|
|
end = red_threshold;
|
|
} else {
|
|
end = extremes[this.id];
|
|
}
|
|
this.bars.barWidth = end - y_min;
|
|
this.data[0][1] = y_min;
|
|
}
|
|
if (/_normal/.test(this.id)){
|
|
var end;
|
|
if (/critical/.test(this.id)) {
|
|
end = red_up;
|
|
} else {
|
|
end = extremes[this.id + '_2'];
|
|
}
|
|
if (this.data[0][1] < y_min) {
|
|
this.bars.barWidth = end - y_min;
|
|
this.data[0][1] = y_min;
|
|
end = this.bars.barWidth + this.data[0][1];
|
|
}
|
|
if (end > y_max) {
|
|
this.bars.barWidth = y_max - this.data[0][1];
|
|
}
|
|
}
|
|
datas.push(this);
|
|
});
|
|
|
|
return datas;
|
|
}
|
|
|
|
function reduceText (text, maxLength) {
|
|
if (text.length <= maxLength) return text
|
|
var firstSlideEnd = parseInt((maxLength - 3) / 2);
|
|
var str_cut = text.substr(0, firstSlideEnd);
|
|
return str_cut + '...' + text.substr(-firstSlideEnd - 3);
|
|
}
|