1180 lines
32 KiB
JavaScript
1180 lines
32 KiB
JavaScript
/*
|
|
|
|
|
|
*/
|
|
|
|
function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, water_mark, separator, legend_position, height, colors) {
|
|
var labels = labels.split(separator);
|
|
var data = values.split(separator);
|
|
if (colors != '') {
|
|
colors = colors.split(separator);
|
|
}
|
|
|
|
var color = null;
|
|
for (var i = 0; i < nseries; i++) {
|
|
if (colors != '') {
|
|
color = colors[i];
|
|
}
|
|
|
|
data[i] = { label: labels[i], data: parseInt(data[i]), color: color}
|
|
}
|
|
|
|
var label_conf;
|
|
|
|
if (width < 400) {
|
|
label_conf = {
|
|
show: false
|
|
};
|
|
}
|
|
else {
|
|
label_conf = {
|
|
show: true,
|
|
radius: 3/4,
|
|
formatter: function(label, series) {
|
|
return '<div style="font-size:' + font_size + 'pt;' +
|
|
'text-align:center;padding:2px;color:white;">' +
|
|
label + '<br/>' + series.percent.toFixed(1) + '%</div>';
|
|
},
|
|
background: {
|
|
opacity: 0.5,
|
|
color: '#000'
|
|
}
|
|
};
|
|
}
|
|
|
|
var show_legend = true;
|
|
if (legend_position == 'hidden') {
|
|
show_legend = false;
|
|
}
|
|
|
|
var conf_pie = {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
radius: 3/4,
|
|
//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(1) + "%)";
|
|
}
|
|
}
|
|
|
|
switch (legend_position) {
|
|
case 'bottom':
|
|
if (width > height)
|
|
offset = - (height / 5);
|
|
else
|
|
offset = - (width / 5);
|
|
conf_pie.series.pie.radius = 1 / 2.5;
|
|
conf_pie.series.pie.offset = {top: offset};
|
|
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.each(function () {
|
|
$(this).css('width', $(this).width());
|
|
$(this).css('font-size', font_size+'pt');
|
|
});
|
|
|
|
// Events
|
|
$('#' + graph_id).bind('plothover', pieHover);
|
|
$('#' + graph_id).bind('plotclick', pieClick);
|
|
$('#' + graph_id).bind('mouseout',resetInteractivity);
|
|
|
|
function pieHover(event, pos, obj)
|
|
{
|
|
if (!obj)
|
|
return;
|
|
|
|
index = obj.seriesIndex;
|
|
legends.css('font-weight', '');
|
|
legends.eq(index).css('font-weight', 'bold');
|
|
}
|
|
|
|
// Reset styles
|
|
function resetInteractivity() {
|
|
legends.each(function () {
|
|
// fix the widths so they don't jump around
|
|
$(this).css('font-weight', '');
|
|
});
|
|
}
|
|
|
|
if (water_mark) {
|
|
set_watermark(graph_id, plot,
|
|
$('#watermark_image_' + graph_id).attr('src'));
|
|
}
|
|
}
|
|
|
|
function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_mark, separator, separator2) {
|
|
|
|
values = values.split(separator2);
|
|
var datas = new Array();
|
|
|
|
for(i=0;i<values.length;i++) {
|
|
var serie = values[i].split(separator);
|
|
var aux = new Array();
|
|
$.each(serie.reverse(),function(i,v) {
|
|
aux.push([v, i]);
|
|
});
|
|
|
|
datas.push({
|
|
data: aux,
|
|
bars: { show: true, horizontal: true, fillColor: { colors: [ { opacity: 0.7 }, { opacity: 1 } ] }, lineWidth:1, steps:false }
|
|
});
|
|
}
|
|
|
|
labels = labels.split(separator).reverse();
|
|
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
|
|
|
var options = {
|
|
series: {
|
|
shadowSize: 0.1
|
|
},
|
|
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth:1,
|
|
borderColor: '#666',
|
|
tickColor: '#eee'
|
|
},
|
|
xaxes: [ {
|
|
tickFormatter: yFormatter,
|
|
color: '#000'
|
|
} ],
|
|
yaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
tickSize: 1,
|
|
color: '#000'
|
|
},
|
|
{
|
|
// align if we are to the right
|
|
alignTicksWithAxis: 1,
|
|
position: 'right'
|
|
|
|
//tickFormatter: dFormatter
|
|
} ]
|
|
,
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
|
|
var plot = $.plot($('#'+graph_id),datas, options );
|
|
|
|
// Adjust the top of yaxis tick to set it in the middle of the bars
|
|
yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
|
|
|
|
i = 0;
|
|
$('#'+graph_id+' .yAxis .tickLabel').each(function() {
|
|
tickTop = $(this).css('top').split('px')[0];
|
|
tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3);
|
|
$(this).css('top', tickNewTop+'px');
|
|
|
|
valuesNewTop = parseInt(parseInt(tickTop) - (yAxisHeight));
|
|
|
|
$('#value_'+i+'_'+graph_id).css('top',parseInt(plot.offset().top) + parseInt(valuesNewTop));
|
|
|
|
pixelPerValue = parseInt(plot.width()) / maxvalue;
|
|
|
|
inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
|
|
label_width = ($('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
|
|
|
|
label_left_offset = plot.offset().left + inCanvasValuePos + 5; //Label located on right side of bar + 5 pixels
|
|
|
|
//If label fit into the bar just recalculate left position to fit on right side of bar
|
|
if (inCanvasValuePos > label_width) {
|
|
label_left_offset = plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3;
|
|
}
|
|
|
|
$('#value_'+i+'_'+graph_id).css('left',label_left_offset);
|
|
i++;
|
|
});
|
|
|
|
// When resize the window, adjust the values
|
|
$('#'+graph_id).parent().resize(function () {
|
|
i = 0;
|
|
pixelPerValue = parseInt(plot.width()) / maxvalue;
|
|
|
|
$('#'+graph_id+' .yAxis .tickLabel').each(function() {
|
|
inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
|
|
label_width = ($('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
|
|
|
|
label_left_offset = plot.offset().left + inCanvasValuePos + 5; //Label located on right side of bar + 5 pixels
|
|
|
|
//If label fit into the bar just recalculate left position to fit on right side of bar
|
|
if (inCanvasValuePos > label_width) {
|
|
label_left_offset = plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3;
|
|
}
|
|
|
|
$('#value_'+i+'_'+graph_id).css('left',label_left_offset);
|
|
i++;
|
|
});
|
|
});
|
|
|
|
// Format functions
|
|
function xFormatter(v, axis) {
|
|
if (labels[v] != undefined) {
|
|
return labels[v];
|
|
}
|
|
else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function yFormatter(v, axis) {
|
|
return v;
|
|
}
|
|
|
|
function lFormatter(v, axis) {
|
|
return '<div style=color:#000>'+v+'</div>';
|
|
}
|
|
|
|
// Events
|
|
$('#'+graph_id).bind('plothover', function (event, pos, item) {
|
|
$('.values_'+graph_id).css('font-weight', '');
|
|
if (item != null) {
|
|
index = item.dataIndex;
|
|
$('#value_'+index+'_'+graph_id).css('font-weight', 'bold');
|
|
}
|
|
});
|
|
|
|
if (water_mark) {
|
|
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
|
|
}
|
|
}
|
|
|
|
function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors, water_mark, maxvalue, water_mark, separator, separator2) {
|
|
|
|
values = values.split(separator2);
|
|
legend = legend.split(separator);
|
|
labels_long = labels_long.split(separator);
|
|
colors = colors.split(separator);
|
|
|
|
var datas = new Array();
|
|
|
|
for (i=0;i<values.length;i++) {
|
|
var serie = values[i].split(separator);
|
|
|
|
var serie_color;
|
|
if (colors[i] != '') {
|
|
serie_color = colors[i];
|
|
}
|
|
else {
|
|
serie_color = null;
|
|
}
|
|
|
|
var aux = new Array();
|
|
$.each(serie,function(i,v) {
|
|
aux.push([i, v]);
|
|
});
|
|
|
|
datas.push({
|
|
data: aux,
|
|
color: serie_color,
|
|
bars: { show: true, horizontal: false, fillColor: { colors: [ { opacity: 0.7 }, { opacity: 1 } ] }, lineWidth:1, steps:false }
|
|
});
|
|
}
|
|
|
|
labels = labels.split(separator);
|
|
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
|
|
|
var options = {
|
|
series: {
|
|
shadowSize: 0.1
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderWidth:1,
|
|
borderColor: '#666',
|
|
tickColor: '#eee'
|
|
},
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
color: '#000'
|
|
} ],
|
|
yaxes: [ {
|
|
tickFormatter: yFormatter,
|
|
tickSize: 1,
|
|
color: '#000'
|
|
},
|
|
{
|
|
// align if we are to the right
|
|
alignTicksWithAxis: 1,
|
|
position: 'right'
|
|
|
|
//tickFormatter: dFormatter
|
|
} ]
|
|
,
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
|
|
var plot = $.plot($('#'+graph_id),datas, options );
|
|
|
|
// Adjust the top of yaxis tick to set it in the middle of the bars
|
|
yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
|
|
|
|
i = 0;
|
|
//~ $('#'+graph_id+' .yAxis .tickLabel').each(function() {
|
|
//~ tickTop = $(this).css('top').split('px')[0];
|
|
//~ tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3);
|
|
//~ $(this).css('top', tickNewTop+'px');
|
|
//~
|
|
//~ valuesNewTop = parseInt(parseInt(tickTop) - (yAxisHeight));
|
|
//~
|
|
//~ $('#value_'+i+'_'+graph_id).css('top',parseInt(plot.offset().top) + parseInt(valuesNewTop));
|
|
//~
|
|
//~ pixelPerValue = parseInt(plot.width()) / maxvalue;
|
|
//~
|
|
//~ inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
|
|
//~
|
|
//~ $('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
|
|
//~ i++;
|
|
//~ });
|
|
|
|
// When resize the window, adjust the values
|
|
//~ $('#'+graph_id).parent().resize(function () {
|
|
//~ i = 0;
|
|
//~ pixelPerValue = parseInt(plot.width()) / maxvalue;
|
|
//~
|
|
//~ $('#'+graph_id+' .yAxis .tickLabel').each(function() {
|
|
//~ inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html()));
|
|
//~
|
|
//~ $('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
|
|
//~ i++;
|
|
//~ });
|
|
//~ });
|
|
|
|
// Format functions
|
|
function xFormatter(v, axis) {
|
|
if (labels[v] != undefined) {
|
|
return labels[v];
|
|
}
|
|
else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function yFormatter(v, axis) {
|
|
return v;
|
|
}
|
|
|
|
function lFormatter(v, axis) {
|
|
return '<div style=color:#000>'+v+'</div>';
|
|
}
|
|
|
|
// Events
|
|
//~ $('#'+graph_id).bind('plothover', function (event, pos, item) {
|
|
//~ $('.values_'+graph_id).css('font-weight', '');
|
|
//~ if(item != null) {
|
|
//~ index = item.dataIndex;
|
|
//~ $('#value_'+index+'_'+graph_id).css('font-weight', 'bold');
|
|
//~ }
|
|
//~ });
|
|
|
|
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) {
|
|
|
|
values = values.split(separator2);
|
|
labels = labels.split(separator);
|
|
legend = legend.split(separator);
|
|
acumulate_data = acumulate_data.split(separator);
|
|
datacolor = datacolor.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 options = {
|
|
series: {
|
|
stack: stack,
|
|
shadowSize: 0.1,
|
|
color: '#ddd'
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
borderWidth:1,
|
|
borderColor: '#000',
|
|
tickColor: '#fff'
|
|
},
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
color: '#000',
|
|
tickSize: intervaltick,
|
|
tickLength: 0
|
|
} ],
|
|
yaxes: [ {
|
|
show: false,
|
|
tickLength: 0
|
|
}],
|
|
legend: {
|
|
show: false
|
|
}
|
|
};
|
|
|
|
var plot = $.plot($('#'+graph_id), datas, options );
|
|
|
|
// 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/2)+'px');
|
|
$('#extra_'+graph_id).css('top',plot.offset().top-extra_height-5+'px');
|
|
$('#extra_'+graph_id).show();
|
|
}
|
|
});
|
|
|
|
$('#'+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, menu, events, event_ids, legend_events, alerts, alert_ids, legend_alerts, yellow_threshold, red_threshold, force_integer, separator, separator2, series_suffix_str) {
|
|
|
|
var threshold = true;
|
|
var thresholded = false;
|
|
|
|
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();
|
|
|
|
for (i = 0; i < values.length; i++) {
|
|
var serie = values[i].split(separator);
|
|
var aux = new Array();
|
|
var critical_min = new Array();
|
|
var warning_min = new Array();
|
|
$.each(serie, function(i, v) {
|
|
aux.push([i, v]);
|
|
if (threshold) {
|
|
critical_min.push([i,red_threshold]);
|
|
warning_min.push([i,yellow_threshold]);
|
|
}
|
|
});
|
|
|
|
switch(serie_types[i]) {
|
|
case 'line':
|
|
default:
|
|
line_show = true;
|
|
points_show = false;
|
|
break;
|
|
case 'points':
|
|
line_show = false;
|
|
points_show = true;
|
|
break;
|
|
}
|
|
|
|
var serie_color;
|
|
if (colors[i] != '') {
|
|
serie_color = colors[i];
|
|
}
|
|
else {
|
|
serie_color = null;
|
|
}
|
|
|
|
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 } }
|
|
//~ ];
|
|
|
|
// 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.9 }, { opacity: 0.9 } ]
|
|
},
|
|
lineWidth: 1,
|
|
steps: false },
|
|
points: { show: points_show }
|
|
});
|
|
|
|
// Prepared to turn series with a checkbox
|
|
// showed[i] = true;
|
|
}
|
|
|
|
var threshold_data = new Array();
|
|
|
|
if (threshold) {
|
|
// Warning and critical treshold
|
|
threshold_data.push({
|
|
id: 'critical_min',
|
|
data: critical_min,
|
|
label: null,
|
|
color: critical,
|
|
lines: { show: true, fill: false, lineWidth:3}
|
|
});
|
|
threshold_data.push({
|
|
id: 'warning_min',
|
|
data: warning_min,
|
|
label: null,
|
|
color: warning,
|
|
lines: { show: true, fill: false, lineWidth:3}
|
|
});
|
|
}
|
|
|
|
// 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;
|
|
var steps = parseInt( count_data / (width/min_tick_pixels));
|
|
|
|
var options = {
|
|
series: {
|
|
stack: stacked,
|
|
shadowSize: 0.1
|
|
},
|
|
crosshair: { mode: 'xy' },
|
|
selection: { mode: 'x', color: '#777' },
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderWidth:1,
|
|
borderColor: '#666',
|
|
tickColor: '#eee',
|
|
markings: markings
|
|
},
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
minTickSize: steps,
|
|
color: '#000'
|
|
} ],
|
|
yaxes: [ {
|
|
tickFormatter: yFormatter,
|
|
color: '#000'
|
|
},
|
|
{
|
|
// align if we are to the right
|
|
alignTicksWithAxis: 1,
|
|
position: 'right'
|
|
|
|
//tickFormatter: dFormatter
|
|
} ]
|
|
,
|
|
legend: {
|
|
position: 'se',
|
|
container: $('#legend_' + graph_id),
|
|
labelFormatter: lFormatter
|
|
}
|
|
};
|
|
|
|
var stack = 0, bars = true, lines = false, steps = false;
|
|
|
|
var plot = $.plot($('#'+graph_id), datas, options);
|
|
|
|
// Adjust the overview plot to the width and position of the main plot
|
|
adjust_left_width_canvas(graph_id, 'overview_'+graph_id);
|
|
|
|
// Adjust linked graph to the width and position of the main plot
|
|
|
|
// Miniplot
|
|
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: '#000'
|
|
} ],
|
|
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), datas,
|
|
$.extend(true, {}, options, {
|
|
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to},
|
|
xaxes: [ {
|
|
tickFormatter: xFormatter,
|
|
minTickSize: new_steps,
|
|
color: '#000'
|
|
} ],
|
|
legend: { show: false }
|
|
}));
|
|
|
|
$('#menu_cancelzoom_' + graph_id)
|
|
.attr('src',homeurl + '/images/zoom_cross.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];
|
|
|
|
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 (legends.length == 0) {
|
|
$('#timestamp_'+graph_id).text(labels[j] + ' (' + parseFloat(y).toFixed(2) + ')');
|
|
}
|
|
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);
|
|
}
|
|
else {
|
|
$('#timestamp_'+graph_id).css('left', timenewpos);
|
|
}
|
|
}
|
|
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()) {
|
|
legends.eq(i).text(label_aux.replace(/=.*/, '= ' + parseFloat(y).toFixed(2) +' '+unit));
|
|
}
|
|
|
|
legends.eq(i).css('font-size',font_size+'pt');
|
|
legends.eq(i).css('color','#000');
|
|
|
|
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 canvaslimit = parseInt(plot.offset().left + plot.width());
|
|
var dataset = plot.getData();
|
|
var timenewpos = parseInt(dataset[0].xaxis.p2c(pos.x)+plot.offset().left);
|
|
var extrasize = parseInt($('#extra_'+graph_id).css('width').split('px')[0]);
|
|
|
|
var left_pos;
|
|
if (extrasize+timenewpos > canvaslimit) {
|
|
left_pos = timenewpos - extrasize - 20;
|
|
}
|
|
else {
|
|
left_pos = timenewpos + 20;
|
|
}
|
|
|
|
var extra_info = '<i>No info to show</i>';
|
|
var extra_show = false;
|
|
|
|
$('#extra_'+graph_id).css('left',left_pos);
|
|
$('#extra_'+graph_id).css('top',plot.offset().top + 25);
|
|
|
|
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) {
|
|
legends.eq(i).text(legends.eq(i).text().replace(/=.*/, ''));
|
|
}
|
|
plot.clearCrosshair();
|
|
overview.clearCrosshair();
|
|
}
|
|
|
|
// Format functions
|
|
function xFormatter(v, axis) {
|
|
if (labels[v] == undefined) {
|
|
return '';
|
|
}
|
|
return '<div style=font-size:'+font_size+'pt>'+labels[v]+'</div>';
|
|
}
|
|
|
|
function yFormatter(v, axis) {
|
|
var formatted = number_format(v,force_integer,unit);
|
|
|
|
return '<div style=font-size:'+font_size+'pt>'+formatted+'</div>';
|
|
}
|
|
|
|
function lFormatter(v, item) {
|
|
return '<div style=color:#000;font-size:'+font_size+'pt>'+v+'</div>';
|
|
// Prepared to turn series with a checkbox
|
|
//return '<div style=color:#000;font-size:'+font_size+'pt><input type="checkbox" id="' + graph_id + '_' + item.id +'" checked="checked" class="check_serie_'+graph_id+'">'+v+'</div>';
|
|
}
|
|
|
|
// Prepared to turn series with a checkbox
|
|
//~ $('.check_serie_'+graph_id).click(function() {
|
|
//~ // Format of the id is graph_3905jf93f03_serie_id
|
|
//~ id_clicked = this.id.split('_')[3];
|
|
//~ // Update the serie clicked
|
|
//~ showed[id_clicked] = this.checked;
|
|
//~ });
|
|
|
|
if (menu) {
|
|
var parent_height;
|
|
$('#menu_overview_'+graph_id).click(function() {
|
|
if ( $('#overview_'+graph_id).css('visibility') == 'hidden' )
|
|
$('#overview_'+graph_id).css('visibility','visible');
|
|
else
|
|
$('#overview_'+graph_id).css('visibility','hidden');
|
|
});
|
|
|
|
$('#menu_threshold_'+graph_id).click(function() {
|
|
datas = new Array();
|
|
|
|
if (thresholded) {
|
|
thresholded = false;
|
|
}
|
|
else {
|
|
$.each(threshold_data, function() {
|
|
datas.push(this);
|
|
});
|
|
thresholded = true;
|
|
}
|
|
|
|
$.each(data_base, function() {
|
|
// Prepared to turning series
|
|
//if(showed[this.id.split('_')[1]]) {
|
|
datas.push(this);
|
|
//}
|
|
});
|
|
|
|
plot = $.plot($('#'+graph_id), datas, options);
|
|
|
|
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;
|
|
});
|
|
|
|
// 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 (legends.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', menu_height+legend_margin_bottom+'px');
|
|
parent_height = parseInt($('#menu_'+graph_id).parent().css('height').split('px')[0]);
|
|
adjust_menu(graph_id, plot, parent_height);
|
|
}
|
|
|
|
if (water_mark) {
|
|
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
|
|
}
|
|
|
|
adjust_menu(graph_id, plot, parent_height);
|
|
}
|
|
|
|
function adjust_menu(graph_id, plot, parent_height) {
|
|
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_between_graph_and_div_graph_container = $('#' + graph_id).offset().top -
|
|
$('#' + graph_id).parent().offset().top;
|
|
$('#menu_' + graph_id)
|
|
.css('top',
|
|
((offset_between_graph_and_div_graph_container - menu_height - 5) + 'px'));
|
|
|
|
$('#legend_' + graph_id).css('width',plot.width());
|
|
|
|
$('#menu_' + graph_id)
|
|
.css('left',plot.width() - $('#menu_'+graph_id).width() + 10);
|
|
$('#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 = parseInt(context.canvas.height - down_ticks_height - 20) - $('#watermark_image_'+graph_id)[0].height;
|
|
|
|
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) {
|
|
adapter_left_margin = $('#'+adapter_id+' .yAxis .tickLabel').css('width');
|
|
|
|
adapted_pix = $('#'+adapted_id).css('width').split('px');
|
|
new_adapted_width = parseInt(adapted_pix[0])-parseInt(adapter_left_margin);
|
|
|
|
$('#'+adapted_id).css('width',new_adapted_width);
|
|
|
|
$('#'+adapted_id).css('margin-left',adapter_left_margin);
|
|
}
|
|
|
|
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) {
|
|
if (force_integer) {
|
|
if (Math.round(number) != number) {
|
|
return '';
|
|
}
|
|
}
|
|
else {
|
|
var decimals = 2;
|
|
var factor = 10 * decimals;
|
|
number = Math.round(number*factor)/factor
|
|
}
|
|
|
|
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 {
|
|
break;
|
|
}
|
|
}
|
|
|
|
return number+' '+shorts[pos]+unit;
|
|
}
|