ChartDirector 7.0 (PHP Edition)

Horizontal Box-Whisker Chart




This example demonstrates creating a multi-color horizontal box-whisker chart.

XYChart.addBoxWhiskerLayer2 is used to create the multi-color box-whisker layer. The chart is set to horizontal orientation using XYChart.swapXY.

Source Code Listing

[File: phpdemo/hboxwhisker.php]
<?php require_once("../lib/phpchartdir.php"); # Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd quartile # and maximum values of some quantities $Q0Data = array(40, 45, 35); $Q1Data = array(55, 60, 50); $Q2Data = array(62, 70, 60); $Q3Data = array(70, 80, 65); $Q4Data = array(80, 90, 75); # The labels for the chart $labels = array("<*img=robot1.png*><*br*>Bipedal Type", "<*img=robot2.png*><*br*>Wolf Type", "<*img=robot5.png*><*br*>Bird Type"); # Create a XYChart object of size 540 x 320 pixels $c = new XYChart(540, 320); # swap the x and y axes to create a horizontal box-whisker chart $c->swapXY(); # Set directory for loading images to current script directory # Need when running under Microsoft IIS $c->setSearchPath(dirname(__FILE__)); # Set the plotarea at (75, 25) and of size 440 x 270 pixels. Enable both horizontal and vertical # grids by setting their colors to grey (0xc0c0c0) $c->setPlotArea(75, 25, 440, 270)->setGridColor(0xc0c0c0, 0xc0c0c0); # Add a title to the chart $c->addTitle(" Robot Shooting Accuracy Scores"); # Set the labels on the x axis and the font to Arial Bold $c->xAxis->setLabels($labels)->setFontStyle("Arial Bold"); # Disable x axis ticks by setting the length to 0 $c->xAxis->setTickLength(0); # Set the font for the y axis labels to Arial Bold $c->yAxis->setLabelStyle("Arial Bold"); # Add a Box Whisker layer using light blue 0x9999ff as the fill color and blue (0xcc) as the line # color. Set the line width to 2 pixels $c->addBoxWhiskerLayer2($Q3Data, $Q1Data, $Q4Data, $Q0Data, $Q2Data)->setLineWidth(2); # Output the chart $viewer = new WebChartViewer("chart1"); $viewer->setChart($c, SVG); # Include tool tip for the chart $viewer->setImageMap($c->getHTMLImageMap("", "", "title='{xLabel}: min/med/max = {min}/{med}/{max}\nInter-quartile range: {bottom} to {top}'")); ?> <!DOCTYPE html> <html> <head> <title>Horizontal Box-Whisker Chart</title> <!-- Include ChartDirector Javascript Library to support chart interactions --> <script type="text/javascript" src="cdjcv.js"></script> </head> <body style="margin:5px 0px 0px 5px"> <div style="font:bold 18pt verdana;"> Horizontal Box-Whisker Chart </div> <hr style="border:solid 1px #000080; background:#000080" /> <div style="font:10pt verdana; margin-bottom:1.5em"> <a href="viewsource.php?file=<?=basename(__FILE__)?>">View Chart Source Code</a> </div> <!-- ****** Here is the chart image ****** --> <?php echo $viewer->renderHTML(); ?> </body> </html>