function d3_bullet_chart($chart_data, $width, $height, $color, $legend, $homeurl, $unit, $font, $font_size)
{
global $config;
$output = '';
$output .= include_javascript_d3(true);
$id_bullet = uniqid();
$output .= '<div id="bullet_graph_' . $id_bullet . '" class="bulle" 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":[' . (double) $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_' . $id_bullet . '").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 flot_slicesbar_graph($graph_data, $period, $width, $height, $legend, $colors, $fontpath, $round_corner, $homeurl, $watermark = '', $adapt_key = '', $stat_win = false)
{
global $config;
include_javascript_dependencies_flot_graph();
$height += 20;
$stacked_str = 'stack: stack,';
// Get a unique identifier to graph
$graph_id = uniqid('graph_');
// Set some containers to legend, graph, timestamp tooltip, etc.
if ($stat_win) {
$return = "<div id='{$graph_id}' class='graph {$adapt_key}' style='width: " . $width . "px; height: " . $height . "px; display: inline-block;'></div>";
} else {
$return = "<div id='{$graph_id}' class='graph {$adapt_key}' style='width: " . $width . "px; height: " . $height . "px;'></div>";
}
$return .= "<div id='value_{$graph_id}' style='display:none; position:absolute; background:#fff; border: solid 1px #aaa; padding: 2px'></div>";
// Set a weird separator to serialize and unserialize passing data from php to javascript
$separator = ';;::;;';
$separator2 = ':,:,,,:,:';
// Transform data from our format to library format
$labels = array();
$a = array();
$vars = array();
$datacolor = array();
$max = 0;
$i = count($graph_data);
$intervaltick = $period / $i;
$leg_max_length = 0;
foreach ($legend as $l) {
if (strlen($l) > $leg_max_length) {
$leg_max_length = strlen($l);
}
}
$fontsize = 7;
$extra_height = 15;
if (defined("METACONSOLE")) {
$extra_height = 20;
}
$return .= "<div id='extra_{$graph_id}' style='font-size: " . $fontsize . "pt; display:none; position:absolute; overflow: auto; height: " . $extra_height . "px; background:#fff; padding: 2px 2px 2px 2px; border: solid #000 1px;'></div>";
$maxticks = (int) ($width / ($fontsize * $leg_max_length));
$i_aux = $i;
while (1) {
if ($i_aux <= $maxticks) {
break;
}
$intervaltick *= 2;
$i_aux /= 2;
}
$intervaltick = (int) $intervaltick;
$acumulate = 0;
$c = 0;
$acumulate_data = array();
foreach ($graph_data as $label => $values) {
$labels[] = io_safe_output($label);
$i--;
foreach ($values as $key => $value) {
$jsvar = "d_" . $graph_id . "_" . $i;
if ($key == 'data') {
$datacolor[$jsvar] = $colors[$value];
continue;
}
$data[$jsvar][] = $value;
$acumulate_data[$c] = $acumulate;
$acumulate += $value;
$c++;
//$return .= "<div id='value_".$i."_$graph_id' class='values_$graph_id' style='color: #000; position:absolute;'>$value</div>";
if ($value > $max) {
$max = $value;
}
}
}
// Store serialized data to use it from javascript
$labels = implode($separator, $labels);
$datacolor = implode($separator, $datacolor);
$legend = io_safe_output(implode($separator, $legend));
$acumulate_data = io_safe_output(implode($separator, $acumulate_data));
// Store data series in javascript format
$jsvars = '';
$jsseries = array();
$date = get_system_time();
$datelimit = ($date - $period) * 1000;
$i = 0;
$values2 = array();
foreach ($data as $jsvar => $values) {
$values2[] = implode($separator, $values);
$i++;
}
$values = implode($separator2, $values2);
// Javascript code
$return .= "<script type='text/javascript'>";
$return .= "//<![CDATA[\n";
$return .= "integriaFlotSlicebar('{$graph_id}', '{$values}', '{$datacolor}', '{$labels}', '{$legend}', '{$acumulate_data}', {$intervaltick}, false, {$max}, '{$separator}', '{$separator2}')";
$return .= "\n//]]>";
$return .= "</script>";
return $return;
}
