Merge branch 'develop' of https://github.com/pandorafms/pandorafms into develop
This commit is contained in:
fermin831
commit
121faf9911
|
|
@ -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>";
|
||||
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
?>
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
?>
|
||||
?>
|
||||
|
|
@ -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);
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(' ','_',$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;
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(/ /g,'_');
|
||||
label = undefined != data[key].label ? data[key].label : data[key].nombre;
|
||||
label = label.replace(/ /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);
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue