tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed the bar charts with all values equal to 0. 

(cherry picked from commit 1aa58804f0)
This commit is contained in:
mdtrooper 2014-12-11 13:48:25 +01:00
parent 5fa9e252c0
commit 8a73b90b77
2 changed files with 84 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,7 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
clickable: true clickable: true
} }
}; };
if (width < 400) { if (width < 400) {
conf_pie.legend.labelFormatter = function(label, series) { conf_pie.legend.labelFormatter = function(label, series) {
return label + " (" + series.percent.toFixed(1) + "%)"; return label + " (" + series.percent.toFixed(1) + "%)";
@ -127,12 +127,13 @@ 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();
for(i=0;i<values.length;i++) { for (i = 0; i < values.length; i++) {
var serie = values[i].split(separator); var serie = values[i].split(separator);
var aux = new Array(); var aux = new Array();
$.each(serie.reverse(),function(i,v) { $.each(serie.reverse(),function(i,v) {
@ -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
}
}); });
} }
@ -149,22 +158,22 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
var stack = 0, bars = true, lines = false, steps = false; var stack = 0, bars = true, lines = false, steps = false;
var options = { var options = {
series: { series: {
shadowSize: 0.1 shadowSize: 0.1
}, },
grid: { grid: {
hoverable: true, hoverable: true,
borderWidth:1, borderWidth:1,
borderColor: '#666', borderColor: '#666',
tickColor: '#eee' tickColor: '#eee'
}, },
xaxes: [ { xaxes: [ {
tickFormatter: yFormatter, tickFormatter: yFormatter,
color: '#000' color: '#000'
} ], } ],
yaxes: [ { yaxes: [ {
tickFormatter: xFormatter, tickFormatter: xFormatter,
tickSize: 1, tickSize: 1,
color: '#000' color: '#000'
@ -177,59 +186,83 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
//tickFormatter: dFormatter //tickFormatter: dFormatter
} ] } ]
, ,
legend: { legend: {
show: false show: false
} }
}; };
var plot = $.plot($('#'+graph_id),datas, options ); // 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 // 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() {
tickTop = $(this).css('top').split('px')[0]; tickTop = $(this).css('top').split('px')[0];
tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3); tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight / 2) - 3);
$(this).css('top', tickNewTop+'px'); $(this).css('top', tickNewTop + 'px');
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++;
}); });
// When resize the window, adjust the values // When resize the window, adjust the values
$('#'+graph_id).parent().resize(function () { $('#' + graph_id).parent().resize(function () {
i = 0; i = 0;
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");
} }
} }

14
pandora_console/include/graphs/functions_flot.php
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 = ':,:,,,:,:';
@ -507,15 +508,15 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
$i--; $i--;
foreach ($values as $key => $value) { foreach ($values as $key => $value) {
$jsvar = "data_".$graph_id."_".$key; $jsvar = "data_" . $graph_id . "_" . $key;
if ($multicolor) { if ($multicolor) {
for ($j = count($graph_data) - 1; $j>=0; $j--) { for ($j = count($graph_data) - 1; $j >= 0; $j--) {
if ($j == $i) { if ($j == $i) {
$data[$jsvar.$i][$j] = $value; $data[$jsvar . $i][$j] = $value;
} }
else { else {
$data[$jsvar.$i][$j] = 0; $data[$jsvar . $i][$j] = 0;
} }
} }
} }
@ -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>";