From 2c4a3a8a59ab24b6add1fe908380fa66ca6bcb41 Mon Sep 17 00:00:00 2001
From: m-lopez-f <miguel.lopez@artica.es>
Date: Wed, 4 Nov 2015 17:42:45 +0100
Subject: [PATCH] Add new custom graphs and fixed others graphs.

New graphs:
	Bullet Chart
	Vertical Bars and Horizontal
	Pie
	Gauges

(cherry picked from commit c72f024610d08a5c23e004fed785cde9d3fb56cb)
---
 .../reporting/graph_builder.graph_editor.php  |  15 +
 .../godmode/reporting/graph_builder.main.php  |  36 +-
 .../godmode/reporting/graph_builder.php       |   8 +
 pandora_console/include/constants.php         |   5 +
 .../include/functions_custom_graphs.php       |   9 +-
 pandora_console/include/functions_graph.php   | 162 +++++++-
 .../include/functions_reporting.php           |   3 +-
 pandora_console/include/graphs/bullet.js      | 241 +++++++++++
 pandora_console/include/graphs/fgraph.php     |  77 +++-
 .../include/graphs/flot/pandora.flot.js       | 380 +++++++++++++-----
 .../include/graphs/functions_d3.php           | 133 ++++++
 .../include/graphs/functions_flot.php         | 140 ++++---
 pandora_console/include/graphs/pandora.d3.js  | 374 +++++++++++++++++
 .../operation/reporting/graph_viewer.php      |  21 +-
 14 files changed, 1438 insertions(+), 166 deletions(-)
 create mode 100644 pandora_console/include/graphs/bullet.js

diff --git a/pandora_console/godmode/reporting/graph_builder.graph_editor.php b/pandora_console/godmode/reporting/graph_builder.graph_editor.php
index de687ffefc..cc1f8875b1 100644
--- a/pandora_console/godmode/reporting/graph_builder.graph_editor.php
+++ b/pandora_console/godmode/reporting/graph_builder.graph_editor.php
@@ -50,6 +50,7 @@ if ($editGraph) {
 	$module_array = array();
 	$weight_array = array();
 	$agent_array = array();
+	$label_array = array();
 	
 	if($graphRows === false) {
 			$graphRows = array();
@@ -59,6 +60,7 @@ if ($editGraph) {
 		$idgs_array[] = $graphRow['id_gs'];
 		$module_array[] = $graphRow['id_agent_module'];
 		$weight_array[] = $graphRow['weight'];
+		$label_array[] = $graphRow['label'];
 		$agent_array[] = $graphRow['agent_name'];
 	}
 	
@@ -78,6 +80,7 @@ if (count($module_array) > 0) {
 	echo "<tr>
 	<th>".__('Agent')."</th>
 	<th>".__('Module')."</th>
+	<th>".__('Label')."</th>
 	<th>".__('Weight')."</th>
 	<th>".__('Delete')."</th>";
 	$color = 0;
@@ -95,6 +98,18 @@ if (count($module_array) > 0) {
 		echo "<tr><td class='$tdcolor'>" . $agent_array[$a] . "</td>";
 		echo "<td class='$tdcolor'>";
 		echo modules_get_agentmodule_name ($module_array[$a])."</td>";
+		
+		echo "<td class='$tdcolor' align=''>";
+		echo "<table><tr>";
+
+		echo "<form method='post' action='index.php?sec=reporting&sec2=godmode/reporting/graph_builder&edit_graph=1&tab=graph_editor&change_label=1&id=". $id_graph ."&graph=" . $idgs_array[$a] . "'>";
+		html_print_input_text ('label', $label_array[$a], '', 20, 10, false, false);
+		html_print_submit_button ('Ok', 'btn', false, '', false);
+		echo "</form>";
+		
+		echo "</tr></table>";
+		echo "</td>";
+		
 		echo "<td class='$tdcolor' align=''>";
 		echo "<table><tr>";
 
diff --git a/pandora_console/godmode/reporting/graph_builder.main.php b/pandora_console/godmode/reporting/graph_builder.main.php
index e38725f9ff..cd6ada0fa1 100644
--- a/pandora_console/godmode/reporting/graph_builder.main.php
+++ b/pandora_console/godmode/reporting/graph_builder.main.php
@@ -113,13 +113,18 @@ echo "<td class='datos2' colspan=3><textarea name='description' style='height:45
 if ($edit_graph) {
 	echo $graphInTgraph['description'];
 }
+
 echo "</textarea>";
 echo "</td></tr>";
+if ($stacked == CUSTOM_GRAPH_GAUGE)
+	$hidden = ' style="display:none;" ';
+else
+	$hidden = '';
 echo "<tr>";
-echo "<td class='datos'>";
+echo "<td class='datos stacked' $hidden>";
 echo "<b>".__('Width')."</b></td>";
 echo "<td class='datos'>";
-echo "<input type='text' name='width' value='$width' size=6></td>";
+echo "<input type='text' name='width' value='$width' $hidden size=6></td>";
 echo "<td class='datos2'>";
 echo "<b>".__('Height')."</b></td>";
 echo "<td class='datos2'>";
@@ -131,7 +136,7 @@ echo "<b>".__('Period')."</b></td>";
 echo "<td class='datos'>";
 html_print_extended_select_for_time ('period', $period, '', '', '0', 10);
 echo "</td><td class='datos2'>";
-echo "<b>".__('Stacked')."</b></td>";
+echo "<b>".__('Type of graph')."</b></td>";
 echo "<td class='datos2'>";
 
 include_once($config["homedir"] . "/include/functions_graph.php");
@@ -140,7 +145,13 @@ $stackeds = array(
 	CUSTOM_GRAPH_AREA => __('Area'),
 	CUSTOM_GRAPH_STACKED_AREA => __('Stacked area'),
 	CUSTOM_GRAPH_LINE => __('Line'),
-	CUSTOM_GRAPH_STACKED_LINE => __('Stacked line'));
+	CUSTOM_GRAPH_STACKED_LINE => __('Stacked line'),
+	CUSTOM_GRAPH_BULLET_CHART => __('Bullet chart'),
+	CUSTOM_GRAPH_GAUGE => __('Gauge'),
+	CUSTOM_GRAPH_HBARS => __('Horizontal bars'),
+	CUSTOM_GRAPH_VBARS => __('Vertical bars'),
+	CUSTOM_GRAPH_PIE => __('Pie')
+	);
 html_print_select ($stackeds, 'stacked', $stacked);
 echo "</td>";
 
@@ -153,3 +164,20 @@ else {
 	echo "<div style='width:100%'><input style='float:right;' type=submit name='store' class='sub next' value='".__('Create')."'></div>";
 }
 echo "</form>";
+
+
+echo '<script type="text/javascript">
+	$("#stacked").change(function(){
+		console.log($(this).val());
+		if ( $(this).val() == '. CUSTOM_GRAPH_GAUGE .') {
+			$(".stacked").hide();
+			$("input[name=\'width\']").hide();
+		}
+		else {
+			$(".stacked").show();
+			$("input[name=\'width\']").show();
+		}
+	});
+
+</script>';
+?>
\ No newline at end of file
diff --git a/pandora_console/godmode/reporting/graph_builder.php b/pandora_console/godmode/reporting/graph_builder.php
index 8a199d7c3f..e0a713d155 100644
--- a/pandora_console/godmode/reporting/graph_builder.php
+++ b/pandora_console/godmode/reporting/graph_builder.php
@@ -62,6 +62,7 @@ $active_tab = get_parameter('tab', 'main');
 $add_graph = (bool) get_parameter('add_graph', false);
 $update_graph = (bool) get_parameter('update_graph', false);
 $change_weight = (bool) get_parameter('change_weight', false);
+$change_label = (bool) get_parameter('change_label', false);
 $id_graph = (int) get_parameter('id', 0);
 
 if ($add_graph) {
@@ -173,6 +174,13 @@ if ($change_weight) {
 		array('weight' => $weight), 
 		array('id_gs' => $id_gs));
 }
+if ($change_label) {
+	$label = get_parameter ('label');
+	$id_gs = get_parameter ('graph');
+	db_process_sql_update('tgraph_source', 
+		array('label' => $label), 
+		array('id_gs' => $id_gs));
+}
 
 if ($edit_graph) {
 	$buttons = array(
diff --git a/pandora_console/include/constants.php b/pandora_console/include/constants.php
index 2842400503..49aa75e2ab 100644
--- a/pandora_console/include/constants.php
+++ b/pandora_console/include/constants.php
@@ -423,6 +423,11 @@ define("CUSTOM_GRAPH_AREA",			0);
 define("CUSTOM_GRAPH_STACKED_AREA",	1);
 define("CUSTOM_GRAPH_LINE",			2);
 define("CUSTOM_GRAPH_STACKED_LINE",	3);
+define("CUSTOM_GRAPH_BULLET_CHART",	4);
+define("CUSTOM_GRAPH_GAUGE",	5);
+define("CUSTOM_GRAPH_HBARS",	6);
+define("CUSTOM_GRAPH_VBARS",	7);
+define("CUSTOM_GRAPH_PIE",	8);
 
 /* COLLECTIONS */
 define("COLLECTION_PENDING_APPLY",			0);
diff --git a/pandora_console/include/functions_custom_graphs.php b/pandora_console/include/functions_custom_graphs.php
index e748f24e5a..5d82f997ac 100644
--- a/pandora_console/include/functions_custom_graphs.php
+++ b/pandora_console/include/functions_custom_graphs.php
@@ -163,7 +163,8 @@ function custom_graphs_print($id_graph, $height, $width, $period,
 	$stacked = null, $return = false, $date = 0, $only_image = false,
 	$background_color = 'white', $modules_param = array(), $homeurl = '',
 	$name_list = array(), $unit_list = array(), $show_last = true,
-	$show_max = true, $show_min = true, $show_avg = true, $ttl = 1) {
+	$show_max = true, $show_min = true, $show_avg = true, $ttl = 1,
+	$dashboard = false) {
 	
 	global $config;
 	
@@ -193,9 +194,11 @@ function custom_graphs_print($id_graph, $height, $width, $period,
 		
 		$modules = array ();
 		$weights = array ();
+		$labels = array ();
 		foreach ($sources as $source) {
 			array_push ($modules, $source['id_agent_module']);
 			array_push ($weights, $source['weight']);
+			$labels[$source['id_agent_module']] = $source['label'];
 		}
 	}
 	
@@ -238,7 +241,9 @@ function custom_graphs_print($id_graph, $height, $width, $period,
 		$show_last,
 		$show_max,
 		$show_min,
-		$show_avg);
+		$show_avg,
+		$labels,
+		$dashboard);
 	
 	if ($return)
 		return $output;
diff --git a/pandora_console/include/functions_graph.php b/pandora_console/include/functions_graph.php
index 66093da5dd..19f6a553b0 100644
--- a/pandora_console/include/functions_graph.php
+++ b/pandora_console/include/functions_graph.php
@@ -960,7 +960,7 @@ function graphic_combined_module ($module_list, $weight_list, $period,
 	$only_image = false, $homeurl = '', $ttl = 1, $projection = false,
 	$prediction_period = false, $background_color = 'white',
 	$name_list = array(), $unit_list = array(), $show_last = true, $show_max = true,
-	$show_min = true, $show_avg = true) {
+	$show_min = true, $show_avg = true, $labels = false, $dashboard = false) {
 	
 	global $config;
 	global $graphic_type;
@@ -1379,13 +1379,124 @@ function graphic_combined_module ($module_list, $weight_list, $period,
 		
 		//$graph_values[$i] = $graph_values[$i];
 	}
+	
 	$temp = array();
 	
-	foreach ($graph_values as $graph_group => $point) {
-		foreach ($point as $timestamp_point => $point_value) {
-			$temp[$timestamp_point][$graph_group] = $point_value;
-		}
+	switch ($stacked) {
+		case CUSTOM_GRAPH_BULLET_CHART:
+			$datelimit = $date - $period;
+			foreach ($module_list as $module) {
+				$temp[$module] = modules_get_agentmodule($module);
+				$temp_data = db_get_value_sql('SELECT datos
+							FROM tagente_datos 
+							WHERE id_agente_modulo = ' . (int) $module .
+								' AND utimestamp > ' . (int) $datelimit .
+								' AND utimestamp < ' . (int) $date);
+				if (is_numeric($temp_data))
+					$value = $temp_data;
+				else
+					$value = count($value);
+				if ($labels[$module] != '')
+					$temp[$module]['label'] = $labels[$module];
+				$temp[$module]['value'] = $value;
+				$temp[$module]['max'] = reporting_get_agentmodule_data_max($module,$period,$date);
+				$temp[$module]['min'] = reporting_get_agentmodule_data_min($module,$period,$date);
+			}
+			break;
+		case CUSTOM_GRAPH_HBARS:
+		case CUSTOM_GRAPH_VBARS:
+			$datelimit = $date - $period;
+			
+			$label = '';
+			foreach ($module_list as $module) {
+				$module_data = modules_get_agentmodule($module);
+				$temp_data = db_get_value_sql('SELECT datos
+							FROM tagente_datos 
+							WHERE id_agente_modulo = ' . (int) $module .
+								' AND utimestamp > ' . (int) $datelimit .
+								' AND utimestamp < ' . (int) $date);
+				
+				if ($labels[$module] != '')
+					$label = $labels[$module];
+				else
+					$label = $module_data['nombre'];
+				$temp[$label]['g'] = $temp_data;
+			}
+			break;
+		case CUSTOM_GRAPH_PIE:
+			$datelimit = $date - $period;
+			$total_modules = 0;
+			foreach ($module_list as $module) {
+				$data_module = modules_get_agentmodule($module);
+				$temp_data = db_get_value_sql('SELECT datos
+							FROM tagente_datos 
+							WHERE id_agente_modulo = ' . (int) $module .
+								' AND utimestamp > ' . (int) $datelimit .
+								' AND utimestamp < ' . (int) $date);
+				if ( $temp_data ){
+					if (is_numeric($temp_data))
+						$value = $temp_data;
+					else
+						$value = count($value);
+				}
+				else {
+					$value = 0;
+				}
+				$total_modules += $value;
+				
+				if ( !isset($labels[$module]) )
+					$label = $labels[$module];
+				else
+					$label = $data_module['nombre'];
+				
+				$temp[$label] = array('value'=>$value,
+										'unit'=>$data_module['unit']);
+			}
+			$temp['total_modules'] = $total_modules;
+			
+			break;
+		case CUSTOM_GRAPH_GAUGE:
+			$datelimit = $date - $period;
+			foreach ($module_list as $module) {
+				$temp[$module] = modules_get_agentmodule($module);
+				$temp_data = db_get_value_sql('SELECT datos
+							FROM tagente_datos 
+							WHERE id_agente_modulo = ' . (int) $module .
+								' AND utimestamp > ' . (int) $datelimit .
+								' AND utimestamp < ' . (int) $date);
+				if ( $temp_data ){
+					if (is_numeric($temp_data))
+						$value = $temp_data;
+					else
+						$value = count($value);
+				}
+				else {
+					$value = 0;
+				}
+				if ($labels[$module] != '')
+					$temp[$module]['label'] = $labels[$module];
+				$temp[$module]['value'] = $value;
+				
+				if ($temp[$module]['unit'] == '%'){
+					$temp[$module]['min'] =	0;
+					$temp[$module]['max'] = 100;
+				}else{
+					$min = reporting_get_agentmodule_data_min($module,$period,$date);
+					$max = reporting_get_agentmodule_data_max($module,$period,$date);
+					$temp[$module]['min'] = ($min)== 0 ? 0 : $min;
+					$temp[$module]['max'] = ($max)== 0 ? 100 : $max;
+				}
+			}
+			break;
+		default:
+			foreach ($graph_values as $graph_group => $point) {
+				foreach ($point as $timestamp_point => $point_value) {
+					$temp[$timestamp_point][$graph_group] = $point_value;
+				}
+			}
+			break;
 	}
+	
 	$graph_values = $temp;
 	
 	/*
@@ -1452,7 +1563,7 @@ function graphic_combined_module ($module_list, $weight_list, $period,
 				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
 				"", "", $homeurl, $water_mark, $config['fontpath'],
 				$fixed_font_size, $unit, $ttl, array(), array(), 0,  0,  '',
-				false, '', true, $background_color);
+				false, '', true, $background_color,$dashboard);
 			break;
 		default:
 		case CUSTOM_GRAPH_STACKED_AREA: 
@@ -1460,22 +1571,57 @@ function graphic_combined_module ($module_list, $weight_list, $period,
 				$width, $height, $color, $module_name_list, $long_index,
 				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
 				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
-				"", $ttl, $homeurl, $background_color);
+				"", $ttl, $homeurl, $background_color,$dashboard);
 			break;
 		case CUSTOM_GRAPH_LINE:  
 			return line_graph($flash_charts, $graph_values, $width,
 				$height, $color, $module_name_list, $long_index,
 				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
 				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
-				$unit, $ttl, $homeurl, $background_color); 
+				$unit, $ttl, $homeurl, $background_color,$dashboard); 
 			break;
 		case CUSTOM_GRAPH_STACKED_LINE:
 			return stacked_line_graph($flash_charts, $graph_values,
+				$width, $height, $color, $module_name_list, $long_index,
+				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
+				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
+				"", $ttl, $homeurl, $background_color,$dashboard);
+			break;
+		case CUSTOM_GRAPH_BULLET_CHART:
+			return stacked_bullet_chart($flash_charts, $graph_values,
 				$width, $height, $color, $module_name_list, $long_index,
 				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
 				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
 				"", $ttl, $homeurl, $background_color);
 			break;
+		case CUSTOM_GRAPH_GAUGE:
+			return stacked_gauge($flash_charts, $graph_values,
+				$width, $height, $color, $module_name_list, $long_index,
+				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
+				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
+				"", $ttl, $homeurl, $background_color);
+			break;
+		case CUSTOM_GRAPH_HBARS:
+			return hbar_graph($flash_charts, $graph_values,
+				$width, $height, $color, $module_name_list, $long_index,
+				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
+				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
+				"", $ttl, $homeurl, $background_color);
+			break;
+		case CUSTOM_GRAPH_VBARS:
+			return vbar_graph($flash_charts, $graph_values,
+				$width, $height, $color, $module_name_list, $long_index,
+				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
+				"", "", $water_mark, $config['fontpath'], $fixed_font_size,
+				"", $ttl, $homeurl, $background_color);
+			break;
+		case CUSTOM_GRAPH_PIE:
+			return flot_custom_pie_chart($flash_charts, $graph_values,
+				$width, $height, $color, $module_name_list, $long_index,
+				ui_get_full_url("images/image_problem.opaque.png", false, false, false),
+				"", "", $water_mark, $config['fontpath'], ($config['font_size']+1),
+				"", $ttl, $homeurl, $background_color,'other');
+			break;
 	}
 }
 
diff --git a/pandora_console/include/functions_reporting.php b/pandora_console/include/functions_reporting.php
index 50e74b403e..b6c9a1921f 100755
--- a/pandora_console/include/functions_reporting.php
+++ b/pandora_console/include/functions_reporting.php
@@ -6960,6 +6960,7 @@ function reporting_get_agentmodule_data_max ($id_agent_module, $period=0, $date
 			' AND utimestamp > ' . (int) $datelimit .
 			' AND utimestamp < ' . (int) $date .
 		' ORDER BY utimestamp ASC', $search_in_history_db);
+	
 	if ($interval_data === false) $interval_data = array ();
 	
 	// Uncompressed module data
@@ -8240,4 +8241,4 @@ function reporting_format_planned_downtime_dates ($planned_downtime) {
 	return $dates;
 }
 
-?>
+?>
\ No newline at end of file
diff --git a/pandora_console/include/graphs/bullet.js b/pandora_console/include/graphs/bullet.js
new file mode 100644
index 0000000000..4fc38ab2bf
--- /dev/null
+++ b/pandora_console/include/graphs/bullet.js
@@ -0,0 +1,241 @@
+(function() {
+
+// Chart design based on the recommendations of Stephen Few. Implementation
+// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
+// http://projects.instantcognition.com/protovis/bulletchart/
+d3.bullet = function() {
+  var orient = "right", // TODO top & bottom
+      reverse = false,
+      duration = 0,
+      ranges = bulletRanges,
+      markers = bulletMarkers,
+      measures = bulletMeasures,
+      width = 80,
+      height = 30,
+      tickFormat = null;
+
+  // For each small multiple…
+  function bullet(g) {
+    g.each(function(d, i) {
+      var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
+          markerz = markers.call(this, d, i).slice().sort(d3.descending),
+          measurez = measures.call(this, d, i).slice().sort(d3.descending),
+          g = d3.select(this);
+
+      // Compute the new x-scale.
+      var x1 = d3.scale.linear()
+          .domain([0, Math.max(rangez[0], markerz[0], measurez[0])])
+          .range(reverse ? [width, 0] : [0, width-160]);
+
+      // Retrieve the old x-scale, if this is an update.
+      var x0 = this.__chart__ || d3.scale.linear()
+          .domain([0, Infinity])
+          .range(x1.range());
+
+      // Stash the new scale.
+      this.__chart__ = x1;
+
+      // Derive width-scales from the x-scales.
+      var w0 = bulletWidth(x0),
+          w1 = bulletWidth(x1);
+
+      // Update the range rects.
+      var range = g.selectAll("rect.range")
+          .data(rangez);
+
+      range.enter().append("rect")
+          .attr("class", function(d, i) { return "range s" + i; })
+          .attr("width", w0)
+          .attr("height", height)
+          .attr("x", reverse ? x0 : 0)
+        .transition()
+          .duration(duration)
+          .attr("width", w1)
+          .attr("x", reverse ? x1 : 0);
+
+      range.transition()
+          .duration(duration)
+          .attr("x", reverse ? x1 : 0)
+          .attr("width", w1)
+          .attr("height", height);
+
+      // Update the measure rects.
+      var measure = g.selectAll("rect.measure")
+          .data(measurez);
+
+      measure.enter().append("rect")
+          .attr("class", function(d, i) { return "measure s" + i; })
+          .attr("width", w0)
+          .attr("height", height / 3)
+          .attr("x", reverse ? x0 : 0)
+          .attr("y", height / 3)
+        .transition()
+          .duration(duration)
+          .attr("width", w1)
+          .attr("x", reverse ? x1 : 0);
+
+      measure.transition()
+          .duration(duration)
+          .attr("width", w1)
+          .attr("height", height / 3)
+          .attr("x", reverse ? x1 : 0)
+          .attr("y", height / 3);
+
+      // Update the marker lines.
+      var marker = g.selectAll("line.marker")
+          .data(markerz);
+
+      marker.enter().append("line")
+          .attr("class", function(d, i) { return "marker s" + i; })
+          .attr("x1", x0)
+          .attr("x2", x0)
+          .attr("y1", height / 6)
+          .attr("y2", height * 5 / 6)
+        .transition()
+          .duration(duration)
+          .attr("x1", x1)
+          .attr("x2", x1);
+
+      marker.transition()
+          .duration(duration)
+          .attr("x1", x1)
+          .attr("x2", x1)
+          .attr("y1", height / 6)
+          .attr("y2", height * 5 / 6);
+
+      // Compute the tick format.
+      var format = tickFormat || x1.tickFormat(8);
+
+      // Update the tick groups.
+      var tick = g.selectAll("g.tick")
+          .data(x1.ticks(8), function(d) {
+            return this.textContent || format(d);
+          });
+
+      // Initialize the ticks with the old scale, x0.
+      var tickEnter = tick.enter().append("g")
+          .attr("class", "tick")
+          .attr("transform", bulletTranslate(x0))
+          .style("opacity", 1e-6);
+
+      tickEnter.append("line")
+          .attr("y1", height)
+          .attr("y2", height * 7 / 6);
+
+      tickEnter.append("text")
+          .attr("text-anchor", "middle")
+          .attr("dy", "1em")
+          .attr("y", height * 7 / 6)
+          .text(format);
+
+      // Transition the entering ticks to the new scale, x1.
+      tickEnter.transition()
+          .duration(duration)
+          .attr("transform", bulletTranslate(x1))
+          .style("opacity", 1);
+
+      // Transition the updating ticks to the new scale, x1.
+      var tickUpdate = tick.transition()
+          .duration(duration)
+          .attr("transform", bulletTranslate(x1))
+          .style("opacity", 1);
+
+      tickUpdate.select("line")
+          .attr("y1", height)
+          .attr("y2", height * 7 / 6);
+
+      tickUpdate.select("text")
+          .attr("y", height * 7 / 6);
+
+      // Transition the exiting ticks to the new scale, x1.
+      tick.exit().transition()
+          .duration(duration)
+          .attr("transform", bulletTranslate(x1))
+          .style("opacity", 1e-6)
+          .remove();
+    });
+    d3.timer.flush();
+  }
+
+  // left, right, top, bottom
+  bullet.orient = function(x) {
+    if (!arguments.length) return orient;
+    orient = x;
+    reverse = orient == "right" || orient == "bottom";
+    return bullet;
+  };
+
+  // ranges (bad, satisfactory, good)
+  bullet.ranges = function(x) {
+    if (!arguments.length) return ranges;
+    ranges = x;
+    return bullet;
+  };
+
+  // markers (previous, goal)
+  bullet.markers = function(x) {
+    if (!arguments.length) return markers;
+    markers = x;
+    return bullet;
+  };
+
+  // measures (actual, forecast)
+  bullet.measures = function(x) {
+    if (!arguments.length) return measures;
+    measures = x;
+    return bullet;
+  };
+
+  bullet.width = function(x) {
+    if (!arguments.length) return width;
+    width = x;
+    return bullet;
+  };
+
+  bullet.height = function(x) {
+    if (!arguments.length) return height;
+    height = x;
+    return bullet;
+  };
+
+  bullet.tickFormat = function(x) {
+    if (!arguments.length) return tickFormat;
+    tickFormat = x;
+    return bullet;
+  };
+
+  bullet.duration = function(x) {
+    if (!arguments.length) return duration;
+    duration = x;
+    return bullet;
+  };
+
+  return bullet;
+};
+
+function bulletRanges(d) {
+  return d.ranges;
+}
+
+function bulletMarkers(d) {
+  return d.markers;
+}
+
+function bulletMeasures(d) {
+  return d.measures;
+}
+
+function bulletTranslate(x) {
+  return function(d) {
+    return "translate(" + x(d) + ",0)";
+  };
+}
+
+function bulletWidth(x) {
+  var x0 = x(0);
+  return function(d) {
+    return Math.abs(x(d) - x0);
+  };
+}
+
+})();
\ No newline at end of file
diff --git a/pandora_console/include/graphs/fgraph.php b/pandora_console/include/graphs/fgraph.php
index 5bd7a5890b..501c3947f2 100644
--- a/pandora_console/include/graphs/fgraph.php
+++ b/pandora_console/include/graphs/fgraph.php
@@ -43,6 +43,7 @@ if (!empty($graph_type)) {
 	
 	include_once($homeurl . 'include/graphs/functions_gd.php');
 	include_once($homeurl . 'include/graphs/functions_utils.php');
+	include_once($homeurl . 'include/graphs/functions_d3.php');
 }
 
 // Clean the output buffer and turn off output buffering
@@ -212,7 +213,8 @@ function area_graph($flash_chart, $chart_data, $width, $height, $color,
 	$font_size = '', $unit = '', $ttl = 1, $series_type = array(),
 	$chart_extra_data = array(), $yellow_threshold = 0,
 	$red_threshold = 0, $adapt_key = '', $force_integer = false,
-	$series_suffix_str = '', $menu = true, $backgroundColor = 'white') {
+	$series_suffix_str = '', $menu = true, $backgroundColor = 'white',
+	$dashboard = false) {
 	
 	
 	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
@@ -250,7 +252,8 @@ function area_graph($flash_chart, $chart_data, $width, $height, $color,
 			$force_integer,
 			$series_suffix_str,
 			$menu,
-			$backgroundColor);
+			$backgroundColor,
+			$dashboard);
 	}
 	else {
 		$graph = array();
@@ -288,7 +291,8 @@ function area_graph($flash_chart, $chart_data, $width, $height, $color,
 function stacked_area_graph($flash_chart, $chart_data, $width, $height,
 	$color, $legend, $long_index, $no_data_image, $xaxisname = "",
 	$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
-	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
+	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white',
+	$dashboard = false) {
 	
 	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
 	
@@ -315,7 +319,8 @@ function stacked_area_graph($flash_chart, $chart_data, $width, $height,
 			false,
 			'',
 			true,
-			$backgroundColor);
+			$backgroundColor,
+			$dashboard);
 	}
 	else {
 		//Stack the data
@@ -343,7 +348,8 @@ function stacked_area_graph($flash_chart, $chart_data, $width, $height,
 function stacked_line_graph($flash_chart, $chart_data, $width, $height,
 	$color, $legend, $long_index, $no_data_image, $xaxisname = "",
 	$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
-	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
+	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white',
+	$dashboard = false) {
 	
 	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
 	
@@ -371,7 +377,8 @@ function stacked_line_graph($flash_chart, $chart_data, $width, $height,
 			false,
 			'',
 			true,
-			$background_color);
+			$background_color,
+			$dashboard);
 	}
 	else {
 		//Stack the data
@@ -396,10 +403,63 @@ function stacked_line_graph($flash_chart, $chart_data, $width, $height,
 	}
 }
 
+function stacked_bullet_chart($flash_chart, $chart_data, $width, $height,
+	$color, $legend, $long_index, $no_data_image, $xaxisname = "",
+	$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
+	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
+	
+	include_once('functions_d3.php');
+	
+	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
+	
+	if (empty($chart_data)) {
+		return '<img src="' . $no_data_image . '" />';
+	}
+	
+	return d3_bullet_chart(
+			$chart_data,
+			$width,
+			$height,
+			$color,
+			$legend,
+			$homeurl,
+			$unit,
+			$font,
+			$font_size
+			);
+}
+
+function stacked_gauge($flash_chart, $chart_data, $width, $height,
+	$color, $legend, $long_index, $no_data_image, $xaxisname = "",
+	$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
+	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
+	
+	include_once('functions_d3.php');
+	
+	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
+	
+	if (empty($chart_data)) {
+		return '<img src="' . $no_data_image . '" />';
+	}
+	
+	return d3_gauges(
+			$chart_data,
+			$width,
+			$height,
+			$color,
+			$legend,
+			$homeurl,
+			$unit,
+			$font,
+			$font_size + 2
+			);
+}
+
 function line_graph($flash_chart, $chart_data, $width, $height, $color,
 	$legend, $long_index, $no_data_image, $xaxisname = "",
 	$yaxisname = "", $water_mark = "", $font = '', $font_size = '',
-	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') {
+	$unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white',
+	$dashboard = false) {
 	
 	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
 	
@@ -426,7 +486,8 @@ function line_graph($flash_chart, $chart_data, $width, $height, $color,
 			false,
 			'',
 			true,
-			$backgroundColor);
+			$backgroundColor,
+			$dashboard);
 	}
 	else {
 		$graph = array();
diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js
index bea58bac6a..2dbdd188b6 100644
--- a/pandora_console/include/graphs/flot/pandora.flot.js
+++ b/pandora_console/include/graphs/flot/pandora.flot.js
@@ -15,8 +15,8 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
 		if (colors != '') {
 			color = colors[i];
 		}
-
-		data[i] = { label: labels[i], data: parseInt(data[i]), color: color}
+		
+		data[i] = { label: labels[i], data: parseFloat(data[i]), color: color}
 	}
 
 	var label_conf;
@@ -33,7 +33,7 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
 			formatter: function(label, series) {
 				return '<div style="font-size:' + font_size + 'pt;' +
 					'text-align:center;padding:2px;color:white;">' +
-						label + '<br/>' + series.percent.toFixed(1) + '%</div>';
+						label + '<br/>' + series.percent.toFixed(2) + '%</div>';
 			},
 			background: {
 				opacity: 0.5,
@@ -53,7 +53,7 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
 					show: true,
 					radius: 3/4,
 					//offset: {top: -100},
-					label: label_conf
+					label: label_conf,
 					//$label_str
 				}
 			},
@@ -68,7 +68,7 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
 
 		if (width < 400) {
 			conf_pie.legend.labelFormatter = function(label, series) {
-					return label + " (" + series.percent.toFixed(1) + "%)";
+					return label + " (" + series.percent.toFixed(2) + "%)";
 				}
 		}
 
@@ -120,7 +120,138 @@ function pandoraFlotPie(graph_id, values, labels, nseries, width, font_size, wat
 			$(this).css('font-weight', '');
 		});
 	}
+	
+	if (water_mark) {
+		set_watermark(graph_id, plot,
+			$('#watermark_image_' + graph_id).attr('src'));
+	}
+}
 
+function pandoraFlotPieCustom(graph_id, values, labels, width, 
+			font_size, water_mark, separator, legend_position, height, 
+				colors,legend) {
+	var labels = labels.split(separator);
+	var legend = legend.split(separator);
+	var data = values.split(separator);
+	if (colors != '') {
+		colors = colors.split(separator);
+	}
+	var colors_data = ['#FC4444','#FFA631','#FAD403','#5BB6E5','#F2919D','#80BA27'];
+	var color = null;
+	for (var i = 0; i < data.length; i++) {
+		if (colors != '') {
+			color = colors_data[i];
+		}
+		
+		data[i] = { label: labels[i], data: parseFloat(data[i]), color: color}
+	}
+	
+	var label_conf;
+	
+	label_conf = {
+		show: true,
+		radius: 0.75,
+		formatter: function(label, series) {
+			return '<div style="font-size:' + font_size + 'pt;' +
+				'text-align:center;padding:2px;color:white;">' +
+					label + ':' + series.percent.toFixed(2) + '%</div>';
+		},
+		background: {
+			opacity: 0.5,
+			color: '#000'
+		}
+	};
+	
+	var show_legend = true;
+	
+	var conf_pie = {
+			series: {
+				pie: {
+					show: true,
+					radius: 3/4,
+					innerRadius: 0.4,
+					label: label_conf
+					
+				}
+			},
+			legend: {
+				show: show_legend,
+			},
+			grid: {
+				hoverable: true,
+				clickable: true
+			}
+		};
+	
+	var plot = $.plot($('#'+graph_id), data, conf_pie);
+	
+	var legends = $('#'+graph_id+' .legendLabel');
+	var j = 0;
+	legends.each(function () {
+		//$(this).css('width', $(this).width());
+		$(this).css('font-size', font_size+'pt');
+		$(this).text(legend[j]);
+		j++;
+	});
+	
+	if ($('input[name="custom_graph"]').val()) {
+		$('.legend>div').css('right',($('.legend>div').height()*-1));
+		$('.legend>table').css('right',($('.legend>div').height()*-1));
+	}
+	$('.legend>table').css('border',"1px solid #E2E2E2");
+	$('.legend>table').css('background-color',"#FFF");
+	
+	
+	var pielegends = $('#'+graph_id+' .pieLabelBackground');
+	pielegends.each(function () {
+		$(this).css('transform', "rotate(-35deg)");
+	});
+	var labelpielegends = $('#'+graph_id+' .pieLabel');
+	labelpielegends.each(function () {
+		$(this).css('transform', "rotate(-35deg)");
+	});
+	
+	// Events
+	$('#' + graph_id).bind('plothover', pieHover);
+	$('#' + graph_id).bind('plotclick', Clickpie);
+	$('#' + graph_id).bind('mouseout',resetInteractivity);
+	
+	function pieHover(event, pos, obj) 
+	{
+		if (!obj)
+			return;
+		
+		index = obj.seriesIndex;
+		legends.css('font-weight', '');
+		legends.eq(index).css('font-weight', 'bold');
+	}
+	
+	function Clickpie(event, pos, obj) 
+	{
+		if (!obj)
+			return;
+		percent = parseFloat(obj.series.percent).toFixed(2);
+		valor = parseFloat(obj.series.data[0][1]);
+		console.log(obj);
+		if (valor > 1000000){
+			value = Math.round((valor / 1000000)*100)/100;
+			value = value + "M";
+		}else{ if (valor > 1000) {
+				value = Math.round((valor / 1000)*100)/100;
+				value = value + "K";
+			}
+		}
+		alert(''+obj.series.label+': '+ value +' ('+percent+'%)');
+	}
+	
+	// Reset styles
+	function resetInteractivity() {
+		legends.each(function () {
+			// fix the widths so they don't jump around
+			$(this).css('font-weight', '');
+		});
+	}
+	
 	if (water_mark) {
 		set_watermark(graph_id, plot,
 			$('#watermark_image_' + graph_id).attr('src'));
@@ -202,15 +333,17 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
 
 
 	var plot = $.plot($('#' + graph_id), datas, options );
-
-	$('#' + graph_id).UseTooltip();
-	/*
+	
+	$('#' + graph_id).HUseTooltip();
+	$('#' + graph_id).css("margin-left","35px");
 	// 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];
-
-	i = 0;
-	$('#' + graph_id + ' .yAxis .tickLabel').each(function() {
+	//yAxisHeight = $('#' + graph_id + ' .yAxis .tickLabel')
+		//.css('height').split('px')[0];
+	
+	//i = 0;
+	
+	$('#' + graph_id + ' .xAxis .tickLabel').each(function() {
+		/*
 		tickTop = $(this).css('top').split('px')[0];
 		tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight / 2) - 3);
 		$(this).css('top', tickNewTop + 'px');
@@ -238,8 +371,20 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
 		$('#value_' + i + '_' + graph_id)
 			.css('left', label_left_offset);
 		i++;
+		*/
+		label = parseFloat($(this).text());
+		text = label.toLocaleString();
+		if ( label >= 1000000)
+			text = text.substring(0,4) + "M";
+		else if (label >= 100000)
+				text = text.substring(0,3) + "K";
+			else if (label >= 1000)
+					text = text.substring(0,2) + "K";
+		
+		$(this).text(text);
+		
 	});
-
+	/*
 	// When resize the window, adjust the values
 	$('#' + graph_id).parent().resize(function () {
 		i = 0;
@@ -307,7 +452,31 @@ function pandoraFlotHBars(graph_id, values, labels, water_mark,
 
 var previousPoint = null, previousLabel = null;
 
-$.fn.UseTooltip = function () {
+$.fn.HUseTooltip = function () {
+    $(this).bind("plothover", function (event, pos, item) {
+        if (item) {
+            if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
+                previousPoint = item.dataIndex;
+                previousLabel = item.series.label;
+                $("#tooltip").remove();
+
+                var x = item.datapoint[0];
+                var y = item.datapoint[1];
+
+                var color = item.series.color;              
+                
+                showTooltip(item.pageX,
+                        item.pageY,
+                        color,
+                        "<strong>" + item.series.yaxis.ticks[y].label + "</strong>: <strong>" + x + "</strong>");                
+            }
+        } else {
+            $("#tooltip").remove();
+            previousPoint = null;
+        }
+    });
+};
+$.fn.VUseTooltip = function () {
     $(this).bind("plothover", function (event, pos, item) {
         if (item) {
             if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
@@ -319,13 +488,11 @@ $.fn.UseTooltip = function () {
                 var y = item.datapoint[1];
 
                 var color = item.series.color;
-
-                console.log(item.series);
-
+				
                 showTooltip(item.pageX,
                         item.pageY,
                         color,
-                        "<strong>" + item.series.yaxis.ticks[y].label + "</strong>: <strong>" + x + "</strong>");
+                        "<strong>" + item.series.xaxis.ticks[x].label + "</strong>"  + " : <strong>" + y + "</strong>");      
             }
         } else {
             $("#tooltip").remove();
@@ -355,77 +522,87 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
 	values = values.split(separator2);
 	legend = legend.split(separator);
 	labels_long = labels_long.split(separator);
-	colors = colors.split(separator);
-
+	//colors = colors.split(separator);
+	var colors_data = ['#FC4444','#FFA631','#FAD403','#5BB6E5','#F2919D','#80BA27'];
 	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_color;
-		if (colors[i] != '') {
-			serie_color = colors[i];
-		}
-		else {
-			serie_color = null;
-		}
-
+		
+		
 		var aux = new Array();
-		$.each(serie,function(i,v) {
-			aux.push([i, v]);
-		});
-
-		datas.push({
-			data: aux,
-			color: serie_color,
-			bars: { show: true, horizontal: false, fillColor: { colors: [ { opacity: 0.7 }, { opacity: 1 } ] }, lineWidth:1, steps:false }
-		});
-	}
-
-	labels = labels.split(separator);
-
-	var stack = 0, bars = true, lines = false, steps = false;
-
-	var options = {
-			series: {
-				shadowSize: 0.1
-			},
-			grid: {
-				hoverable: true,
-				clickable: true,
-				borderWidth:1,
-				borderColor: '#666',
-				tickColor: '#eee'
-				},
-			xaxes: [ {
-					tickFormatter: xFormatter,
-					color: '#000'
-					} ],
-			yaxes: [ {
-					tickFormatter: yFormatter,
-					color: '#000'
-					},
-					{
-						// align if we are to the right
-						alignTicksWithAxis: 1,
-						position: 'right'
-
-						//tickFormatter: dFormatter
-					} ]
-					,
-			legend: {
-				show: false
-				}
+		for (j = 0; j < serie.length; j++) {
+			var aux2 = parseFloat(serie[j]);
+			aux.push([aux2, j]);
+			datas.push( {
+				data: [[j, aux2]],
+				color: colors_data[j]
+			});
 		};
-
-	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];
-
+	}
+	
+	var labels_total=new Array();
+	labels = labels.split(separator);
 	i = 0;
-	//~ $('#'+graph_id+' .yAxis .tickLabel').each(function() {
-		//~ tickTop = $(this).css('top').split('px')[0];
+	for (i = 0; i < labels.length; i++) {
+		labels_total.push([i, labels[i]]);
+	}
+	
+	var stack = 0, bars = true, lines = false, steps = false;
+	
+	 var options = {
+            series: {
+                bars: {
+                    show: true,
+                    lineWidth: 1,
+					fill: 1,
+					align: "center",
+					barWidth: 1
+                }
+            },
+            xaxis: {
+                axisLabelUseCanvas: true,
+                axisLabelFontSizePixels: 7,
+                axisLabelFontFamily: 'Verdana, Arial',
+                axisLabelPadding: 0,
+                ticks: labels_total,
+                labelWidth: 30,
+            },
+            yaxis: {
+                axisLabelUseCanvas: true,
+                axisLabelFontSizePixels: 7,
+                axisLabelFontFamily: 'Verdana, Arial',
+                axisLabelPadding: 100,
+                autoscaleMargin: 0.02,
+                tickFormatter: function (v, axis) {
+                    return v ;
+                }
+            },
+            legend: {
+                noColumns: 100,
+                labelBoxBorderColor: "#000000",
+                margin: 100,
+                container: true,
+                sorted: false
+                
+            },
+            grid: {
+                hoverable: true,
+				borderWidth: 1,        
+				backgroundColor: { colors: ["#FFF", "#FFF"] }
+            }
+    };
+	
+	var plot = $.plot($('#'+graph_id),datas, options );
+	$('#' + graph_id).VUseTooltip();
+	$('#' + graph_id).css("margin-left","25px");
+	$('#' + graph_id).css("margin-right","20px");
+	// 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];
+	
+	i = 0;
+	$('#'+graph_id+' .xAxis .tickLabel').each(function() {
+		tickTop = $(this).css('transform',"rotate(20deg)");
 		//~ tickNewTop = parseInt(parseInt(tickTop) - (yAxisHeight/2)-3);
 		//~ $(this).css('top', tickNewTop+'px');
 		//~
@@ -439,8 +616,8 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
 		//~
 		//~ $('#value_'+i+'_'+graph_id).css('left',plot.offset().left + inCanvasValuePos - $('#value_'+i+'_'+graph_id).css('width').split('px')[0] - 3);
 		//~ i++;
-	//~ });
-
+	});
+	
 	// When resize the window, adjust the values
 	//~ $('#'+graph_id).parent().resize(function () {
 		//~ i = 0;
@@ -453,7 +630,18 @@ function pandoraFlotVBars(graph_id, values, labels, labels_long, legend, colors,
 			//~ i++;
 		//~ });
 	//~ });
-
+	$('#'+graph_id+' .yAxis .tickLabel').each(function() {
+		label = parseFloat($(this).text());
+		text = label.toLocaleString();
+		if ( label >= 1000000)
+			text = text.substring(0,4) + "M";
+		else if (label >= 100000)
+				text = text.substring(0,3) + "K";
+			else if (label >= 1000)
+					text = text.substring(0,2) + "K";
+		
+		$(this).text(text);
+	});
 	// Format functions
 	function xFormatter(v, axis) {
 		if (labels[v] != undefined) {
@@ -706,13 +894,13 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
 			//~ { color: criticalw, yaxis: { from: vcritical_min } },
 			//~ { color: criticalw, yaxis: { to: -1 } }
 		//~ ];
-
-		lineWidht = $('#hidden-lineWidhtGraph');
-		if (typeof(lineWidht[0])=='undefined') {
+		
+		lineWidht = $('#hidden-lineWidhtGraph').val();
+		if (typeof(lineWidht)=='undefined') {
 			WidhtLine = 1;
 		}
 		else {
-			WidhtLine = lineWidht[0].value;
+			WidhtLine = lineWidht;
 		}
 
 		// Data
@@ -1348,7 +1536,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
 		menu_height = 24;
 		var legend_margin_bottom = parseInt(
 			$('#legend_'+graph_id).css('margin-bottom').split('px')[0]);
-		$('#legend_'+graph_id).css('margin-bottom', menu_height+legend_margin_bottom+'px');
+		$('#legend_'+graph_id).css('margin-bottom', '10px');
 		parent_height = parseInt(
 			$('#menu_'+graph_id).parent().css('height').split('px')[0]);
 		adjust_menu(graph_id, plot, parent_height);
@@ -1484,7 +1672,7 @@ function number_format(number, force_integer, unit) {
 	else {
 		var decimals = 2;
 		var factor = 10 * decimals;
-		number = Math.round(number*factor)/factor
+		number = Math.round(number*factor)/factor;
 	}
 
 	var shorts = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"];
@@ -1498,6 +1686,6 @@ function number_format(number, force_integer, unit) {
 			break;
 		}
 	}
-
-	return number+' '+shorts[pos]+unit;
+	
+	return number + ' ' + shorts[pos] + unit;
 }
diff --git a/pandora_console/include/graphs/functions_d3.php b/pandora_console/include/graphs/functions_d3.php
index b2e7c2078b..7b64a487d2 100644
--- a/pandora_console/include/graphs/functions_d3.php
+++ b/pandora_console/include/graphs/functions_d3.php
@@ -141,4 +141,137 @@ function d3_sunburst_graph ($data, $width = 700, $height = 700, $return = false)
 	return $output;
 }
 
+function d3_bullet_chart($chart_data, $width, $height, $color, $legend,
+				$homeurl, $unit, $font, $font_size) {
+					
+					
+	global $config;
+	$output = '';
+	$output .= include_javascript_d3(true);
+	
+	$output .= 
+		'<div id="bullet_graph" style="overflow: hidden;"></div>
+		<style>
+			
+			#bullet_graph {
+			   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+			  margin: auto;
+			  padding-top: 40px;
+			  position: relative;
+			  width: 100%;
+			}
+			
+			.bullet { font: 7px sans-serif; }
+			.bullet .marker.s0 { stroke: #FC4444; stroke-width: 2px; }
+			.bullet .marker.s1 { stroke: #FAD403; stroke-width: 2px; }
+			.bullet .marker.s2 { stroke: steelblue; stroke-width: 2px; }
+			.bullet .tick line { stroke: #666; stroke-width: .5px; }
+			.bullet .range.s0 { fill: #ddd; }
+			.bullet .range.s1 { fill: #ddd; }
+			.bullet .range.s2 { fill: #ccc; }
+			.bullet .measure.s0 { fill: steelblue; }
+			.bullet .measure.s1 { fill: steelblue; }
+			.bullet .title { font-size: 7pt; font-weight: bold; text-align:left; }
+			.bullet .subtitle { fill: #999; font-size: 7pt;}
+			.bullet g text { font-size: 7pt;}
+
+		</style>
+		<script src="'. $config['homeurl'] . 'include/graphs/bullet.js"></script>
+		<script language="javascript" type="text/javascript">
+		
+		var margin = {top: 5, right: 40, bottom: 20, left: 120};
+		
+		width = ('.$width.'+10);
+		height = '.$height.'- margin.top - margin.bottom;
+		
+		var chart = d3.bullet()
+			.width(width)
+			.height(height)
+			.orient("left");
+		';
+	
+	$temp = array();
+	foreach ($chart_data as $data) {
+		if (isset ($data["label"]) ) {
+			$name = io_safe_output($data["label"]);
+		}
+		else
+			$name = io_safe_output($data["nombre"]);
+		$name = ui_print_truncate_text($name, 15, false, true, false, '...', false);
+		$marker = "";
+		if ($data['value'] == 0) {
+			$marker = ", 0";
+		}
+		$temp[] = '{"title":"'.$name.'","subtitle":"'.$data["unit"].'",
+				"ranges":['.((float)$data['max']) .'],"measures":[' .$data['value']. '],
+					"markers":[' .$data['min_warning'].','. $data['min_critical'].$marker.']}';
+	}
+	$output .= 'var data = ['
+	. implode(",",$temp) . '];
+	';
+	$output .=	'
+		
+		var svg = d3.select("#bullet_graph").selectAll("svg")
+			  .data(data)
+			.enter().append("svg")
+			  .attr("class", "bullet")
+			  .attr("width", "100%")
+			  .attr("height", height+ margin.top + margin.bottom)
+			.append("g")
+			  .attr("transform", "translate(" + (margin.left) + "," + margin.top + ")")
+			  .call(chart);
+			 
+		
+		 var title = svg.append("g")
+			.style("text-anchor", "end")
+			  .attr("transform", "translate(-20," + height  + ")");
+
+		 title.append("text")
+			  .attr("class", "title")
+			  .text(function(d) { return d.title; });
+
+		 title.append("text")
+			  .attr("class", "subtitle")
+			  .attr("dy", "1em")
+			  .text(function(d) { return d.subtitle; });
+			  
+			$(".tick>text").each(function() {
+				
+				label = $(this).text().replace(/,/g,"");
+				label = parseFloat(label);
+				text = label.toLocaleString();
+				if ( label >= 1000000)
+						text = text.substring(0,3) + "M";
+				else if (label >= 100000)
+						text = text.substring(0,3) + "K";
+					else if (label >= 1000)
+							text = text.substring(0,2) + "K";
+				
+				$(this).text(text);
+			});
+		</script>';
+	
+	return $output;
+	
+}
+
+function d3_gauges($chart_data, $width, $height, $color, $legend,
+				$homeurl, $unit, $font, $font_size) {
+	global $config;
+
+	if (is_array($chart_data))
+		$data = json_encode($chart_data);
+	$output = include_javascript_d3(true);
+	
+	foreach ($chart_data as $module) {
+		$output .= "<span id='".str_replace('&#x20;','_',$module['nombre'])."' style='overflow: hidden; margin-left: 10px;'></span>";
+	}
+	
+	$output .= "<script language=\"javascript\" type=\"text/javascript\">
+					var data = $data;
+					createGauges(data, '$width', '$height','$font_size');
+				</script>";
+
+	return $output;
+}
 ?>
diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php
index 48d95f7375..39942e926e 100644
--- a/pandora_console/include/graphs/functions_flot.php
+++ b/pandora_console/include/graphs/functions_flot.php
@@ -94,7 +94,7 @@ function flot_area_stacked_graph($chart_data, $width, $height, $color,
 	$serie_types = array(), $chart_extra_data = array(),
 	$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
 	$force_integer = false, $series_suffix_str = '', $menu = true,
-	$background_color = 'white') {
+	$background_color = 'white', $dashboard = false) {
 	
 	global $config;
 	
@@ -102,7 +102,7 @@ function flot_area_stacked_graph($chart_data, $width, $height, $color,
 		$legend, $long_index, $homeurl, $unit, 'area_stacked',
 		$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
 		$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
-		$menu, $background_color);
+		$menu, $background_color, $dashboard);
 }
 
 function flot_area_simple_graph($chart_data, $width, $height, $color,
@@ -110,7 +110,7 @@ function flot_area_simple_graph($chart_data, $width, $height, $color,
 	$serie_types = array(), $chart_extra_data = array(),
 	$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
 	$force_integer = false, $series_suffix_str = '', $menu = true,
-	$background_color = 'white') {
+	$background_color = 'white', $dashboard = false) {
 	
 	global $config;
 	
@@ -118,7 +118,7 @@ function flot_area_simple_graph($chart_data, $width, $height, $color,
 		$legend, $long_index, $homeurl, $unit, 'area_simple',
 		$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
 		$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
-		$menu, $background_color);
+		$menu, $background_color, $dashboard);
 }
 
 function flot_line_stacked_graph($chart_data, $width, $height, $color,
@@ -126,7 +126,7 @@ function flot_line_stacked_graph($chart_data, $width, $height, $color,
 	$serie_types = array(), $chart_extra_data = array(),
 	$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
 	$force_integer = false, $series_suffix_str = '', $menu = true,
-	$background_color = 'white') {
+	$background_color = 'white', $dashboard = false) {
 	
 	global $config;
 	
@@ -134,7 +134,7 @@ function flot_line_stacked_graph($chart_data, $width, $height, $color,
 		$legend, $long_index, $homeurl, $unit, 'line_stacked',
 		$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
 		$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
-		$menu, $background_color);
+		$menu, $background_color, $dashboard);
 }
 
 function flot_line_simple_graph($chart_data, $width, $height, $color,
@@ -142,7 +142,7 @@ function flot_line_simple_graph($chart_data, $width, $height, $color,
 	$serie_types = array(), $chart_extra_data = array(),
 	$yellow_threshold = 0, $red_threshold = 0, $adapt_key= '',
 	$force_integer = false, $series_suffix_str = '', $menu = true,
-	$background_color = 'white') {
+	$background_color = 'white', $dashboard = false) {
 	
 	global $config;
 	
@@ -150,14 +150,14 @@ function flot_line_simple_graph($chart_data, $width, $height, $color,
 		$legend, $long_index, $homeurl, $unit, 'line_simple',
 		$water_mark, $serie_types, $chart_extra_data, $yellow_threshold,
 		$red_threshold, $adapt_key, $force_integer, $series_suffix_str,
-		$menu, $background_color);
+		$menu, $background_color, $dashboard);
 }
 
 function flot_area_graph($chart_data, $width, $height, $color, $legend,
 	$long_index, $homeurl, $unit, $type, $water_mark, $serie_types,
 	$chart_extra_data, $yellow_threshold, $red_threshold, $adapt_key,
 	$force_integer, $series_suffix_str = '', $menu = true,
-	$background_color = 'white') {
+	$background_color = 'white', $dashboard = false) {
 	
 	global $config;
 	
@@ -200,28 +200,30 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend,
 		if ($threshold) {
 			$nbuttons++;
 		}
-		
+		$return .= html_print_input_hidden ('lineWidhtGraph', $config['custom_graph_width'],true);
 		$menu_width = 25 * $nbuttons + 15;
-		$return .= "<div id='menu_$graph_id' class='menu_graph' " .
-			"style='display: none; " .
-				"text-align: center; " .
-				"width: " . $menu_width . "px; ".
-				"border: solid 1px #666; ".
-				"border-bottom: 0px; " .
-				"padding: 4px 4px 4px 4px;margin-bottom:5px;'>
-			<a href='javascript:'><img id='menu_cancelzoom_$graph_id' src='".$homeurl."images/zoom_cross_grey.disabled.png' alt='".__('Cancel zoom')."' title='".__('Cancel zoom')."'></a>";
-		if ($threshold) {
-			$return .= " <a href='javascript:'><img id='menu_threshold_$graph_id' src='".$homeurl."images/chart_curve_threshold.png' alt='".__('Warning and Critical thresholds')."' title='".__('Warning and Critical thresholds')."'></a>";
+		if ( $dashboard == false) {
+			$return .= "<div id='menu_$graph_id' class='menu_graph' " .
+				"style='display: none; " .
+					"text-align: center; " .
+					"width: " . $menu_width . "px; ".
+					"border: solid 1px #666; ".
+					"border-bottom: 0px; " .
+					"padding: 4px 4px 4px 4px;margin-bottom:5px;'>
+				<a href='javascript:'><img id='menu_cancelzoom_$graph_id' src='".$homeurl."images/zoom_cross_grey.disabled.png' alt='".__('Cancel zoom')."' title='".__('Cancel zoom')."'></a>";
+			if ($threshold) {
+				$return .= " <a href='javascript:'><img id='menu_threshold_$graph_id' src='".$homeurl."images/chart_curve_threshold.png' alt='".__('Warning and Critical thresholds')."' title='".__('Warning and Critical thresholds')."'></a>";
+			}
+			$return .= " <a href='javascript:'>
+				<img id='menu_overview_$graph_id' class='menu_overview' src='" . $homeurl . "images/chart_curve_overview.png' alt='" . __('Overview graph') . "' title='".__('Overview graph')."'></a>";
+			
+			// Export buttons
+			$return .= " <a href='javascript:'><img id='menu_export_csv_$graph_id' src='".$homeurl."images/csv_grey.png' alt='".__('Export to CSV')."' title='".__('Export to CSV')."'></a>";
+			// Button disabled. This feature works, but seems that is not useful enough to the final users.
+			//$return .= " <a href='javascript:'><img id='menu_export_json_$graph_id' src='".$homeurl."images/json.png' alt='".__('Export to JSON')."' title='".__('Export to JSON')."'></a>";
+			
+			$return .= "</div>";
 		}
-		$return .= " <a href='javascript:'>
-			<img id='menu_overview_$graph_id' class='menu_overview' src='" . $homeurl . "images/chart_curve_overview.png' alt='" . __('Overview graph') . "' title='".__('Overview graph')."'></a>";
-		
-		// Export buttons
-		$return .= " <a href='javascript:'><img id='menu_export_csv_$graph_id' src='".$homeurl."images/csv_grey.png' alt='".__('Export to CSV')."' title='".__('Export to CSV')."'></a>";
-		// Button disabled. This feature works, but seems that is not useful enough to the final users.
-		//$return .= " <a href='javascript:'><img id='menu_export_json_$graph_id' src='".$homeurl."images/json.png' alt='".__('Export to JSON')."' title='".__('Export to JSON')."'></a>";
-		
-		$return .= "</div>";
 	}
 	$return .= "<div id='timestamp_$graph_id' class='timestamp_graph' style='font-size:".$font_size."pt;display:none; position:absolute; background:#fff; border: solid 1px #aaa; padding: 2px; z-index:1000;'></div>";
 	$return .= "<div id='$graph_id' class='graph $adapt_key' style='width: ".$width."px; height: ".$height."px;'></div>";
@@ -489,6 +491,64 @@ function flot_pie_chart ($values, $labels, $width, $height, $water_mark,
 	return $return;
 }
 
+// Prints a FLOT pie chart
+function flot_custom_pie_chart ($flash_charts, $graph_values,
+		$width, $height, $colors, $module_name_list, $long_index,
+		$no_data,$xaxisname, $yaxisname, $water_mark, $fontpath, $font_size,
+		$unit, $ttl, $homeurl, $background_color, $legend_position) {
+	
+	
+	///TODO
+	include_javascript_dependencies_flot_graph();
+	
+	$total_modules = $graph_values['total_modules'];
+	unset($graph_values['total_modules']);
+	
+	foreach ($graph_values as $label => $value) {
+		if ($value['value'] > 1000000)
+			$legendvalue = sprintf("%sM", number_format($value['value'] / 1000000, 2));
+		else if ($value['value'] > 1000)
+			$legendvalue = sprintf("%sK", number_format($value['value'] / 1000, 2));
+		$values[] = $value['value'];
+		$legend[] = $label .": " . $legendvalue . " " .$value['unit'];
+		$labels[] = $label;
+	}
+	
+	$graph_id = uniqid('graph_');
+	
+	$return = "<div id='$graph_id' class='graph' style='width: ".$width."px; height: ".$height."px;'></div>";
+	
+	if ($water_mark != '') {
+		$return .= "<div id='watermark_$graph_id' style='display:none; position:absolute;'><img id='watermark_image_$graph_id' src='".$water_mark["url"]."'></div>";
+		$water_mark = 'true';
+	}
+	else {
+		$water_mark = 'false';
+	}
+	
+	$separator = ';;::;;';
+	
+	$labels = implode($separator, $labels);
+	$legend = implode($separator, $legend);
+	$values = implode($separator, $values);
+	if (!empty($colors)) {
+		foreach ($colors as $color) {
+			$temp_colors[] = $color['color'];
+		}
+	}
+	$colors = implode($separator, $temp_colors);
+	
+	$return .= "<script type='text/javascript'>";
+	
+	$return .= "pandoraFlotPieCustom('$graph_id', '$values', '$labels',
+			'$width', $font_size, $water_mark,
+			'$separator', '$legend_position', '$height', '$colors','$legend')";
+	
+	$return .= "</script>";
+	
+	return $return;
+}
+
 // Returns a 3D column chart
 function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
 	global $config;
@@ -505,7 +565,7 @@ function flot_hcolumn_chart ($graph_data, $width, $height, $water_mark) {
 	$graph_id2 = uniqid('graph_');
 	
 	// Set some containers to legend, graph, timestamp tooltip, etc.
-	$return .= "<div id='$graph_id' class='graph' style='width: ".$width."px; height: ".$height."px;'></div>";
+	$return .= "<div id='$graph_id' class='graph' style='width: ".$width."px; height: ".$height."px; padding-left: 20px;'></div>";
 	$return .= "<div id='value_$graph_id' style='display:none; position:absolute; background:#fff; border: solid 1px #aaa; padding: 2px'></div>";
 	
 	if ($water_mark != '') {
@@ -596,7 +656,7 @@ function flot_vcolumn_chart ($graph_data, $width, $height, $color, $legend, $lon
 	}
 	
 	// Set some containers to legend, graph, timestamp tooltip, etc.
-	$return .= "<div id='$graph_id' class='graph $adapt_key' style='width: ".$width."; height: ".$height."px;'></div>";
+	$return .= "<div id='$graph_id' class='graph $adapt_key' style='width: ".$width."; height: ".$height."px; padding-left: 20px;'></div>";
 	$return .= "<div id='value_$graph_id' style='display:none; position:absolute; background:#fff; border: solid 1px #aaa; padding: 2px'></div>";
 	
 	if ($water_mark != '') {
@@ -635,23 +695,11 @@ function flot_vcolumn_chart ($graph_data, $width, $height, $color, $legend, $lon
 		$i--;
 		
 		foreach ($values as $key => $value) {
-			$jsvar = "data_".$graph_id."_".$key;
+			$jsvar = "data_" . $graph_id . "_" . $key;
+			
+			$data[$jsvar][] = $value;
 			
-			if ($multicolor) {
-				for ($j = count($graph_data) - 1; $j>=0; $j--) {
-					if ($j == $i) {
-						$data[$jsvar.$i][$j] = $value;
-					}
-					else {
-						$data[$jsvar.$i][$j] = 0;
-					}
-				}
-			}
-			else {
-				$data[$jsvar][] = $value;
-			}
 			
-			//$return .= "<div id='value_".$i."_$graph_id' class='values_$graph_id' style='color: #000; position:absolute;'>$value</div>";
 			if ($value > $max) {
 				$max = $value;
 			}
diff --git a/pandora_console/include/graphs/pandora.d3.js b/pandora_console/include/graphs/pandora.d3.js
index 6f5e987952..f95d6d409c 100644
--- a/pandora_console/include/graphs/pandora.d3.js
+++ b/pandora_console/include/graphs/pandora.d3.js
@@ -854,4 +854,378 @@ function sunburst (recipient, data, width, height) {
 	function hide_tooltip() {
 		$("#tooltip").hide();
 	}
+}
+
+function createGauge(name, etiqueta, value, min, max, min_warning,max_warning,min_critical,max_critical,font_size, height)
+{
+	var gauges;
+	
+	var config = 
+	{
+		size: height,
+		label: etiqueta,
+		min: undefined != min ? min : 0,
+		max: undefined != max ? max : 100,
+		minorTicks: 20,
+		font_size: font_size
+	}
+	
+	//var range = config.max - config.min;
+	var range = config.max - config.min;
+	if ( min_warning > 0 ) {
+		config.yellowZones = [{ from: min_warning, to: max_warning }];
+	}
+	if ( min_critical > 0 ) {
+		config.redZones = [{ from: min_critical, to: max_critical }];
+	}
+	
+	gauges = new Gauge(name, config);
+	gauges.render();
+	gauges.redraw(value);
+	$(".gauge>text").each(function() {	
+		label = $(this).text();
+		
+		if (!isNaN(label)){
+			label = parseFloat(label);
+			text = label.toLocaleString();
+			if ( label >= 1000000)
+					text = text.substring(0,3) + "M";
+			else if (label >= 100000)
+					text = text.substring(0,3) + "K";
+				else if (label >= 1000)
+					text = text.substring(0,2) + "K";
+				
+			$(this).text(text);
+		}
+	});
+	$(".pointerContainer>text").each(function() {	
+		label = $(this).text();
+		
+		if (!isNaN(label)){
+			label = parseFloat(label);
+			text = label.toLocaleString();
+			if ( label >= 10000000)
+				text = text.substring(0,4) + "M";
+			else if ( label >= 1000000)
+						text = text.substring(0,3) + "M";
+				else if (label >= 100000)
+						text = text.substring(0,3) + "K";
+					else if (label >= 1000)
+						text = text.substring(0,2) + "K";
+			$(this).text(text);
+		}
+	});
+}
+
+function createGauges(data, width, height, font_size)
+{
+	var nombre,label,minimun_warning,maximun_warning,minimun_critical,maximun_critical,
+		mininum,maxinum,valor;
+	for (key in data) {
+		nombre = data[key].nombre;
+		nombre = nombre.replace(/&#x20;/g,'_');
+		label = undefined != data[key].label ? data[key].label : data[key].nombre;
+		label = label.replace(/&#x20;/g,' ');
+		minimun_warning 	= Math.round(parseFloat( data[key].min_warning ),2);
+		maximun_warning 	= Math.round(parseFloat( data[key].max_warning ),2);
+		minimun_critical	= Math.round(parseFloat( data[key].min_critical ),2);
+		maximun_critical 	= Math.round(parseFloat( data[key].max_critical ),2);
+		mininum = Math.round(parseFloat(data[key].min),2);
+		maxinum = Math.round(parseFloat(data[key].max),2);
+		valor = Math.round(parseFloat(data[key].value),2);
+		if (maxinum == 0)
+			maxinum = 100;
+		if (mininum == 0.00)
+			mininum = 0;
+		if (mininum == maxinum)
+			mininum = 0;
+		
+		if (maximun_critical == 0 )
+			maximun_critical = maxinum;
+		if (maximun_warning == 0 )
+			maximun_warning = minimun_critical;
+		
+		if ( maxinum <= minimun_warning ) {
+			minimun_warning = 0;
+			maximun_warning = 0;
+			minimun_critical = 0;
+			maximun_critical = 0;
+		}
+		if ( maxinum < minimun_critical ) {
+			minimun_critical = 0;
+			maximun_critical = 0;
+		}
+		if ( mininum > minimun_warning ) {
+			minimun_warning = mininum;
+		}
+		
+		createGauge(nombre, label, valor, mininum, maxinum, 
+				minimun_warning, maximun_warning, minimun_critical,
+					maximun_critical, font_size, height);
+	}
+	
+}
+
+
+function Gauge(placeholderName, configuration)
+{
+	this.placeholderName = placeholderName;
+	
+	var self = this; // for internal d3 functions
+	
+	this.configure = function(configuration)
+	{
+		this.config = configuration;
+		
+		this.config.size = this.config.size * 0.9;
+		this.config.font_size = this.config.font_size;
+		
+		this.config.raduis = this.config.size * 0.97 / 2;
+		this.config.cx = this.config.size / 2;
+		this.config.cy = this.config.size / 2;
+		
+		this.config.min = undefined != configuration.min ? configuration.min : 0; 
+		this.config.max = undefined != configuration.max ? configuration.max : 100; 
+		this.config.range = this.config.max - this.config.min;
+		
+		this.config.majorTicks = configuration.majorTicks || 5;
+		this.config.minorTicks = configuration.minorTicks || 2;
+		
+		this.config.greenColor 	= configuration.greenColor || "#109618";
+		this.config.yellowColor = configuration.yellowColor || "#FF9900";
+		this.config.redColor 	= configuration.redColor || "#DC3912";
+		
+		this.config.transitionDuration = configuration.transitionDuration || 500;
+	}
+
+	this.render = function()
+	{
+		this.body = d3.select("#" + this.placeholderName)
+							.append("svg:svg")
+							.attr("class", "gauge")
+							.attr("width", this.config.size)
+							.attr("height", this.config.size);
+		
+		this.body.append("svg:circle")
+					.attr("cx", this.config.cx)
+					.attr("cy", this.config.cy)
+					.attr("r", this.config.raduis)
+					.style("fill", "#ccc")
+					.style("stroke", "#000")
+					.style("stroke-width", "0.5px");
+					
+		this.body.append("svg:circle")
+					.attr("cx", this.config.cx)
+					.attr("cy", this.config.cy)
+					.attr("r", 0.9 * this.config.raduis)
+					.style("fill", "#fff")
+					.style("stroke", "#e0e0e0")
+					.style("stroke-width", "2px");
+					
+		for (var index in this.config.greenZones)
+		{
+			this.drawBand(this.config.greenZones[index].from, this.config.greenZones[index].to, self.config.greenColor);
+		}
+		
+		for (var index in this.config.yellowZones)
+		{
+			this.drawBand(this.config.yellowZones[index].from, this.config.yellowZones[index].to, self.config.yellowColor);
+		}
+		
+		for (var index in this.config.redZones)
+		{
+			this.drawBand(this.config.redZones[index].from, this.config.redZones[index].to, self.config.redColor);
+		}
+		
+		if (undefined != this.config.label)
+		{
+			var fontSize = Math.round(this.config.size / 9);
+			this.body.append("svg:text")
+						.attr("x", this.config.cx)
+						.attr("y", this.config.cy / 2 + fontSize / 2)
+						.attr("dy", fontSize / 2)
+						.attr("text-anchor", "middle")
+						.text(this.config.label)
+						.style("font-size", this.config.font_size+"pt")
+						.style("fill", "#333")
+						.style("stroke-width", "0px");
+		}
+		
+		var fontSize = Math.round(this.config.size / 16);
+		var majorDelta = this.config.range / (this.config.majorTicks - 1);
+		for (var major = this.config.min; major <= this.config.max; major += majorDelta)
+		{
+			var minorDelta = majorDelta / this.config.minorTicks;
+			for (var minor = major + minorDelta; minor < Math.min(major + majorDelta, this.config.max); minor += minorDelta)
+			{
+				var point1 = this.valueToPoint(minor, 0.75);
+				var point2 = this.valueToPoint(minor, 0.85);
+				
+				this.body.append("svg:line")
+							.attr("x1", point1.x)
+							.attr("y1", point1.y)
+							.attr("x2", point2.x)
+							.attr("y2", point2.y)
+							.style("stroke", "#666")
+							.style("stroke-width", "1px");
+			}
+			
+			var point1 = this.valueToPoint(major, 0.7);
+			var point2 = this.valueToPoint(major, 0.85);	
+			
+			this.body.append("svg:line")
+						.attr("x1", point1.x)
+						.attr("y1", point1.y)
+						.attr("x2", point2.x)
+						.attr("y2", point2.y)
+						.style("stroke", "#333")
+						.style("stroke-width", "2px");
+			
+			if (major == this.config.min || major == this.config.max)
+			{
+				var point = this.valueToPoint(major, 0.63);
+				
+				this.body.append("svg:text")
+				 			.attr("x", point.x)
+				 			.attr("y", point.y)
+				 			.attr("dy", fontSize / 3)
+				 			.attr("text-anchor", major == this.config.min ? "start" : "end")
+				 			.text(major)
+				 			.style("font-size", this.config.font_size+"pt")
+							.style("fill", "#333")
+							.style("stroke-width", "0px");
+			}
+		}
+		
+		var pointerContainer = this.body.append("svg:g").attr("class", "pointerContainer");
+		
+		var midValue = (this.config.min + this.config.max) / 2;
+		
+		var pointerPath = this.buildPointerPath(midValue);
+		
+		var pointerLine = d3.svg.line()
+									.x(function(d) { return d.x })
+									.y(function(d) { return d.y })
+									.interpolate("basis");
+		
+		pointerContainer.selectAll("path")
+							.data([pointerPath])
+							.enter()
+								.append("svg:path")
+									.attr("d", pointerLine)
+									.style("fill", "#dc3912")
+									.style("stroke", "#c63310")
+									.style("fill-opacity", 0.7)
+					
+		pointerContainer.append("svg:circle")
+							.attr("cx", this.config.cx)
+							.attr("cy", this.config.cy)
+							.attr("r", 0.12 * this.config.raduis)
+							.style("fill", "#4684EE")
+							.style("stroke", "#666")
+							.style("opacity", 1);
+		
+		var fontSize = Math.round(this.config.size / 10);
+		pointerContainer.selectAll("text")
+							.data([midValue])
+							.enter()
+								.append("svg:text")
+									.attr("x", this.config.cx)
+									.attr("y", this.config.size - this.config.cy / 4 - fontSize)
+									.attr("dy", fontSize / 2)
+									.attr("text-anchor", "middle")
+									.style("font-size", this.config.font_size+"pt")
+									.style("fill", "#000")
+									.style("stroke-width", "0px");
+		
+		this.redraw(this.config.min, 0);
+	}
+	
+	this.buildPointerPath = function(value)
+	{
+		var delta = this.config.range / 13;
+		
+		var head = valueToPoint(value, 0.85);
+		var head1 = valueToPoint(value - delta, 0.12);
+		var head2 = valueToPoint(value + delta, 0.12);
+		
+		var tailValue = value - (this.config.range * (1/(270/360)) / 2);
+		var tail = valueToPoint(tailValue, 0.28);
+		var tail1 = valueToPoint(tailValue - delta, 0.12);
+		var tail2 = valueToPoint(tailValue + delta, 0.12);
+		
+		return [head, head1, tail2, tail, tail1, head2, head];
+		
+		function valueToPoint(value, factor)
+		{
+			var point = self.valueToPoint(value, factor);
+			point.x -= self.config.cx;
+			point.y -= self.config.cy;
+			return point;
+		}
+	}
+	
+	this.drawBand = function(start, end, color)
+	{
+		if (0 >= end - start) return;
+		
+		this.body.append("svg:path")
+					.style("fill", color)
+					.attr("d", d3.svg.arc()
+						.startAngle(this.valueToRadians(start))
+						.endAngle(this.valueToRadians(end))
+						.innerRadius(Math.round(0.65 * this.config.raduis))
+						.outerRadius(Math.round(0.85 * this.config.raduis)))
+					.attr("transform", function() { return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(270)" });
+	}
+	
+	this.redraw = function(value, transitionDuration)
+	{
+		var pointerContainer = this.body.select(".pointerContainer");
+		
+		pointerContainer.selectAll("text").text(Math.round(value));
+		
+		var pointer = pointerContainer.selectAll("path");
+		pointer.transition()
+					.duration(undefined != transitionDuration ? transitionDuration : this.config.transitionDuration)
+					//.delay(0)
+					//.ease("linear")
+					//.attr("transform", function(d) 
+					.attrTween("transform", function()
+					{
+						var pointerValue = value;
+						if (value > self.config.max) pointerValue = self.config.max + 0.02*self.config.range;
+						else if (value < self.config.min) pointerValue = self.config.min - 0.02*self.config.range;
+						var targetRotation = (self.valueToDegrees(pointerValue) - 90);
+						var currentRotation = self._currentRotation || targetRotation;
+						self._currentRotation = targetRotation;
+						
+						return function(step) 
+						{
+							var rotation = currentRotation + (targetRotation-currentRotation)*step;
+							return "translate(" + self.config.cx + ", " + self.config.cy + ") rotate(" + rotation + ")"; 
+						}
+					});
+	}
+	
+	this.valueToDegrees = function(value)
+	{
+		// thanks @closealert
+		//return value / this.config.range * 270 - 45;
+		return value / this.config.range * 270 - (this.config.min / this.config.range * 270 + 45);
+	}
+	
+	this.valueToRadians = function(value)
+	{
+		return this.valueToDegrees(value) * Math.PI / 180;
+	}
+	
+	this.valueToPoint = function(value, factor)
+	{
+		return { 	x: this.config.cx - this.config.raduis * factor * Math.cos(this.valueToRadians(value)),
+					y: this.config.cy - this.config.raduis * factor * Math.sin(this.valueToRadians(value))		};
+	}
+	
+	// initialization
+	this.configure(configuration);	
 }
\ No newline at end of file
diff --git a/pandora_console/operation/reporting/graph_viewer.php b/pandora_console/operation/reporting/graph_viewer.php
index 8b4ac0a9b5..c36495eb40 100644
--- a/pandora_console/operation/reporting/graph_viewer.php
+++ b/pandora_console/operation/reporting/graph_viewer.php
@@ -61,6 +61,7 @@ if ($view_graph) {
 	$private = $graph["private"];
 	$width = $graph["width"];
 	$height = $graph["height"] + count($sources) * 10;
+	
 	$zoom = (int) get_parameter ('zoom', 0);
 	//Increase the height to fix the leyend rise
 	if ($zoom > 0) {
@@ -96,6 +97,18 @@ if ($view_graph) {
 	if ($stacked == -1)
 		$stacked = $graph["stacked"];
 	
+	if ($stacked == CUSTOM_GRAPH_BULLET_CHART )
+		$height = 50;
+	
+	if ($stacked == CUSTOM_GRAPH_GAUGE ){
+		if ( $graph["height"] < 150 )
+			$height = 150;
+		elseif( $graph["height"] >= 150 && $graph["height"] < 250 )
+				$height = $graph["height"];
+			elseif( $graph["height"] >= 250 )
+				$height = 200;
+	}
+	
 	$name = $graph["name"];
 	if (($graph["private"]==1) && ($graph["id_user"] != $id_user)) {
 		db_pandora_audit("ACL Violation",
@@ -149,7 +162,7 @@ if ($view_graph) {
 		"images/chart.png", false, "", false, $options);
 	
 	$graph_return = custom_graphs_print($id_graph, $height, $width, $period, $stacked,
-		true, $unixdate);
+			true, $unixdate);
 	
 	if ($graph_return){
 		echo "<table class='databox filters' cellpadding='0' cellspacing='0' width='100%'>";
@@ -193,6 +206,11 @@ if ($view_graph) {
 	$stackeds[CUSTOM_GRAPH_STACKED_AREA] = __('Stacked area');
 	$stackeds[CUSTOM_GRAPH_LINE] = __('Line');
 	$stackeds[CUSTOM_GRAPH_STACKED_LINE] = __('Stacked line');
+	$stackeds[CUSTOM_GRAPH_BULLET_CHART] = __('Bullet chart');
+	$stackeds[CUSTOM_GRAPH_GAUGE] = __('Gauge');
+	$stackeds[CUSTOM_GRAPH_HBARS] = __('Horizontal Bars');
+	$stackeds[CUSTOM_GRAPH_VBARS] = __('Vertical Bars');
+	$stackeds[CUSTOM_GRAPH_PIE] = __('Pie');
 	html_print_select ($stackeds, 'stacked', $stacked , '', '', -1, false, false);
 	echo "</td>";
 	
@@ -217,6 +235,7 @@ if ($view_graph) {
 	
 	ui_include_time_picker();
 	ui_require_jquery_file("ui.datepicker-" . get_user_language(), "include/javascript/i18n/");
+	ui_require_jquery_file("");
 	?>
 	<script language="javascript" type="text/javascript">