tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-29 08:45:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed labels of vertical or horizontal bars. Tiquet: #3180

Browse Source 
(cherry picked from commit 436127da415ce001e0ba42261680da48aacc71db)
This commit is contained in:
m-lopez-f 2016-01-25 15:21:12 +01:00
parent 10a46fcd74
commit 6de10bdb1b
1 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
pandora_console/include/graphs/flot/pandora.flot.js
View File

@ -323,7 +323,7 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
axisLabelFontSizePixels: 12, axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial', axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3, axisLabelPadding: 3,
ticks: labels_total, ticks: yFormatter,
tickSize: 1, tickSize: 1,
color: '#000', color: '#000',
}, },
@ -352,12 +352,12 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
//yAxisHeight = $('#' + graph_id + ' .yAxis .tickLabel') //yAxisHeight = $('#' + graph_id + ' .yAxis .tickLabel')
//.css('height').split('px')[0]; //.css('height').split('px')[0];
i = 0; //~ i = 0;
$('#' + graph_id + ' .yAxis .tickLabel').each(function() { //~ $('#' + graph_id + ' .yAxis .tickLabel').each(function() {
$(this).css('display','none'); //~ $(this).css('display','none');
$(this).addClass("legend_"+i); //~ $(this).addClass("legend_"+i);
i++; //~ i++;
}); //~ });
$('#' + graph_id + ' .xAxis .tickLabel').each(function() { $('#' + graph_id + ' .xAxis .tickLabel').each(function() {
/* /*
@ -465,6 +465,13 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
$(".values_" + graph_id).css("left", (plot.offset().left + 5) + "px"); $(".values_" + graph_id).css("left", (plot.offset().left + 5) + "px");
} }
* */ * */
function yFormatter(v, axis) {
format = new Array();
for (i = 0; i < labels_total.length; i++) {
format.push([i,'<div style="visibility: hidden;" class="legend_'+i+'">'+labels_total[i][1]+'</div>']);
}
return format;
}
} }
var previousPoint = null, previousLabel = null; var previousPoint = null, previousLabel = null;
@ -473,7 +480,7 @@ $.fn.HUseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) { $(this).bind("plothover", function (event, pos, item) {
if (item) { if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.seriesIndex)) { if ((previousLabel != item.series.label) || (previousPoint != item.seriesIndex)) {
$('.legend_'+previousPoint).hide(); $('.legend_'+previousPoint).css("visibility","hidden");
previousPoint = item.seriesIndex; previousPoint = item.seriesIndex;
previousLabel = item.series.label; previousLabel = item.series.label;
$("#tooltip").remove(); $("#tooltip").remove();
@ -482,15 +489,15 @@ $.fn.HUseTooltip = function () {
var y = item.datapoint[1]; var y = item.datapoint[1];
var color = item.series.color; var color = item.series.color;
$('.legend_'+y).show(); $('.legend_'+y).css("visibility","");
showTooltip(item.pageX, showTooltip(item.pageX,
item.pageY, item.pageY,
color, color,
"<strong>" + item.series.yaxis.ticks[y].label + "</strong>: <strong>" + x + "</strong>"); "<strong>" + $('.legend_'+x).text() + "</strong>: <strong>" + x + "</strong>");
} }
} else { } else {
$("#tooltip").remove(); $("#tooltip").remove();
$('.legend_'+previousPoint).hide(); $('.legend_'+previousPoint).css("visibility","hidden");
previousPoint = null; previousPoint = null;
} }
}); });
@ -499,7 +506,7 @@ $.fn.VUseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) { $(this).bind("plothover", function (event, pos, item) {
if (item) { if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.seriesIndex)) { if ((previousLabel != item.series.label) || (previousPoint != item.seriesIndex)) {
$('.legend_'+previousPoint).hide(); $('.legend_'+previousPoint).css("visibility","hidden");
previousPoint = item.seriesIndex; previousPoint = item.seriesIndex;
previousLabel = item.series.label; previousLabel = item.series.label;
@ -509,15 +516,15 @@ $.fn.VUseTooltip = function () {
var y = item.datapoint[1]; var y = item.datapoint[1];
var color = item.series.color; var color = item.series.color;
$('.legend_'+x).show(); $('.legend_'+x).css("visibility","");
showTooltip(item.pageX, showTooltip(item.pageX,
item.pageY, item.pageY,
color, color,
"<strong>" + item.series.xaxis.ticks[x].label + "</strong>" + " : <strong>" + y + "</strong>"); "<strong>" + $('.legend_'+x).text() + "</strong>" + " : <strong>" + y + "</strong>");
} }
} else { } else {
$("#tooltip").remove(); $("#tooltip").remove();
$('.legend_'+previousPoint).hide(); $('.legend_'+previousPoint).css("visibility","hidden");
previousPoint = null; previousPoint = null;
} }
}); });
@ -572,48 +579,47 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
var stack = 0, bars = true, lines = false, steps = false; var stack = 0, bars = true, lines = false, steps = false;
var options = { var options = {
series: { series: {
bars: { bars: {
show: true, show: true,
lineWidth: 1, lineWidth: 1,
fill: 1, fill: 1,
align: "center", align: "center",
barWidth: 1 barWidth: 1
} }
}, },
xaxis: { xaxis: {
axisLabelUseCanvas: true, axisLabelUseCanvas: true,
axisLabelFontSizePixels: 7, axisLabelFontSizePixels: 7,
axisLabelFontFamily: 'Verdana, Arial', axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 0, axisLabelPadding: 0,
ticks: labels_total, ticks: xFormatter,
labelWidth: 30, labelWidth: 130,
}, },
yaxis: { yaxis: {
axisLabelUseCanvas: true, axisLabelUseCanvas: true,
axisLabelFontSizePixels: 7, axisLabelFontSizePixels: 7,
axisLabelFontFamily: 'Verdana, Arial', axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 100, axisLabelPadding: 100,
autoscaleMargin: 0.02, autoscaleMargin: 0.02,
tickFormatter: function (v, axis) { tickFormatter: function (v, axis) {
return v ; return v ;
} }
}, },
legend: { legend: {
noColumns: 100, noColumns: 100,
labelBoxBorderColor: "#000000", labelBoxBorderColor: "#000000",
margin: 100, margin: 100,
container: true, container: true,
sorted: false sorted: false
},
}, grid: {
grid: { hoverable: true,
hoverable: true, borderWidth: 1,
borderWidth: 1, backgroundColor: { colors: ["#FFF", "#FFF"] }
backgroundColor: { colors: ["#FFF", "#FFF"] } }
} };
};
var plot = $.plot($('#'+graph_id),datas, options ); var plot = $.plot($('#'+graph_id),datas, options );
$('#' + graph_id).VUseTooltip(); $('#' + graph_id).VUseTooltip();
@ -622,11 +628,12 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
// Adjust the top of yaxis tick to set it in the middle of the bars // 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]; //yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
i = 0; //plot.getPlaceholder().onload = function(){pruebas};
$('#'+graph_id+' .xAxis .tickLabel').each(function() { //~ i = 0;
$(this).css('display','none'); //~ $('#'+graph_id+' .xAxis .tickLabel').each(function() {
$(this).addClass("legend_"+i); //~ $(this).css('display','none');
i++; //~ $(this).addClass("legend_"+i);
//~ i++;
//~ tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3); //~ tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3);
//~ $(this).css('top', tickNewTop+'px'); //~ $(this).css('top', tickNewTop+'px');
//~ //~
@ -639,7 +646,7 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
//~ inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html())); //~ 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); //~ $('#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 // When resize the window, adjust the values
//~ $('#'+graph_id).parent().resize(function () { //~ $('#'+graph_id).parent().resize(function () {
@ -670,12 +677,11 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
}); });
// Format functions // Format functions
function xFormatter(v, axis) { function xFormatter(v, axis) {
if (labels[v] != undefined) { format = new Array();
return labels[v]; for (i = 0; i < labels_total.length; i++) {
} format.push([i,'<div style="visibility: hidden;" class="legend_'+i+'">'+labels_total[i][1]+'</div>']);
else {
return '';
} }
return format;
} }
function yFormatter(v, axis) { function yFormatter(v, axis) {