Bubble item and percentile bar item are new. Fixed some visual errors

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -632,7 +632,9 @@ function readFields() {
 	values['height_module_graph'] = $("input[name=height_module_graph]").val();
 	values['event_max_time_row'] = $("select[name=event_max_time_row]").val();
 	values['type_percentile'] = $("select[name=type_percentile]").val();
-	values['percentile_color'] = $("input[name='percentile_color']").val();
+	values['percentile_color'] = $("input[name=percentile_color]").val();
+	values['percentile_label_color'] = $("input[name=percentile_label_color]").val();
+	values['percentile_label'] = $("input[name=percentile_label]").val();
 	values['value_show'] = $("select[name=value_show]").val();
 	
 	values['enable_link'] = $("input[name=enable_link]").is(':checked') ? 1 : 0;
@@ -1283,12 +1285,18 @@ function loadFieldsFromDB(item) {
 					$("input[name=height_module_graph]").val(val);
 				if (key == 'type_percentile') 
 					$("select[name=type_percentile]").val(val);
-
+				if (key == 'percentile_label') 
+					$("input[name=percentile_label]").val(val);
 				if (key == 'percentile_color') {
-					$("input[name='percentile_color']").val(val);
+					$("input[name=percentile_color]").val(val);
 					$("#percentile_item_row_5 .ColorPickerDivSample")
 						.css('background-color', val);
 				}
+				if (key == 'percentile_label_color') {
+					$("input[name=percentile_label_color]").val(val);
+					$("#percentile_item_row_6 .ColorPickerDivSample")
+						.css('background-color', val);
+				}
 
 				if (key == 'value_show') {
 					$("select[name=value_show]").val(val);

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -119,6 +119,8 @@ $border_width = (int)get_parameter('border_width', 0);
 $border_color = get_parameter('border_color', '');
 $fill_color = get_parameter('fill_color', '');
 $percentile_color = get_parameter('percentile_color', '');
+$percentile_label = get_parameter('percentile_label', '');
+$percentile_label_color = get_parameter('percentile_label_color', '');
 $width_box = (int)get_parameter('width_box', 0);
 $height_box = (int)get_parameter('height_box', 0);
 $line_start_x = (int)get_parameter('line_start_x', 0);
@@ -620,6 +622,8 @@ switch ($action) {
 								$values['image'] = $value_show;
 
 							$values['border_color'] = $percentile_color;
+							$values['fill_color'] = $percentile_label_color;
+							$values['label'] = $percentile_label;
 						}
 						break;
 					case 'icon':
@@ -797,6 +801,8 @@ switch ($action) {
 							$elementFields['type_percentile'] = 'interior_circular_progress_bar';
 						}
 						$elementFields['percentile_color'] = $elementFields['border_color'];
+						$elementFields['percentile_label_color'] = $elementFields['fill_color'];
+						$elementFields['percentile_label'] = $elementFields['label'];
 						break;
 					
 					case 'module_graph':
@@ -963,6 +969,8 @@ switch ($action) {
 				$values['image'] = $value_show; //Hack to save it show percent o value.
 				$values['width'] = $width_percentile;
 				$values['height'] = $max_percentile;
+				$values['fill_color'] = $percentile_label_color;
+				$values['label'] = $percentile_label;
 				break;
 			case 'static_graph':
 				$values['type'] = STATIC_GRAPH;

pandora_console/include/functions_visual_map.php

@@ -1417,45 +1417,17 @@ function visual_map_print_item($mode = "read", $layoutData,
 			break;
 		
 		case PERCENTILE_BAR:
-			$imgpos = '';
+			if (($layoutData['image'] == 'value') && ($value_text !== false)) {
+				$unit_text = db_get_sql ('SELECT unit
+					FROM tagente_modulo
+					WHERE id_agente_modulo = ' . $id_module);
+				$unit_text = trim(io_safe_output($unit_text));
 
-			if($layoutData['label_position']=='left'){
+				$percentile = $value_text;
-				$imgpos = 'float:right;';
-			}
-			else if($layoutData['label_position']=='right'){
-				$imgpos = 'float:left;';
-			}
-			
-			$progress_bar_heigh = 15;
-			if (!empty($proportion)) {
-				if ($width != 0) {
-					$width = (integer)($proportion['proportion_width'] * $width);
-				}
-				else {
-					$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
-				}
-
-				if ($height != 0) {
-					$height = (integer)($proportion['proportion_height'] * $height);
-					$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
-				}
-				else {
-					$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
-				}
-			}
-			
-			if($layoutData['label_position']=='up'){
-				echo io_safe_output($text);
-			}
-			
-			ob_start();
-			if ($type == PERCENTILE_BUBBLE) {
-				echo progress_bubble($percentile, $width, $width, '', 1, $value_text, $colorStatus,$imgpos);
 			}
 			else {
-				echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus,$imgpos);
+				$unit_text = "%";
 			}
-			$img = ob_get_clean();
 			
 			if (get_parameter('action') == 'edit') {
 				if ($width == 0) {
@@ -1466,67 +1438,25 @@ function visual_map_print_item($mode = "read", $layoutData,
 				}
 			}
 			else{
-				$img = str_replace('>', 'class="image" style="height:'.$himg.'px;width:'.$wimg.'px;'.$imgpos.'" id="image_' . $id . '" />', $img);
+				$img = d3_progress_bar($id, $percentile, $width, 50, $border_color, $unit_text, $label, $fill_color);
 			}
 			
-			echo $img;		
+			echo $img;
 			
-			if($layoutData['label_position']=='down'){
-				echo io_safe_output($text);
-			}
-			else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
-				echo io_safe_output($text);
-			}
-		
 		break;
 		case PERCENTILE_BUBBLE:
-			$imgpos = '';
+			if (($layoutData['image'] == 'value') && ($value_text !== false)) {
+				$unit_text = db_get_sql ('SELECT unit
+					FROM tagente_modulo
+					WHERE id_agente_modulo = ' . $id_module);
+				$unit_text = trim(io_safe_output($unit_text));
 
-			if($layoutData['label_position']=='left'){
+				$percentile = $value_text;
-				$imgpos = 'float:right;';
-			}
-			else if($layoutData['label_position']=='right'){
-				$imgpos = 'float:left;';
-			}
-		
-		 	$progress_bar_heigh = 15;
-			if (!empty($proportion)) {
-				if ($width != 0) {
-					$width = (integer)($proportion['proportion_width'] * $width);
-				}
-				else {
-					$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
-				}
-
-				if ($height != 0) {
-					$height = (integer)($proportion['proportion_height'] * $height);
-					$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
-				}
-				else {
-					$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
-				}
-			}
-			
-			if($layoutData['label_position']=='up'){
-				echo io_safe_output($text);
-			}
-			
-			ob_start();
-			if ($type == PERCENTILE_BUBBLE) {
-				if($width == 0){
-					echo progress_bubble($percentile, 100,100, '', 1, $value_text, $colorStatus,$s);
-				
-				}
-				else{
-					echo progress_bubble($percentile, $width,$width, '', 1, $value_text, $colorStatus);
-				}
 			}
 			else {
-				echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
+				$unit_text = "%";
 			}
 
-			$img = ob_get_clean();
-			
 			if(get_parameter('action') == 'edit'){
 				if($width == 0){
 					$img =  '<img src="images/console/signes/percentil_bubble.png" style="width:130px;height:130px;'.$imgpos.'">';	
@@ -1536,51 +1466,18 @@ function visual_map_print_item($mode = "read", $layoutData,
 				}
 			}
 			else{
-				$img = str_replace('>', 'class="image" style="width:'.$wimg.'px;height:'.$himg.'px;'.$imgpos.'" id="image_' . $id . '" />', $img);
+				if($width == 0){
+					$img = d3_progress_bubble($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
+				}
+				else{
+					$img = d3_progress_bubble($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_color);
+				}
 			}
 			
 			echo $img;
 			
-			if($layoutData['label_position']=='down'){
-				echo io_safe_output($text);
-			}			
-			else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
-				echo io_safe_output($text);
-			}
-			
 			break;
 		case CIRCULAR_PROGRESS_BAR:
-			$imgpos = '';
-
-			if($layoutData['label_position']=='left'){
-				$imgpos = 'float:right;';
-			}
-			else if($layoutData['label_position']=='right'){
-				$imgpos = 'float:left;';
-			}
-		
-		 	$progress_bar_heigh = 15;
-			if (!empty($proportion)) {
-				if ($width != 0) {
-					$width = (integer)($proportion['proportion_width'] * $width);
-				}
-				else {
-					$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
-				}
-
-				if ($height != 0) {
-					$height = (integer)($proportion['proportion_height'] * $height);
-					$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
-				}
-				else {
-					$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
-				}
-			}
-			
-			if($layoutData['label_position']=='up'){
-				echo io_safe_output($text);
-			}
-			
 			if(get_parameter('action') == 'edit'){
 				if($width == 0){
 					$img =  '<img src="images/console/signes/circular-progress-bar.png" style="width:130px;height:130px;'.$imgpos.'">';	
@@ -1602,56 +1499,18 @@ function visual_map_print_item($mode = "read", $layoutData,
 					$unit_text = "%";
 				}
 
-				if($width < 200){
+				if($width == 0){
-					$img = progress_circular_bar($id, $percentile, 200,200, $border_color, $unit_text);
+					$img = progress_circular_bar($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
 				}
 				else{
-					$img = progress_circular_bar($id, $percentile, $width, $width, $border_color, $unit_text);
+					$img = progress_circular_bar($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_color);
 				}
 			}
 
 			echo $img;
 			
-			if($layoutData['label_position']=='down'){
-				echo io_safe_output($text);
-			}			
-			else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
-				echo io_safe_output($text);
-			}
-			
 			break;
 		case CIRCULAR_INTERIOR_PROGRESS_BAR:
-			$imgpos = '';
-
-			if($layoutData['label_position']=='left'){
-				$imgpos = 'float:right;';
-			}
-			else if($layoutData['label_position']=='right'){
-				$imgpos = 'float:left;';
-			}
-		
-		 	$progress_bar_heigh = 15;
-			if (!empty($proportion)) {
-				if ($width != 0) {
-					$width = (integer)($proportion['proportion_width'] * $width);
-				}
-				else {
-					$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
-				}
-
-				if ($height != 0) {
-					$height = (integer)($proportion['proportion_height'] * $height);
-					$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
-				}
-				else {
-					$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
-				}
-			}
-			
-			if($layoutData['label_position']=='up'){
-				echo io_safe_output($text);
-			}
-			
 			if(get_parameter('action') == 'edit'){
 				if($width == 0){
 					$img =  '<img src="images/console/signes/circular-progress-bar-interior.png" style="width:130px;height:130px;'.$imgpos.'">';	
@@ -1673,24 +1532,17 @@ function visual_map_print_item($mode = "read", $layoutData,
 					$unit_text = "%";
 				}
 
-				if($width < 200){
+				if($width == 0){
-					$img = progress_circular_bar_interior($id, $percentile, 200,200, $border_color);
+					$img = progress_circular_bar_interior($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
 				
 				}
 				else{
-					$img = progress_circular_bar_interior($id, $percentile, $width, $width, $border_color);
+					$img = progress_circular_bar_interior($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_color);
 				}
 			}
 			
 			echo $img;
 			
-			if($layoutData['label_position']=='down'){
-				echo io_safe_output($text);
-			}			
-			else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
-				echo io_safe_output($text);
-			}
-			
 			break;
 		case MODULE_GRAPH:
 			if ($layoutData['label_position']=='up') {

pandora_console/include/functions_visual_map_editor.php

@@ -157,8 +157,6 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items['label_row'] = array();
 			$form_items['label_row']['items'] = array('label',
 				'static_graph',
-				'percentile_bar',
-				'percentile_item',
 				'module_graph',
 				'simple_value',
 				'datos',
@@ -445,14 +443,28 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 
 			$form_items['percentile_item_row_5'] = array();
 			$form_items['percentile_item_row_5']['items'] = array('percentile_bar', 'percentile_item', 'datos');
-			$form_items['percentile_item_row_5']['html'] = '<td align="left">' . __('Color') . ui_print_help_tip (
+			$form_items['percentile_item_row_5']['html'] = '<td align="left">' . __('Element color') . '</td>
-					__("Only for circular percentile items."), true) . '</td>
 				<td align="left">' .
 				html_print_input_text_extended ('percentile_color', '#ffffff',
 					'text-percentile_color', '', 7, 7, false, '',
 					'class="percentile_color"', true) .
 				'</td>';
 
+			$form_items['percentile_item_row_6'] = array();
+			$form_items['percentile_item_row_6']['items'] = array('percentile_bar', 'percentile_item', 'datos');
+			$form_items['percentile_item_row_6']['html'] = '<td align="left">' . __('Label color') . '</td>
+				<td align="left">' .
+				html_print_input_text_extended ('percentile_label_color', '#ffffff',
+					'text-percentile_label_color', '', 7, 7, false, '',
+					'class="percentile_label_color"', true) .
+				'</td>';
+
+			$form_items['percentile_bar_row_7'] = array();
+			$form_items['percentile_bar_row_7']['items'] = array('percentile_bar', 'percentile_item', 'datos');
+			$form_items['percentile_bar_row_7']['html'] = '<td align="left">' .
+				__('Label') . '</td>
+				<td align="left">' . html_print_input_text('percentile_label', '', '', 30, 100, true) . '</td>';
+
 			$form_items['period_row'] = array();
 			$form_items['period_row']['items'] = array('module_graph', 'simple_value', 'datos');
 			$form_items['period_row']['html'] = '<td align="left">' . __('Period') . '</td>
@@ -620,6 +632,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$(".fill_color").attachColorPicker();
 			$(".line_color").attachColorPicker();
 			$(".percentile_color").attachColorPicker();
+			$(".percentile_label_color").attachColorPicker();
 			
 			$("input[name=radio_choice]").change(function(){
 				$('#count_items').html(1);

pandora_console/include/graphs/functions_d3.php

@@ -310,7 +310,41 @@ function ux_console_phases_donut ($phases, $id, $return = false) {
 	return $output;
 }
 
-function progress_circular_bar ($id, $percentile, $width, $height, $color, $unit = "%") {
+function d3_progress_bar ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
+	global $config;
+
+	$recipient_name = "progress_bar_" . $id;
+	$recipient_name_to_js = "#progress_bar_" . $id;
+
+	$output = "";
+
+	$output .= "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
+	$output .= include_javascript_d3(true);
+	$output .= "<script language=\"javascript\" type=\"text/javascript\">
+					progress_bar_d3('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
+				</script>";
+
+	return $output;
+}
+
+function d3_progress_bubble ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
+	global $config;
+
+	$recipient_name = "progress_bubble_" . $id;
+	$recipient_name_to_js = "#progress_bubble_" . $id;
+
+	$output = "";
+
+	$output .= "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
+	$output .= include_javascript_d3(true);
+	$output .= "<script language=\"javascript\" type=\"text/javascript\">
+					progress_bubble_d3('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
+				</script>";
+
+	return $output;
+}
+
+function progress_circular_bar ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
 	global $config;
 
 	$recipient_name = "circular_progress_bar_" . $id;
@@ -321,13 +355,13 @@ function progress_circular_bar ($id, $percentile, $width, $height, $color, $unit
 	$output .= "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
 	$output .= include_javascript_d3(true);
 	$output .= "<script language=\"javascript\" type=\"text/javascript\">
-					print_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "');
+					print_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
 				</script>";
 
 	return $output;
 }
 
-function progress_circular_bar_interior ($id, $percentile, $width, $height, $color, $unit = "%") {
+function progress_circular_bar_interior ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
 	global $config;
 	
 	$recipient_name = "circular_progress_bar_interior_" . $id;
@@ -338,9 +372,10 @@ function progress_circular_bar_interior ($id, $percentile, $width, $height, $col
 	$output .= "<div id=" . $recipient_name .  " style='overflow: hidden;'></div>";
 	$output .= include_javascript_d3(true);
 	$output .= "<script language=\"javascript\" type=\"text/javascript\">
-					print_interior_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "');
+					print_interior_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
 				</script>";
 
 	return $output;
 }
+
 ?>

pandora_console/include/graphs/pandora.d3.js

@@ -1494,9 +1494,195 @@ function print_phases_donut (recipient, phases) {
 	}
 }
 
-function print_circular_progress_bar (recipient, percentile, width, height, color, unit) {
+function progress_bar_d3 (recipient, percentile, width, height, color, unit, label, label_color) {
+	var startPercent = 0;
+	var endPercent = parseInt(percentile) / 100;
+	var count = Math.abs((endPercent - startPercent) / 0.01);
+	var step = endPercent < startPercent ? -0.01 : 0.01;
+	var formatPercent = d3.format('.2f');
+
+	var circle = d3.select(recipient)
+		.append("svg")
+			.attr("width", width)
+			.attr("height", height);
+
+	var progress_back = circle.append('rect')
+		.attr('fill', '#000000')
+		.attr('fill-opacity', 0.5)
+		.attr('height', 20)
+		.attr('width', width)
+		.attr('rx', 10)
+		.attr('ry', 10)
+		.attr('x', 0);
+
+	var progress_front = circle.append('rect')
+		.attr('fill', color)
+		.attr('fill-opacity', 1)
+		.attr('height', 20)
+		.attr('width', 0)
+		.attr('rx', 10)
+		.attr('ry', 10)
+		.attr('x', 0);
+
+	var labelText = circle.append("text")
+		.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
+		.attr('fill', label_color)
+		.style("font-family", "arial")
+		.style("font-weight", "bold")
+		.style("font-size", 20)
+		.html(label)
+		.attr('dy', '15')
+		.attr('text-anchor', 'middle');
+
+	var numberText = circle.append("text")
+		.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
+		.attr('fill', '#FFFFFF')
+		.style("font-family", "arial")
+		.style("font-weight", "bold")
+		.style("font-size", 14)
+		.attr('text-anchor', 'middle')
+		.attr('dy', '-10');
+
+	function updateProgress(bar_progress) {
+		numberText.text(formatPercent(bar_progress * 100) + " " + unit);
+		progress_front.attr('width', (width * bar_progress));
+	}
+
+	var bar_progress = startPercent;
+
+	(function loops() {
+		updateProgress(bar_progress);
+
+		if (count > 0) {
+			count--;
+			bar_progress += step;
+			setTimeout(loops, 30);
+		}
+	})();
+}
+
+function progress_bubble_d3 (recipient, percentile, width, height, color, unit, label, label_color) {
+	var startPercent = 0;
+	var endPercent = parseInt(percentile) / 100;
+	var count = Math.abs((endPercent - startPercent) / 0.01);
+	var step = endPercent < startPercent ? -0.01 : 0.01;
+	var formatPercent = d3.format('.2f');
+
+	var numberSize = 0;
+	var textSize = 0;
+	var unitSize = 0;
+	var yPosText = 0;
+	var yPosUnit = 0;
+	if (width >= 500) {
+		numberSize = 100;
+		textSize = 50;
+		unitSize = 50;
+		yPosText = '-100';
+		yPosUnit = '100';
+	}
+	else if (width >= 400) {
+		numberSize = 80;
+		textSize = 40;
+		unitSize = 40;
+		yPosText = '-80';
+		yPosUnit = '80';
+	}
+	else if (width >= 300) {
+		numberSize = 60;
+		textSize = 30;
+		unitSize = 30;
+		yPosText = '-60';
+		yPosUnit = '60';
+	}
+	else if (width >= 200) {
+		numberSize = 40;
+		textSize = 20;
+		unitSize = 20;
+		yPosText = '-40';
+		yPosUnit = '40';
+	}
+	else if (width >= 100) {
+		numberSize = 20;
+		textSize = 10;
+		unitSize = 10;
+		yPosText = '-20';
+		yPosUnit = '25';
+	}
+	else {
+		numberSize = 10;
+		textSize = 8;
+		unitSize = 8;
+		yPosText = '-10';
+		yPosUnit = '10';
+	}
+
+	var circle = d3.select(recipient)
+		.append("svg")
+			.attr("width", width)
+			.attr("height", height);
+
+	var progress_back = circle.append('circle')
+		.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
+		.attr('fill', '#000000')
+		.attr('fill-opacity', 0.5)
+		.attr('r', width/2);
+
+	var progress_front = circle.append('circle')
+		.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
+		.attr('fill', color)
+		.attr('fill-opacity', 1)
+		.attr('r', 0);
+
+	var labelText = circle.append("text")
+		.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
+		.attr('fill', label_color)
+		.style("font-family", "arial")
+		.style("font-weight", "bold")
+		.style("font-size", textSize)
+		.html(label)
+		.attr('dy', yPosText)
+		.attr('text-anchor', 'middle');
+
+	var numberText = circle.append("text")
+		.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
+		.attr('fill', '#FFFFFF')
+		.style("font-family", "arial")
+		.style("font-weight", "bold")
+		.style("font-size", numberSize)
+		.attr('text-anchor', 'middle')
+		.attr('dy', '5');
+
+	var unitText = circle.append("text")
+		.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
+		.attr('fill', '#FFFFFF')
+		.style("font-family", "arial")
+		.style("font-weight", "bold")
+		.text(unit)
+		.style("font-size", unitSize)
+		.attr('text-anchor', 'middle')
+		.attr('dy', yPosUnit);
+
+	function updateProgress(bar_progress) {
+		numberText.text(formatPercent(bar_progress * 100));
+		progress_front.attr('r', ((width/2) * bar_progress));
+	}
+
+	var bar_progress = startPercent;
+
+	(function loops() {
+		updateProgress(bar_progress);
+
+		if (count > 0) {
+			count--;
+			bar_progress += step;
+			setTimeout(loops, 30);
+		}
+	})();
+}
+
+function print_circular_progress_bar (recipient, percentile, width, height, color, unit, label, label_color) {
 	var twoPi = Math.PI * 2;
-	var radius = (width / 2) - 10;
+	var radius = (width / 2);
 	var border = 20;
 	var startPercent = 0;
 	var endPercent = parseInt(percentile) / 100;
@@ -1504,6 +1690,54 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
 	var step = endPercent < startPercent ? -0.01 : 0.01;
 	var formatPercent = d3.format('.2f');
 
+	var numberSize = 0;
+	var textSize = 0;
+	var unitSize = 0;
+	var yPosText = 0;
+	var yPosUnit = 0;
+	if (width >= 500) {
+		numberSize = 100;
+		textSize = 50;
+		unitSize = 50;
+		yPosText = '-100';
+		yPosUnit = '100';
+	}
+	else if (width >= 400) {
+		numberSize = 80;
+		textSize = 40;
+		unitSize = 40;
+		yPosText = '-80';
+		yPosUnit = '80';
+	}
+	else if (width >= 300) {
+		numberSize = 60;
+		textSize = 30;
+		unitSize = 30;
+		yPosText = '-60';
+		yPosUnit = '60';
+	}
+	else if (width >= 200) {
+		numberSize = 40;
+		textSize = 20;
+		unitSize = 20;
+		yPosText = '-30';
+		yPosUnit = '40';
+	}
+	else if (width >= 100) {
+		numberSize = 20;
+		textSize = 10;
+		unitSize = 10;
+		yPosText = '-10';
+		yPosUnit = '25';
+	}
+	else {
+		numberSize = 2;
+		textSize = 1;
+		unitSize = 1;
+		yPosText = '-1';
+		yPosUnit = '2';
+	}
+
 	var arc = d3.svg.arc()
 		.startAngle(0)
 		.innerRadius(radius)
@@ -1534,20 +1768,20 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
 		.attr('fill', color)
 		.attr('fill-opacity', 1);
 
-	var numberText = circle.append("text")
+	var labelText = circle.append("text")
-		.attr('fill', '#000000')
+		.attr('fill', label_color)
 		.style("font-family", "arial")
 		.style("font-weight", "bold")
-		.style("font-size", 20)
+		.style("font-size", textSize)
-		.text("YES")
+		.html(label)
 		.attr('text-anchor', 'middle')
-		.attr('dy', '-25');
+		.attr('dy', yPosText);
 
 	var numberText = circle.append("text")
 		.attr('fill', '#000000')
 		.style("font-family", "arial")
 		.style("font-weight", "bold")
-		.style("font-size", 32)
+		.style("font-size", numberSize)
 		.attr('text-anchor', 'middle')
 		.attr('dy', '10');
 
@@ -1555,10 +1789,10 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
 		.attr('fill', '#000000')
 		.style("font-family", "arial")
 		.style("font-weight", "bold")
-		.style("font-size", 16)
+		.style("font-size", unitSize)
 		.text(unit)
 		.attr('text-anchor', 'middle')
-		.attr('dy', '40');
+		.attr('dy', yPosUnit);
 
 	function updateProgress(progress) {
 		foreground.attr('d', arc.endAngle(twoPi * progress));
@@ -1579,10 +1813,10 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
 	})();
 }
 
-function print_interior_circular_progress_bar (recipient, percentile, width, height, color, unit) {
+function print_interior_circular_progress_bar (recipient, percentile, width, height, color, unit, label, label_color) {
 	var twoPi = Math.PI * 2;
-	var radius = (width / 2) - 30;
+	var radius = (width / 2) - 20;
-	var radius2 = (width / 2) - 10;
+	var radius2 = (width / 2);
 	var border = 20;
 	var startPercent = 0;
 	var endPercent = parseInt(percentile) / 100;
@@ -1590,6 +1824,54 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
 	var step = endPercent < startPercent ? -0.01 : 0.01;
 	var formatPercent = d3.format('.2f');
 
+	var numberSize = 0;
+	var textSize = 0;
+	var unitSize = 0;
+	var yPosText = 0;
+	var yPosUnit = 0;
+	if (width >= 500) {
+		numberSize = 100;
+		textSize = 50;
+		unitSize = 50;
+		yPosText = '-100';
+		yPosUnit = '100';
+	}
+	else if (width >= 400) {
+		numberSize = 80;
+		textSize = 40;
+		unitSize = 40;
+		yPosText = '-80';
+		yPosUnit = '80';
+	}
+	else if (width >= 300) {
+		numberSize = 60;
+		textSize = 30;
+		unitSize = 30;
+		yPosText = '-60';
+		yPosUnit = '60';
+	}
+	else if (width >= 200) {
+		numberSize = 40;
+		textSize = 20;
+		unitSize = 20;
+		yPosText = '-30';
+		yPosUnit = '40';
+	}
+	else if (width >= 100) {
+		numberSize = 20;
+		textSize = 10;
+		unitSize = 10;
+		yPosText = '-10';
+		yPosUnit = '25';
+	}
+	else {
+		numberSize = 2;
+		textSize = 1;
+		unitSize = 1;
+		yPosText = '-1';
+		yPosUnit = '2';
+	}
+
 	var arc = d3.svg.arc()
 		.startAngle(0)
 		.innerRadius(radius)
@@ -1633,20 +1915,20 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
 		.attr('fill', color)
 		.attr('fill-opacity', 1);
 
-	var numberText = circle.append("text")
+	var labelText = circle.append("text")
-		.attr('fill', '#000000')
+		.attr('fill', label_color)
 		.style("font-family", "arial")
 		.style("font-weight", "bold")
-		.style("font-size", 20)
+		.style("font-size", textSize)
-		.text("YES")
+		.html(label)
 		.attr('text-anchor', 'middle')
-		.attr('dy', '-25');
+		.attr('dy', yPosText);
 
 	var numberText = circle.append("text")
 		.attr('fill', '#000000')
 		.style("font-family", "arial")
 		.style("font-weight", "bold")
-		.style("font-size", 32)
+		.style("font-size", numberSize)
 		.attr('text-anchor', 'middle')
 		.attr('dy', '10');
 
@@ -1654,10 +1936,10 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
 		.attr('fill', '#000000')
 		.style("font-family", "arial")
 		.style("font-weight", "bold")
-		.style("font-size", 16)
+		.style("font-size", unitSize)
 		.text(unit)
 		.attr('text-anchor', 'middle')
-		.attr('dy', '40');
+		.attr('dy', yPosUnit);
 
 	function updateProgress(progress) {
 		foreground.attr('d', arc.endAngle(twoPi * progress));