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); values = values.split(separator2);
var datas = new Array(); var datas = new Array();
@ -141,7 +142,15 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
datas.push({ datas.push({
data: aux, 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 ); var plot = $.plot($('#' + graph_id), datas, options );
// 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; i = 0;
$('#' + graph_id + ' .yAxis .tickLabel').each(function() { $('#' + 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)); 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; pixelPerValue = parseInt(plot.width()) / maxvalue;
inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html())); inCanvasValuePos = parseInt(pixelPerValue *
label_width = ($('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3); ($('#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 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 label fit into the bar just recalculate left position to fit on right side of bar
if (inCanvasValuePos > label_width) { 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++; i++;
}); });
@ -219,17 +247,22 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
pixelPerValue = parseInt(plot.width()) / maxvalue; pixelPerValue = parseInt(plot.width()) / maxvalue;
$('#' + graph_id + ' .yAxis .tickLabel').each(function() { $('#' + graph_id + ' .yAxis .tickLabel').each(function() {
inCanvasValuePos = parseInt(pixelPerValue * ($('#value_'+i+'_'+graph_id).html())); inCanvasValuePos = parseInt(pixelPerValue *
label_width = ($('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3); ($('#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 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 label fit into the bar just recalculate left position to fit on right side of bar
if (inCanvasValuePos > label_width) { 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++; i++;
}); });
}); });
@ -248,21 +281,27 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
return v; return v;
} }
function lFormatter(v, axis) {
return '<div style=color:#000>'+v+'</div>';
}
// Events // Events
$('#' + graph_id).bind('plothover', function (event, pos, item) { $('#' + graph_id).bind('plothover', function (event, pos, item) {
$('.values_' + graph_id).css('font-weight', ''); $('.values_' + graph_id).css('font-weight', '');
if (item != null) { if (item != null) {
index = item.dataIndex; index = item.dataIndex;
$('#value_'+index+'_'+graph_id).css('font-weight', 'bold'); $('#value_' + index + '_' + graph_id)
.css('font-weight', 'bold');
} }
}); });
if (water_mark) { 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'; $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 = ';;::;;'; $separator = ';;::;;';
$separator2 = ':,:,,,:,:'; $separator2 = ':,:,,,:,:';
@ -553,7 +554,8 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
// Javascript code // Javascript code
$return .= "<script type='text/javascript'>"; $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>"; $return .= "</script>";