/** * Show a multi-area chart * * @param $raw_datas : an array with : * - key 'datas', ex : array( 'test1' => 15, 'test2' => 25) * - key 'unit', ex : '%', 'Kg' (optionnal) * - key 'spline', curves line (boolean - optionnal) * @param $title : title of the chart * @param $desc : description of the chart (optionnal) * @param $show_label : behavior of the graph labels, * values : 'hover', 'never', 'always' (optionnal) * @param $export : keep only svg to export (optionnal) * @return nothing */ function showGarea($params) { global $LANG; $criterias = PluginMreportingCommon::initGraphParams($params); foreach ($criterias as $key => $val) { ${$key} = $val; } $configs = PluginMreportingConfig::initConfigParams($opt['f_name'], $opt['class']); foreach ($configs as $k => $v) { ${$k} = $v; } //if (self::DEBUG_GRAPH && isset($raw_datas)) Toolbox::logdebug($raw_datas); $options = array("title" => $title, "desc" => $desc, "randname" => $randname, "export" => $export, "delay" => $delay, "short_classname" => $opt["short_classname"]); $this->initGraph($options); if (!isset($raw_datas['datas'])) { echo "}</script>"; echo $LANG['plugin_mreporting']["error"][1]; $end['opt']["export"] = false; $end['opt']["randname"] = false; $end['opt']["f_name"] = $opt['f_name']; $end['opt']["class"] = $opt['class']; PluginMreportingCommon::endGraph($end); return false; } $datas = $raw_datas['datas']; $labels2 = $raw_datas['labels2']; $datas = $this->initDatasMultiple($datas, $labels2, $unit); $always = ''; $hover = ''; PluginMreportingConfig::checkVisibility($show_label, $always, $hover); $nb_bar = count($datas); $height = 20 * $nb_bar + 250; if ($height < 450) { $height = 450; } $JS = <<<JAVASCRIPT var width_area = {$this->width}; var height_area = {$height}; var offset = 0; var step = Math.round(m / 20); var x = pv.Scale.linear(0, m-1).range(5, width_area); var y = pv.Scale.linear(0, max).range(0, height_area-(n*14)); var i = -1; //console.log(x.ticks()); /* The root panel. */ vis{$randname} = new pv.Panel() .width(width_area) .height(height_area) .bottom(20) .left(50) .right(15) .top(5); /* Y-ticks. */ vis{$randname}.add(pv.Rule) .data(y.ticks()) .bottom(function(d) Math.round(y(d)) - .5) .strokeStyle(function(d) d ? "#eee" : "black") .anchor("left").add(pv.Label) .text(function(d) d.toFixed(1)); /* X-ticks. */ vis{$randname}.add(pv.Rule) .data(x.ticks(m)) .left(function(d) Math.round(x(d)) - .5) .strokeStyle(function() { if (this.index == 0) return "black"; return (i == this.index) ? "black" : "#eee"; }) .height(height_area - (n*14)) .bottom(-5) .anchor("bottom").add(pv.Label) .text(function(d) labels2[this.index]) .visible(function() { if ((this.index / step) == Math.round(this.index / step)) return true; else return false; }); /* add mini black lines in front of labels tick */ vis{$randname}.add(pv.Rule) .data(x.ticks(m)) .left(function() x(this.index)-1) .bottom(-5) .strokeStyle("black") .height(5) .visible(function() { if ((this.index / step) == Math.round(this.index / step)) return true; else return false; }); /* A panel for each data series. */ var panel{$randname} = vis{$randname}.add(pv.Panel) .data(datas); /* The line. */ var lines{$randname} = panel{$randname}.add(pv.Line) .tension(function () { return ('{$unit}' == '%') ? 0.9 : 0.7; }) .data(function(d) d) .interpolate(function () { //curve line if ({$spline}>0) return "cardinal"; else return "linear"; }) .strokeStyle(function() { return colors(this.parent.index); }) .left(function() x(this.index)) .bottom(function(d) y(d)) .visible(function() {return (this.index < ((offset / 2) * ( m / 12))); }) .lineWidth(2); if ('{$area}'>0) { lines{$randname}.add(pv.Area) .visible(function() { return m < ((offset / 2) * ( m / 12)); }) .lineWidth(0) .bottom(1) .fillStyle(function() { return colors(this.parent.index).alpha(.15); }) .height(function(d) y(d)); } /* The dots*/ var dots{$randname} = lines{$randname}.add(pv.Dot) .left(function() x(this.index)) .bottom(function(d) y(d)) .fillStyle(function () { return (i == this.index) ? colors(this.parent.index) : "white"; }) .lineWidth(2) .size(function () { return (i == this.index) ? 15 : 10;}); /* The legend */ var legend_dots{$randname} = lines{$randname}.add(pv.Dot) .data(function(d) [d[i]]) .left(5) .top(function() this.parent.index * 13 + 10); var legend_labels{$randname} = legend_dots{$randname}.anchor("right").add(pv.Label) .text(function(d) { var text = labels[this.parent.index]; if (i > -1 && {$hover}) text += " : "+d+" {$unit}"; // mouse over labels return text; }); /* An invisible bar to capture events (without flickering). */ vis{$randname}.add(pv.Bar) .fillStyle("rgba(0,0,0,.001)") .event("mouseout", function() { i = -1; return vis{$randname}; }) .event("mousemove", function() { i = Math.round(x.invert(vis{$randname}.mouse().x)); return vis{$randname} ; }); //render in loop to animate var interval = setInterval(function() { offset++; vis{$randname}.render(); if (offset > 100) clearInterval(interval); }, 20); JAVASCRIPT; if ($show_graph) { echo $JS; } $opt['randname'] = $randname; $options = array("opt" => $opt, "export" => $export, "datas" => $datas, "labels2" => $labels2, "flip_data" => $flip_data, "unit" => $unit); PluginMreportingCommon::endGraph($options); }
/** * Show a multi-area chart * * @param $raw_datas : an array with : * - key 'datas', ex : array( 'test1' => 15, 'test2' => 25) * - key 'unit', ex : '%', 'Kg' (optionnal) * - key 'spline', curves line (boolean - optionnal) * @param $title : title of the chart * @param $desc : description of the chart (optionnal) * @param $show_label : behavior of the graph labels, * values : 'hover', 'never', 'always' (optionnal) * @param $export : keep only svg to export (optionnal) * @return nothing */ function showGArea($params) { global $LANG; $criterias = PluginMreportingCommon::initGraphParams($params); foreach ($criterias as $key => $val) { ${$key} = $val; } //$rand = $opt['rand']; $configs = PluginMreportingConfig::initConfigParams($opt['f_name'], $opt['class']); foreach ($configs as $k => $v) { ${$k} = $v; } if (self::DEBUG_GRAPH && isset($raw_datas)) { Toolbox::logdebug($raw_datas); } if (isset($raw_datas['datas'])) { $datas = $raw_datas['datas']; } else { $datas = array(); } $options = array("title" => $title, "desc" => $desc, "randname" => $randname, "export" => $export, "delay" => $delay, "short_classname" => $opt["short_classname"]); $this->initGraph($options); if (count($datas) <= 0) { if ($export != "odtall") { echo $LANG['plugin_mreporting']["error"][1]; $end['opt']["export"] = false; $end['opt']["randname"] = false; $end['opt']["f_name"] = $opt['f_name']; $end['opt']["class"] = $opt['class']; PluginMreportingCommon::endGraph($end); } return false; } $labels2 = $raw_datas['labels2']; $datas = PluginMreportingCommon::compileDatasForUnit($datas, $unit); $raw_datas['datas'] = $datas; $values = array_values($datas); $labels = array_keys($datas); $max = 1; foreach ($values as $line) { foreach ($line as $label2 => $value) { if ($value > $max) { $max = $value; } } } if ($max == 1 && $unit == '%') { $max = 100; } $nb = count($labels2); $width = $this->width; $nb_bar = count($datas); if ($nb_bar > 1) { $percent = 2 * (450 + 18 * $nb_bar) / (18 * $nb_bar * 100); } else { $percent = 0.2; } $height = $percent * 450 + 18 * $nb_bar; $delta = 450 - $height; $height_tot = 450 + $height; $width_line = ($width - 45) / $nb; $index1 = 0; $index3 = 1; $step = ceil($nb / 20); //create image $image = imagecreatetruecolor($width, $height_tot); if ($show_graph) { //colors $palette = self::getPalette($nb_bar); $alphapalette = self::getPalette($nb_bar, "50"); $darkerpalette = self::getDarkerPalette($nb_bar); //background $bg_color = $this->white; imagefilledrectangle($image, 0, 0, $width - 1, $height_tot - 1, $bg_color); //draw x-axis grey step line and value ticks $xstep = round(($height + $delta + 40) / 13); for ($i = 0; $i < 13; $i++) { $yaxis = $height_tot - 30 - $xstep * $i; //horizontal grey lines imageLine($image, 30, $yaxis, 30 + $width_line * ($nb - 1), $yaxis, $this->grey); //value ticks if ($i * $max / 12 < 10) { $val = round($i * $max / 12, 1); } else { $val = round($i * $max / 12); } $box = @imageTTFBbox($this->fontsize - 1, $this->fontangle, $this->font, $val); $textwidth = abs($box[4] - $box[0]); imagettftext($image, $this->fontsize - 1, $this->fontangle, 25 - $textwidth, $yaxis + 5, $this->darkgrey, $this->font, $val); } //draw y-axis vertical grey step line for ($i = 0; $i < $nb; $i++) { $xaxis = 30 + $width_line * $i; imageLine($image, $xaxis, $height - 40, $xaxis, $height_tot, $this->grey); } //draw y-axis imageLine($image, 30, $height - 40, 30, $height_tot - 25, $this->black); //draw y-axis imageLine($image, 30, $height_tot - 30, $width - 50, $height_tot - 30, $this->black); //create border on export if ($export) { imagerectangle($image, 0, 0, $width - 1, $height_tot - 1, $this->black); } //on png graph, no way to draw curved polygons, force area reports to be linear if ($area) { $spline = false; } //add title on export if ($export) { imagettftext($image, $this->fontsize + 1, $this->fontangle, 10, 20, $this->black, $this->font, $title); } //parse datas foreach ($datas as $label => $data) { $aCoords = array(); $index2 = 0; $old_data = 0; //parse line foreach ($data as $subdata) { //if first index, continue if ($index2 == 0) { $old_data = $subdata; $index2++; continue; } // determine coords $x1 = $index2 * $width_line - $width_line + 30; $y1 = $height_tot - 30 - $old_data * ($height_tot - $height) / $max; $x2 = $x1 + $width_line; $y2 = $height_tot - 30 - $subdata * ($height_tot - $height) / $max; //in case of area chart fill under point space if ($area > 0) { $points = array($x1, $y1, $x2, $y2, $x2, $height_tot - 30, $x1, $height_tot - 30); imagefilledpolygon($image, $points, 4, $alphapalette[$index1]); } //trace lines between points (if linear) if (!$spline) { $this->imageSmoothAlphaLineLarge($image, $x1, $y1, $x2, $y2, $palette[$index1]); } $aCoords[$x1] = $y1; $old_data = $subdata; $index2++; $index3++; } //if curved spline activated, draw cubic spline for the current line if ($spline) { $aCoords[$x2] = $y2; $this->imageCubicSmoothLine($image, $palette[$index1], $aCoords); $index2 = 0; $old_data = 0; $old_label = ""; } //draw labels and dots $index2 = 0; $old_data = 0; foreach ($data as $subdata) { //if first index, continue if ($index2 == 0) { $old_data = $subdata; $old_label = $label; $index2++; continue; } // determine coords $x1 = $index2 * $width_line - $width_line + 30; $y1 = $height_tot - 30 - $old_data * ($height_tot - $height) / $max; $x2 = $x1 + $width_line; $y2 = $height_tot - 30 - $subdata * ($height_tot - $height) / $max; //trace dots $color_rbg = self::colorHexToRGB($darkerpalette[$index1]); imageSmoothArc($image, $x1 - 1, $y1 - 1, 7, 7, $color_rbg, 0, 2 * M_PI); imageSmoothArc($image, $x1 - 1, $y1 - 1, 4, 4, array(255, 255, 255, 0), 0, 2 * M_PI); //display values label if ($show_label == "always" || $show_label == "hover") { imagettftext($image, $this->fontsize - 2, $this->fontangle, $index2 == 1 ? $x1 : $x1 - 6, $y1 - 5, $darkerpalette[$index1], $this->font, $old_data); } //show x-axis ticks if ($step != 0 && $index3 / $step == round($index3 / $step)) { imageline($image, $x1, $height_tot - 30, $x1, $height_tot - 27, $darkerpalette[$index1]); } $old_data = $subdata; $old_label = $label; $index2++; $index3++; } /*** display last value ***/ if (isset($x2)) { //trace dots $color_rbg = self::colorHexToRGB($darkerpalette[$index1]); imageSmoothArc($image, $x2 - 1, $y2 - 1, 7, 7, $color_rbg, 0, 2 * M_PI); imageSmoothArc($image, $x2 - 1, $y2 - 1, 4, 4, array(255, 255, 255, 0), 0, 2 * M_PI); //display value label if ($show_label == "always" || $show_label == "hover") { imagettftext($image, $this->fontsize - 2, $this->fontangle, $index2 == 1 ? $x2 : $x2 - 6, $y2 - 5, $darkerpalette[$index1], $this->font, $old_data); } } /*** end display last value ***/ $index1++; } //display labels2 $index = 0; foreach ($labels2 as $label) { $x = $index * $width_line + 20; if ($step != 0 && $index / $step == round($index / $step)) { imagettftext($image, $this->fontsize - 1, $this->fontangle, $x, $height_tot - 10, $this->black, $this->font, $label); } $index++; } //legend (align left) $index = 0; foreach ($labels as $label) { //legend label $box = @imageTTFBbox($this->fontsize, $this->fontangle, $this->font, $label); $textwidth = abs($box[4] - $box[0]); $textheight = abs($box[5] - $box[1]); imagettftext($image, $this->fontsize - 1, $this->fontangle, 20, 35 + $index * 14, $this->black, $this->font, $label); //legend circle $color_rbg = self::colorHexToRGB($palette[$index]); imageSmoothArc($image, 10, 30 + $index * 14, 7, 7, $color_rbg, 0, 2 * M_PI); $index++; } } //generate image $params = array("image" => $image, "export" => $export, "f_name" => $opt['f_name'], "class" => $opt['class'], "title" => $title, "randname" => $randname, "raw_datas" => $raw_datas, "withdata" => $opt['withdata']); $contents = $this->generateImage($params); if ($show_graph) { $this->showImage($contents, $export); } $opt['randname'] = $randname; $options = array("opt" => $opt, "export" => $export, "datas" => $datas, "labels2" => $labels2, "flip_data" => $flip_data, "unit" => $unit); PluginMreportingCommon::endGraph($options); }