ChartDirector 7.0 (PHP Edition)

Variable Width Bar Chart




This example demonstrates a bar chart with variable bar widths.

ChartDirector does not really have a bar layer for variable width bars. However, an area layer can be used to create the same effect.

The variable width bars in this example are actually 4 areas, created by 4 area layers. The data set for each area layer consists of 4 points for the 4 corners of a bar.

Source Code Listing

[File: phpdemo/varwidthbar.php]
<?php require_once("../lib/phpchartdir.php"); # The data for the chart $data = array(800, 600, 1000, 1400); $widths = array(250, 500, 960, 460); $labels = array("Wind", "Hydro", "Coal", "Natural Gas"); # The colors to use $colors = array(0x00aa00, 0x66aaee, 0xee6622, 0xffbb00); # Create a XYChart object of size 500 x 350 pixels $c = new XYChart(500, 350); # Add a title to the chart using 15pt Arial Italic font $c->addTitle("Energy Generation Breakdown", "Arial Italic", 15); # Set the plotarea at (60, 60) and of (chart_width - 90) x (chart_height - 100) in size. Use a # vertical gradient color from light blue (f9f9ff) to sky blue (aaccff) as background. Set grid # lines to white (ffffff). $plotAreaBgColor = $c->linearGradientColor(0, 60, 0, $c->getHeight() - 40, 0xaaccff, 0xf9fcff); $c->setPlotArea(60, 60, $c->getWidth() - 90, $c->getHeight() - 100, $plotAreaBgColor, -1, -1, 0xffffff); # Add a legend box at (50, 30) using horizontal layout and transparent background. $c->addLegend(55, 30, false)->setBackground(Transparent); # Add titles to x/y axes with 10 points Arial Bold font $c->xAxis->setTitle("Mega Watts", "Arial Bold", 10); $c->yAxis->setTitle("Cost per MWh (dollars)", "Arial Bold", 10); # Set the x axis rounding to false, so that the x-axis will fit the data exactly $c->xAxis->setRounding(false, false); # In ChartDirector, there is no bar layer that can have variable bar widths, but you may create a # bar using an area layer. (A bar can be considered as the area under a rectangular outline.) So by # using a loop to create one bar per area layer, we can achieve a variable width bar chart. # starting position of current bar $currentX = 0; for($i = 0; $i < count($data); ++$i) { # ending position of current bar $nextX = $currentX + $widths[$i]; # outline of the bar $dataX = array($currentX, $currentX, $nextX, $nextX); $dataY = array(0, $data[$i], $data[$i], 0); # create the area layer to fill the bar $layer = $c->addAreaLayer($dataY, $colors[$i], $labels[$i]); $layer->setXData($dataX); # Tool tip for the layer $layer->setHTMLImageMap("", "", "title='" . $labels[$i] . ": " . $widths[$i] . " MW at \$" . $data[$i] . " per MWh'"); # the ending position becomes the starting position of the next bar $currentX = $nextX; } # Output the chart $viewer = new WebChartViewer("chart1"); $viewer->setChart($c, SVG); # Include tool tip for the chart $viewer->setImageMap($c->getHTMLImageMap("")); ?> <!DOCTYPE html> <html> <head> <title>Variable Width Bar 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;"> Variable Width Bar 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>