diff --git a/pandora_console/ChangeLog b/pandora_console/ChangeLog index 7e031a58bd..da8d5f76d5 100644 --- a/pandora_console/ChangeLog +++ b/pandora_console/ChangeLog @@ -1,3 +1,23 @@ +2012-03-05 Miguel de Dios + + * 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 * extensions/update_manager/main.php, general/shortcut_bar.php, diff --git a/pandora_console/include/functions_ui.php b/pandora_console/include/functions_ui.php index 44ed1425e7..e8a3eeca46 100644 --- a/pandora_console/include/functions_ui.php +++ b/pandora_console/include/functions_ui.php @@ -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 .= ''; diff --git a/pandora_console/include/graphs/fgraph.php b/pandora_console/include/graphs/fgraph.php index 607fded1a4..fa921d9547 100755 --- a/pandora_console/include/graphs/fgraph.php +++ b/pandora_console/include/graphs/fgraph.php @@ -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'); } diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js index ba28777a08..365dc24dbf 100644 --- a/pandora_console/include/graphs/flot/pandora.flot.js +++ b/pandora_console/include/graphs/flot/pandora.flot.js @@ -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 } })); diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php index 6e67c37a42..92027b13e0 100644 --- a/pandora_console/include/graphs/functions_flot.php +++ b/pandora_console/include/graphs/functions_flot.php @@ -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 ' - - - - - - - - - - - - -'; +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 = ' + + + + + + + + + + '; + $output .= " + + " + ; + + if (!$return) + echo $output; + + return $output; + } +} /////////////////////////////// ////////// AREA GRAPHS //////// @@ -42,29 +80,39 @@ 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; @@ -342,7 +396,9 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) { // Returns a 3D column chart 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; @@ -432,11 +488,13 @@ 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,'; - + // Get a unique identifier to graph $graph_id = uniqid('graph_'); @@ -467,7 +525,7 @@ function flot_slicesbar_graph ($graph_data, $period, $width, $height, $legend, $ $leg_max_length = strlen($l); } } - + $fontsize = 7; $maxticks = (int) ($width / ($fontsize * $leg_max_length)); @@ -490,7 +548,7 @@ function flot_slicesbar_graph ($graph_data, $period, $width, $height, $legend, $ foreach($graph_data as $label => $values) { $labels[] = io_safe_output($label); $i--; - + foreach($values as $key => $value) { $jsvar = "d_".$graph_id."_".$i; if($key == 'data') { @@ -515,23 +573,23 @@ function flot_slicesbar_graph ($graph_data, $period, $width, $height, $legend, $ $datacolor = implode($separator,$datacolor); $legend = io_safe_output(implode($separator,$legend)); $acumulate_data = io_safe_output(implode($separator,$acumulate_data)); - + // Store data series in javascript format $jsvars = ''; $jsseries = array(); $date = get_system_time (); $datelimit = ($date - $period) * 1000; - + $i = 0; $values2 = array(); - + foreach($data as $jsvar => $values) { $values2[] = implode($separator,$values); $i ++; } - + $values = implode($separator2, $values2); // Javascript code @@ -540,34 +598,8 @@ function flot_slicesbar_graph ($graph_data, $period, $width, $height, $legend, $ $return .= "pandoraFlotSlicebar('$graph_id', '$values', '$datacolor', '$labels', '$legend', '$acumulate_data', $intervaltick, false, $max, '$separator', '$separator2')"; $return .= "\n//]]>"; $return .= ""; - + return $return; } ?> - - diff --git a/pandora_console/include/include_graph_dependencies.php b/pandora_console/include/include_graph_dependencies.php index 37a58acd4a..76358e68cf 100644 --- a/pandora_console/include/include_graph_dependencies.php +++ b/pandora_console/include/include_graph_dependencies.php @@ -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'); }