'
+ format.push([i,'
'
+ label
+ '
']);
}
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 '
'+text+'
';
+ }
+
if (water_mark) {
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
}
@@ -600,20 +512,30 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
},
xaxis: {
axisLabelUseCanvas: true,
- axisLabelFontSizePixels: 7,
+ axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font',
axisLabelPadding: 0,
ticks: xFormatter,
labelWidth: 130,
+ labelHeight: 50,
},
yaxis: {
axisLabelUseCanvas: true,
- axisLabelFontSizePixels: 7,
+ axisLabelFontSizePixels: font_size,
axisLabelFontFamily: font+'Font',
axisLabelPadding: 100,
autoscaleMargin: 0.02,
tickFormatter: function (v, axis) {
- return v ;
+ 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 '
'+text+'
';
}
},
legend: {
@@ -630,82 +552,43 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
}
};
+ 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");
- $('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true });
- // 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];
-
- //plot.getPlaceholder().onload = function(){pruebas};
- //~ i = 0;
- //~ $('#'+graph_id+' .xAxis .tickLabel').each(function() {
- //~ $(this).css('display','none');
- //~ $(this).addClass("legend_"+i);
- //~ i++;
- //~ 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);
- //~ });
-
- // 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++;
- //~ });
- //~ });
-
-
-
- $('#'+graph_id+' .yAxis .tickLabel').each(function() {
- label = parseFloat($(this).text());
- 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";
-
- $(this).text(text);
- });
+ //~ $('#' + graph_id).find('div.legend-tooltip').tooltip({ track: true });
$('#'+graph_id+' .xAxis .tickLabel')
.css('transform', 'rotate(-45deg)')
+ .css('max-width','100px')
.find('div')
.css('position', 'relative')
.css('top', '+10px')
- .css('left', '-20px');
-
+ .css('left', '-30px');
+ 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, 35);
+ 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,
- '
'
+ '
'
+ label
+ '
']);
}
@@ -713,22 +596,13 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
}
function yFormatter(v, axis) {
- return v;
+ return '
'+v+'
';
}
function lFormatter(v, axis) {
- return '
'+v+'
';
+ return '
'+v+'
';
}
-
- // 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'));
}
@@ -857,7 +731,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
force_integer, separator, separator2,
yellow_up, red_up, yellow_inverse, red_inverse,
series_suffix_str, dashboard, vconsole, xaxisname,background_color,legend_color) {
-
+
var threshold = true;
var thresholded = false;
font = font.split("/").pop().split(".").shift();
@@ -1581,7 +1455,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
// 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) ){
+ if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
}
else {
$('#'+graph_id).css('height', hDiff);
@@ -1887,18 +1761,18 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
if (labels[v] == undefined) {
return '';
}
- return '
'+labels[v]+'
';
+ return '
'+labels[v]+'
';
}
function yFormatter(v, axis) {
axis.datamin = 0;
var formatted = number_format(v,force_integer,unit);
- return '
'+formatted+'
';
+ return '
'+formatted+'
';
}
function lFormatter(v, item) {
- return '
'+v+'
';
+ return '
'+v+'
';
// Prepared to turn series with a checkbox
//return '
'+v+'
';
}
@@ -2011,7 +1885,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
$('#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);
+ adjust_menu(graph_id, plot, parent_height, width);
}
if (!dashboard) {
@@ -2071,6 +1945,7 @@ function set_watermark(graph_id, plot, watermark_src) {
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;
@@ -2270,5 +2145,6 @@ function add_threshold (data_base, threshold_data, y_min, y_max,
function reduceText (text, maxLength) {
if (text.length <= maxLength) return text
var firstSlideEnd = parseInt((maxLength - 3) / 2);
- return text.substr(0, firstSlideEnd) + '...' + text.substr(-firstSlideEnd - 3);
+ var str_cut = text.substr(0, firstSlideEnd);
+ return str_cut + '...' + text.substr(-firstSlideEnd - 3);
}
diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php
index 545d51806e..2ef70ca19e 100644
--- a/pandora_console/include/graphs/functions_flot.php
+++ b/pandora_console/include/graphs/functions_flot.php
@@ -205,7 +205,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend,
// Parent layer
$return = "
";
// Set some containers to legend, graph, timestamp tooltip, etc.
- $return .= "
";
+ $return .= "
";
if (!empty($threshold_data)) {
$yellow_up = $threshold_data['yellow_up'];
@@ -241,7 +241,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend,
$nbuttons++;
}
$menu_width = 25 * $nbuttons + 15;
- if ( $dashboard == false AND $vconsole == false) {
+ if ( if ( $dashboard == false AND $vconsole == false) {) {
$return .= "