Fixed the bar charts with all values equal to 0.

This commit is contained in:
mdtrooper 2014-12-11 13:48:25 +01:00
parent 2590b732e9
commit 1aa58804f0
2 changed files with 84 additions and 43 deletions

View File

@ -127,7 +127,8 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
}
}
function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_mark, separator, separator2) {
function pandoraFlotHBars(graph_id, values, labels, water_mark,
maxvalue, water_mark, separator, separator2) {
values = values.split(separator2);
var datas = new Array();
@ -141,7 +142,15 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
datas.push({
data: aux,
bars: { show: true, horizontal: true, fillColor: { colors: [ { opacity: 0.7 }, { opacity: 1 } ] }, lineWidth:1, steps:false }
bars: {
show: true,
horizontal: true,
fillColor: {
colors: [ { opacity: 0.7 }, { opacity: 1 } ]
},
lineWidth: 1,
steps: false
}
});
}
@ -182,10 +191,24 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
}
};
// 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['xaxes'][0]['min'] = 0;
// Fixed the values with a lot of decimals in the situation
// with all 0 values.
options['xaxes'][0]['tickDecimals'] = 0;
}
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];
yAxisHeight = $('#' + graph_id + ' .yAxis .tickLabel')
.css('height').split('px')[0];
i = 0;
$('#' + graph_id + ' .yAxis .tickLabel').each(function() {
@ -195,21 +218,26 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
valuesNewTop = parseInt(parseInt(tickTop) - (yAxisHeight));
$('#value_'+i+'_'+graph_id).css('top',parseInt(plot.offset().top) + parseInt(valuesNewTop));
$('#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);
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;
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);
$('#value_' + i + '_' + graph_id)
.css('left', label_left_offset);
i++;
});
@ -219,17 +247,22 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
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);
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;
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);
$('#value_' + i + '_' + graph_id)
.css('left', label_left_offset);
i++;
});
});
@ -248,21 +281,27 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
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');
$('#value_' + index + '_' + graph_id)
.css('font-weight', 'bold');
}
});
if (water_mark) {
set_watermark(graph_id, plot, $('#watermark_image_'+graph_id).attr('src'));
set_watermark(graph_id, plot,
$('#watermark_image_' + graph_id).attr('src'));
}
if (maxvalue == 0) {
// Fixed the position for the graphs with all values in
// bars is 0.
$(".values_" + graph_id).css("left", (plot.offset().left + 5) + "px");
}
}

View File

@ -490,7 +490,8 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
$watermark = 'false';
}
// Set a weird separator to serialize and unserialize passing data from php to javascript
// Set a weird separator to serialize and unserialize passing data
// from php to javascript
$separator = ';;::;;';
$separator2 = ':,:,,,:,:';
@ -553,7 +554,8 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
// Javascript code
$return .= "<script type='text/javascript'>";
$return .= "pandoraFlotHBars('$graph_id', '$values', '$labels', false, $max, '$water_mark', '$separator', '$separator2')";
$return .= "pandoraFlotHBars('$graph_id', '$values', '$labels',
false, $max, '$water_mark', '$separator', '$separator2')";
$return .= "</script>";