1# Drawing a stacked area chart 2 3[Reference](http://wiki.pchart.net/doc.chart.drawstackedareachart.html) 4 5```php 6require '/path/to/your/vendor/autoload.php'; 7 8use CpChart\Data; 9use CpChart\Image; 10 11/* Create and populate the Data object */ 12$data = new Data(); 13$data->addPoints([1, -2, -1, 2, 1, 0], "Probe 1"); 14$data->addPoints([1, -2, -3, 2, 1, 8], "Probe 2"); 15$data->addPoints([2, 4, 2, 0, 4, 2], "Probe 3"); 16$data->setSerieTicks("Probe 2", 4); 17$data->setAxisName(0, "Temperatures"); 18$data->addPoints(["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "Labels"); 19$data->setSerieDescription("Labels", "Months"); 20$data->setAbscissa("Labels"); 21 22/* Create the Image object */ 23$image = new Image(700, 230, $data); 24 25/* Draw the background */ 26$settings = ["R" => 170, "G" => 183, "B" => 87, "Dash" => 1, "DashR" => 190, "DashG" => 203, "DashB" => 107]; 27$image->drawFilledRectangle(0, 0, 700, 230, $settings); 28 29/* Overlay with a gradient */ 30$settings = [ 31 "StartR" => 219, 32 "StartG" => 231, 33 "StartB" => 139, 34 "EndR" => 1, 35 "EndG" => 138, 36 "EndB" => 68, 37 "Alpha" => 50 38]; 39$image->drawGradientArea(0, 0, 700, 230, DIRECTION_VERTICAL, $settings); 40$image->drawGradientArea(0, 0, 700, 20, DIRECTION_VERTICAL, [ 41 "StartR" => 0, 42 "StartG" => 0, 43 "StartB" => 0, 44 "EndR" => 50, 45 "EndG" => 50, 46 "EndB" => 50, 47 "Alpha" => 80 48]); 49 50/* Add a border to the picture */ 51$image->drawRectangle(0, 0, 699, 229, ["R" => 0, "G" => 0, "B" => 0]); 52 53/* Write the picture title */ 54$image->setFontProperties(["FontName" => "Silkscreen.ttf", "FontSize" => 6]); 55$image->drawText(10, 13, "drawStackedAreaChart() - draw a stacked area chart", ["R" => 255, "G" => 255, "B" => 255]); 56 57/* Write the chart title */ 58$image->setFontProperties(["FontName" => "Forgotte.ttf", "FontSize" => 11]); 59$image->drawText(250, 55, "Average temperature", ["FontSize" => 20, "Align" => TEXT_ALIGN_BOTTOMMIDDLE]); 60 61/* Draw the scale and the 1st chart */ 62$image->setGraphArea(60, 60, 450, 190); 63$image->drawFilledRectangle(60, 60, 450, 190, ["R" => 255, "G" => 255, "B" => 255, 64 "Surrounding" => -200, "Alpha" => 10]); 65$image->drawScale(["DrawSubTicks" => true, "Mode" => SCALE_MODE_ADDALL]); 66$image->setFontProperties(["FontName" => "pf_arma_five.ttf", "FontSize" => 6]); 67$image->setShadow(false); 68$image->drawStackedAreaChart(["DisplayValues" => true, "DisplayColor" => DISPLAY_AUTO, "Surrounding" => 20]); 69 70/* Draw the scale and the 2nd chart */ 71$image->setGraphArea(500, 60, 670, 190); 72$image->drawFilledRectangle(500, 60, 670, 190, [ 73 "R" => 255, 74 "G" => 255, 75 "B" => 255, 76 "Surrounding" => -200, 77 "Alpha" => 10 78]); 79$image->drawScale(["Pos" => SCALE_POS_TOPBOTTOM, "Mode" => SCALE_MODE_ADDALL, "DrawSubTicks" => true]); 80$image->setShadow(false); 81$image->drawStackedAreaChart(["Surrounding" => 10]); 82 83/* Write the chart legend */ 84$image->drawLegend(510, 205, ["Style" => LEGEND_NOBORDER, "Mode" => LEGEND_HORIZONTAL]); 85 86/* Render the picture (choose the best way) */ 87$image->autoOutput("example.drawStackedAreaChart.png"); 88``` 89