2012-03-05 Miguel de Dios <miguel.dedios@artica.es>

* pandora_console/include/graphs/functions_flot.php: added the function
	"include_javascript_dependencies_flot_graph" for to do more carefuly the
	include javascripts and javascript hardcore wrote code (once time) and added
	call into all functions this function. And into the function
	"flot_hcolumn_chart " fixed the init var $return. And removed hack to use
	two versions of jquery.
	
	* pandora_console/include/graphs/flot/pandora.flot.js: removed the hack to
	use two versions of jquery.
	
	* pandora_console/include/functions_ui.php: into the function
	"ui_process_page_head" call the "include_javascript_dependencies_flot_graph"
	it is enabled the flash_chart in $config.
	
	* pandora_console/include/graphs/fgraph.php,
	pandora_console/include/include_graph_dependencies.php: removed old
	include for old flash chart library.



git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@5695 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
This commit is contained in:
mdtrooper 2012-03-05 19:25:02 +00:00
parent c27b9c6a22
commit 912f5ff9e3
6 changed files with 141 additions and 85 deletions

View File

@ -1,3 +1,23 @@
2012-03-05 Miguel de Dios <miguel.dedios@artica.es>
* pandora_console/include/graphs/functions_flot.php: added the function
"include_javascript_dependencies_flot_graph" for to do more carefuly the
include javascripts and javascript hardcore wrote code (once time) and added
call into all functions this function. And into the function
"flot_hcolumn_chart " fixed the init var $return. And removed hack to use
two versions of jquery.
* pandora_console/include/graphs/flot/pandora.flot.js: removed the hack to
use two versions of jquery.
* pandora_console/include/functions_ui.php: into the function
"ui_process_page_head" call the "include_javascript_dependencies_flot_graph"
it is enabled the flash_chart in $config.
* pandora_console/include/graphs/fgraph.php,
pandora_console/include/include_graph_dependencies.php: removed old
include for old flash chart library.
2012-03-05 Miguel de Dios <miguel.dedios@artica.es>
* extensions/update_manager/main.php, general/shortcut_bar.php,

View File

@ -1055,6 +1055,13 @@ function ui_process_page_head ($string, $bitfield) {
}
if ($config['flash_charts']) {
//Include the javascript for the js charts library
include_once('include/graphs/functions_flot.php');
$output .= include_javascript_dependencies_flot_graph(true);
}
$output .= '<!--[if gte IE 6]>
<link rel="stylesheet" href="include/styles/ie.css" type="text/css"/>
<![endif]-->';

View File

@ -70,7 +70,6 @@ if (!empty($graph_type)) {
include_once($homeurl . 'include/functions.php');
include_once($homeurl . 'include/functions_html.php');
include_once($homeurl . 'include/graphs/functions_fsgraph.php');
include_once($homeurl . 'include/graphs/functions_gd.php');
include_once($homeurl . 'include/graphs/functions_utils.php');
}

View File

@ -33,7 +33,7 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
};
}
var plot = $jq161.plot($('#'+graph_id), data,
var plot = $.plot($('#'+graph_id), data,
{
series: {
pie: {
@ -59,9 +59,9 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
});
// Events
$jq161('#'+graph_id).bind('plothover', pieHover);
$jq161('#'+graph_id).bind('plotclick', pieClick);
$jq161('#'+graph_id).bind('mouseout',resetInteractivity);
$('#'+graph_id).bind('plothover', pieHover);
$('#'+graph_id).bind('plotclick', pieClick);
$('#'+graph_id).bind('mouseout',resetInteractivity);
function pieHover(event, pos, obj)
{
@ -148,7 +148,7 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
}
};
var plot = $jq161.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
yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
@ -172,7 +172,7 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
});
// When resize the window, adjust the values
$jq161('#'+graph_id).parent().resize(function () {
$('#'+graph_id).parent().resize(function () {
i = 0;
pixelPerValue = parseInt(plot.width()) / maxvalue;
@ -203,7 +203,7 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark, maxvalue, water_
}
// Events
$jq161('#'+graph_id).bind('plothover', function (event, pos, item) {
$('#'+graph_id).bind('plothover', function (event, pos, item) {
$('.values_'+graph_id).css('font-weight', '');
if(item != null) {
index = item.dataIndex;
@ -278,7 +278,7 @@ function pandoraFlotVBars(graph_id, values, labels, water_mark, maxvalue, water_
}
};
var plot = $jq161.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
yAxisHeight = $('#'+graph_id+' .yAxis .tickLabel').css('height').split('px')[0];
@ -302,7 +302,7 @@ function pandoraFlotVBars(graph_id, values, labels, water_mark, maxvalue, water_
//~ });
// When resize the window, adjust the values
//~ $jq161('#'+graph_id).parent().resize(function () {
//~ $('#'+graph_id).parent().resize(function () {
//~ i = 0;
//~ pixelPerValue = parseInt(plot.width()) / maxvalue;
//~
@ -333,7 +333,7 @@ function pandoraFlotVBars(graph_id, values, labels, water_mark, maxvalue, water_
}
// Events
//~ $jq161('#'+graph_id).bind('plothover', function (event, pos, item) {
//~ $('#'+graph_id).bind('plothover', function (event, pos, item) {
//~ $('.values_'+graph_id).css('font-weight', '');
//~ if(item != null) {
//~ index = item.dataIndex;
@ -405,7 +405,7 @@ function pandoraFlotSlicebar(graph_id, values, datacolor, labels, legend, acumul
}
};
var plot = $jq161.plot($('#'+graph_id), datas, options );
var plot = $.plot($('#'+graph_id), datas, options );
// Format functions
function xFormatter(v, axis) {
@ -603,10 +603,9 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
labelFormatter: lFormatter
}
};
var stack = 0, bars = true, lines = false, steps = false;
var plot = $jq161.plot($('#'+graph_id), datas, options );
var plot = $.plot($('#'+graph_id), datas, options );
// Adjust the overview plot to the width and position of the main plot
yAxisWidth = $('#'+graph_id+' .yAxis .tickLabel').css('width');
@ -619,7 +618,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
$('#overview_'+graph_id).css('margin-left',yAxisWidth);
// Miniplot
var overview = $jq161.plot($('#overview_'+graph_id),datas, {
var overview = $.plot($('#overview_'+graph_id),datas, {
series: {
stack: stacked,
lines: { show: true, lineWidth: 1 },
@ -640,7 +639,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
// Connection between plot and miniplot
$jq161('#'+graph_id).bind('plotselected', function (event, ranges) {
$('#'+graph_id).bind('plotselected', function (event, ranges) {
// do the zooming
dataInSelection = ranges.xaxis.to - ranges.xaxis.from;
dataInPlot = plot.getData()[0].data.length;
@ -649,8 +648,8 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
new_mts = parseInt(factor*mts);
plot = $jq161.plot($('#'+graph_id), datas,
$jq161.extend(true, {}, options, {
plot = $.plot($('#'+graph_id), datas,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to},
xaxes: [ {
tickFormatter: xFormatter,
@ -667,7 +666,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
overview.setSelection(ranges, true);
});
$jq161('#overview_'+graph_id).bind('plotselected', function (event, ranges) {
$('#overview_'+graph_id).bind('plotselected', function (event, ranges) {
plot.setSelection(ranges);
});
@ -712,7 +711,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
var y = series.data[j][1];
if(currentRanges == null || (currentRanges.xaxis.from < j && j < currentRanges.xaxis.to)) {
$jq161('#timestamp_'+graph_id).show();
$('#timestamp_'+graph_id).show();
if(width < 400) {
$('#timestamp_'+graph_id).text(labels[j] + ' (' + parseFloat(y).toFixed(2) + ')');
}
@ -740,7 +739,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
}
}
else {
$jq161('#timestamp_'+graph_id).hide();
$('#timestamp_'+graph_id).hide();
}
var label_aux = series.label + ' = ';
@ -757,7 +756,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
}
// Events
$jq161('#'+graph_id).bind('plothover', function (event, pos, item) {
$('#'+graph_id).bind('plothover', function (event, pos, item) {
overview.setCrosshair({ x: pos.x, y: 0 });
currentPlot = plot;
latestPosition = pos;
@ -767,7 +766,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
});
$jq161('#'+graph_id).bind("plotclick", function (event, pos, item) {
$('#'+graph_id).bind("plotclick", function (event, pos, item) {
plot.unhighlight();
if (item) {
plot.unhighlight();
@ -811,7 +810,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
}
});
$jq161('#overview_'+graph_id).bind('plothover', function (event, pos, item) {
$('#overview_'+graph_id).bind('plothover', function (event, pos, item) {
plot.setCrosshair({ x: pos.x, y: 0 });
currentPlot = overview;
latestPosition = pos;
@ -820,8 +819,8 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
}
});
$jq161('#'+graph_id).bind('mouseout',resetInteractivity);
$jq161('#overview_'+graph_id).bind('mouseout',resetInteractivity);
$('#'+graph_id).bind('mouseout',resetInteractivity);
$('#overview_'+graph_id).bind('mouseout',resetInteractivity);
// Reset interactivity styles
function resetInteractivity() {
@ -857,8 +856,8 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
$('#menu_cancelzoom_'+graph_id).click(function() {
// cancel the zooming
plot = $jq161.plot($('#'+graph_id), datas,
$jq161.extend(true, {}, options, {
plot = $.plot($('#'+graph_id), datas,
$.extend(true, {}, options, {
xaxis: { min: 0, max: max_x },
legend: { show: false }
}));

View File

@ -17,24 +17,62 @@
global $config;
// NOTE: jquery.flot.threshold is not te original file. Is patched to allow multiple thresholds and filled area
echo '
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var $jq161 = jQuery.noConflict();
</script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.pie.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.crosshair.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.stack.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.selection.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.resize.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.threshold.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.symbol.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/pandora.flot.js"></script>
function include_javascript_dependencies_flot_graph($return = false) {
global $config;
';
static $is_include_javascript = false;
if (!$is_include_javascript) {
$is_include_javascript = true;
// NOTE: jquery.flot.threshold is not te original file. Is patched to allow multiple thresholds and filled area
$output = '
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.pie.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.crosshair.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.stack.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.selection.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.resize.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.threshold.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/jquery.flot.symbol.min.js"></script>
<script language="javascript" type="text/javascript" src="'. $config['homeurl'] . '/include/graphs/flot/pandora.flot.js"></script>
';
$output .= "
<script type='text/javascript'>
function pieHover(event, pos, obj)
{
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
$('#hover').html('<span style=\'font-weight: bold; color: '+obj.series.color+'\'>'+obj.series.label+' ('+percent+'%)</span>');
$('.legendLabel').each(function() {
if($(this).html() == obj.series.label) {
$(this).css('font-weight','bold');
}
else {
$(this).css('font-weight','');
}
});
}
function pieClick(event, pos, obj)
{
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
alert(''+obj.series.label+': '+percent+'%');
}
</script>
"
;
if (!$return)
echo $output;
return $output;
}
}
///////////////////////////////
////////// AREA GRAPHS ////////
@ -42,30 +80,40 @@ echo '
function flot_area_stacked_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl = '', $unit = '', $water_mark = '', $serie_types = array(), $chart_extra_data = array()) {
global $config;
include_javascript_dependencies_flot_graph();
return flot_area_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl, $unit, 'area_stacked', $water_mark, $serie_types, $chart_extra_data);
}
function flot_area_simple_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl = '', $unit = '', $water_mark = '', $serie_types = array(), $chart_extra_data = array()) {
global $config;
include_javascript_dependencies_flot_graph();
return flot_area_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl, $unit, 'area_simple', $water_mark, $serie_types, $chart_extra_data);
}
function flot_line_stacked_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl = '', $unit = '', $water_mark = '', $serie_types = array(), $chart_extra_data = array()) {
global $config;
include_javascript_dependencies_flot_graph();
return flot_area_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl, $unit, 'line_stacked', $water_mark, $serie_types, $chart_extra_data);
}
function flot_line_simple_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl = '', $unit = '', $water_mark = '', $serie_types = array(), $chart_extra_data = array()) {
global $config;
include_javascript_dependencies_flot_graph();
return flot_area_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl, $unit, 'line_simple', $water_mark, $serie_types, $chart_extra_data);
}
function flot_area_graph($chart_data, $width, $height, $color, $legend, $long_index, $homeurl, $unit, $type, $water_mark, $serie_types, $chart_extra_data) {
global $config;
include_javascript_dependencies_flot_graph();
$menu = true;
$font_size = '7';
@ -216,8 +264,10 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend, $long_in
// Prints a FLOT pie chart
function flot_pie_chart ($values, $labels, $width, $height, $water_mark, $font = '', $font_size = 8) {
include_javascript_dependencies_flot_graph();
$series = sizeof($values);
if (($series != sizeof ($labels)) || ($series == 0) ){
if (($series != sizeof ($labels)) || ($series == 0) ) {
return;
}
@ -251,6 +301,10 @@ function flot_pie_chart ($values, $labels, $width, $height, $water_mark, $font =
function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
global $config;
include_javascript_dependencies_flot_graph();
$return = '';
$stacked_str = '';
$multicolor = true;
@ -343,6 +397,8 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
function flot_vcolumn_chart ($graph_data, $width, $height, $water_mark, $homedir, $reduce_data_columns) {
global $config;
include_javascript_dependencies_flot_graph();
$stacked_str = '';
$multicolor = false;
@ -433,6 +489,8 @@ function flot_vcolumn_chart ($graph_data, $width, $height, $water_mark, $homedir
function flot_slicesbar_graph ($graph_data, $period, $width, $height, $legend, $colors, $fontpath, $round_corner, $homeurl, $watermark = '') {
global $config;
include_javascript_dependencies_flot_graph();
$height+= 20;
$stacked_str = 'stack: stack,';
@ -545,29 +603,3 @@ function flot_slicesbar_graph ($graph_data, $period, $width, $height, $legend, $
}
?>
<script type="text/javascript">
function pieHover(event, pos, obj)
{
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
$(".legendLabel").each(function() {
if($(this).html() == obj.series.label) {
$(this).css('font-weight','bold');
}
else {
$(this).css('font-weight','');
}
});
}
function pieClick(event, pos, obj)
{
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
alert(''+obj.series.label+': '+percent+'%');
}
</script>

View File

@ -29,7 +29,6 @@
if($config['flash_charts'] && !defined('AJAX') && !get_parameter('static_graph',0)) {
include_once($homeurl . 'include/graphs/functions_flot.php');
}
include_once($homeurl . 'include/graphs/functions_fsgraph.php');
include_once($homeurl . 'include/graphs/functions_gd.php');
include_once($homeurl . 'include/graphs/functions_utils.php');
}