Depth Area Chart

ChartDirector Ver 3.1 (PHP Edition Edition)

Depth Area Chart

ChartDirector allows a XY chart to containing multiple layers of the same or different types. In this example, all layers are 3D area layers. The areas are filled using semi-transparent colors to avoid the area on the front hiding the areas at the back.

Source Code Listing

[File: phpdemo/deptharea.php".]

<?php require_once("../lib/phpchartdir.php"); #The data for the area chart $data0 = array(42, 49, 33, 38, 51, 46, 29, 41, 44, 57, 59, 52, 37, 34, 51, 56, 56, 60, 70, 76, 63, 67, 75, 64, 51); $data1 = array(50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77, 84, 82, 80, 84, 89); $data2 = array(87, 89, 85, 66, 53, 39, 24, 21, 37, 56, 37, 22, 21, 33, 13, 17, 4, 23, 16, 25, 9, 10, 5, 7, 6); $labels = array("0", "-", "2", "-", "4", "-", "6", "-", "8", "-", "10", "-", "12", "-", "14", "-", "16", "-", "18", "-", "20", "-", "22", "-", "24"); #Create a XYChart object of size 350 x 230 pixels $c = new XYChart(350, 230); #Set the plotarea at (50, 30) and of size 250 x 150 pixels. $c->setPlotArea(50, 30, 250, 150); #Add a legend box at (55, 0) (top of the chart) using 8 pts Arial Font. Set #background and border to Transparent. $legendObj = $c->addLegend(55, 0, false, "", 8); $legendObj->setBackground(Transparent); #Add a title to the x axis $c->xAxis->setTitle("Network Load for Jun 12"); #Add a title to the y axis $c->yAxis->setTitle("MBytes"); #Set the labels on the x axis $c->xAxis->setLabels($labels); #Add three area layers, each representing one data set. The areas are drawn in #semi-transparent colors. $c->addAreaLayer($data2, 0x808080ff, "Server #1", 3); $c->addAreaLayer($data0, 0x80ff0000, "Server #2", 3); $c->addAreaLayer($data1, 0x8000ff00, "Server #3", 3); #output the chart header("Content-type: image/png"); print($c->makeChart2(PNG)); ?>

for other charts as well. ChartDirector has a special method BaseChart.makeSession to support this approach.

Note: When using temporary files, make sure the security settings allow the web server anonymous user to write to the temporary directory. (By default anonymous users cannot write to any directory.)

VARS["year"])) $SelectedYear = $HTTP_GET_VARS["year"]; else $SelectedYear = 2001; # #Create an SQL statement to get the revenues of each month for the #selected year. # $SQLstatement = "Select Month(TimeStamp) - 1, Software, Hardware, Services " . "From revenue Where Year(TimeStamp)=" . $SelectedYear; # #Read in the revenue data into arrays # mysql_connect("localhost", "test", "test"); $result = mysql_db_query("sample", $SQLstatement); $software = array_pad(array(), 12, 0); $hardware = array_pad(array(), 12, 0); $services = array_pad(array(), 12, 0); while ($row = mysql_fetch_row($result)) { $software[$row[0]] = $row[1]; $hardware[$row[0]] = $row[2]; $services[$row[0]] = $row[3]; } #Serialize the data into a string to be used as HTTP query parameters $httpParam = "year=" . $SelectedYear . "&software=".join(",", $software) . "&hardware=".join(",", $hardware) . "&services=".join(",", $services); ?>

The <IMG> tags in the above code invoke "dbdemo2a.php" and "dbdemo2b.php" for charts generation. In "dbdemo2a.php" and "dbdemo2b.php", the data is retrieved from the HTTP GET query parameters and deserialized back into arrays by using the "split" function. The data are then used to generate the charts.

[File: phpdemo/dbdemo2a.php".]

<?php require_once("../lib/phpchartdir.php"); # #Retrieve the data from the query parameters # if (isset($HTTP_GET_VARS["year"])) $SelectedYear = $HTTP_GET_VARS["year"]; else $SelectedYear = 2001; $software = split(",", $HTTP_GET_VARS["software"]); $hardware = split(",", $HTTP_GET_VARS["hardware"]); $services = split(",", $HTTP_GET_VARS["services"]); # #Now we obtain the data into arrays, we can start to draw the chart #using ChartDirector # #Create a XYChart of size 420 pixels x 240 pixels $c = new XYChart(420, 240); #Set the chart background to pale yellow (0xffffc0) with a 2 pixel 3D border $c->setBackground(0xffffc0, 0xffffc0, 2); #Set the plotarea at (70, 50) and of size 320 x 150 pixels. Set background #color to white (0xffffff). Enable both horizontal and vertical grids by #setting their colors to light grey (0xc0c0c0) $c->setPlotArea(70, 50, 320, 150, 0xffffff, 0xffffff, 0xc0c0c0, 0xc0c0c0); #Add a title to the chart $title = $c->addTitle("Revenue for " . $SelectedYear, "timesbi.ttf"); $title->setBackground(0xffff00); #Add a legend box at the top of the plotarea $legend = $c->addLegend(70, 30, 0, "", 8); $legend->setBackground(Transparent); #Add a stacked bar chart layer using the supplied data $layer = $c->addBarLayer2(Stack); $layer->addDataSet($software, -1, "Software"); $layer->addDataSet($hardware, -1, "Hardware"); $layer->addDataSet($services, -1, "Services"); $layer->setBorderColor(Transparent, 1); #Set the x axis labels. In this example, the labels must be Jan - Dec. $labels = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"); $c->xAxis->setLabels($labels); #Set the x-axis width to 2 pixels $c->xAxis->setWidth(2); #Set the y axis title $c->yAxis->setTitle("USD (K)"); #Set the y-axis width to 2 pixels $c->yAxis->setWidth(2); #Output the chart header("Content-type: image/png"); print($c->makeChart2(PNG)); ?>

[File: phpdemo/dbdemo2b.php".]

<?php require_once("../lib/phpchartdir.php"); # #Retrieve the data from the query parameters # if (isset($HTTP_GET_VARS["year"])) $SelectedYear = $HTTP_GET_VARS["year"]; else $SelectedYear = 2001; $software = split(",", $HTTP_GET_VARS["software"]); $hardware = split(",", $HTTP_GET_VARS["hardware"]); $services = split(",", $HTTP_GET_VARS["services"]); # #Now we obtain the data into arrays, we can start to draw the chart #using ChartDirector # #Create a XYChart of size 420 pixels x 240 pixels $c = new XYChart(420, 240); #Set the chart background to pale yellow (0xffffc0) with a 2 pixel 3D border $c->setBackground(0xffffc0, 0xffffc0, 2); #Set the plotarea at (70, 50) and of size 320 x 150 pixels. Set background #color to white (0xffffff). Enable both horizontal and vertical grids by #setting their colors to light grey (0xc0c0c0) $c->setPlotArea(70, 50, 320, 150, 0xffffff, 0xffffff, 0xc0c0c0, 0xc0c0c0); #Add a title to the chart $title = $c->addTitle("Revenue for " . $SelectedYear, "timesbi.ttf"); $title->setBackground(0xffff00); #Add a legend box at the top of the plotarea $legend = $c->addLegend(70, 30, 0, "", 8); $legend->setBackground(Transparent); #Add a line chart layer using the supplied data $layer = $c->addLineLayer2(); $dataSet = $layer->addDataSet($software, -1, "Software"); $dataSet->setLineWidth(3); $dataSet = $layer->addDataSet($hardware, -1, "Hardware"); $dataSet->setLineWidth(3); $dataSet = $layer->addDataSet($services, -1, "Services"); $dataSet->setLineWidth(3); $layer->setBorderColor(Transparent, 1); #Set the x axis labels. In this example, the labels must be Jan - Dec. $labels = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"); $c->xAxis->setLabels($labels); #Set the x-axis width to 2 pixels $c->xAxis->setWidth(2); #Set the y axis title $c->yAxis->setTitle("USD (K)"); #Set the y-axis width to 2 pixels $c->yAxis->setWidth(2); #Output the chart header("Content-type: image/png"); print($c->makeChart2(PNG)); ?>

ved using Box.getImageCoor. This allows <AREA> tags for TextBox objects be created easily.

(For TextBox, there is no "getHTMLImageMap" method. It is because each TextBox object only has one hot spot. It is more convenient to enter the handler URL and tool tip text directly into the <AREA> tag, rather than generating them using getHTMLImageMap.)

In this example, the image map coordinates of the chart title, vertical mark label, and the copyright message are obtained using Box.getImageCoor:

$titleCoor = $title->getImageCoor(); $markCoor = $mark->getImageCoor(); $copyRightCoor = $copyRight->getImageCoor();

The image map coordinates are then used to make <AREA> tags as follows:

<area <?php echo $titleCoor?> href='javascript:doSomething();' title='The title is clickable!'> <area <?php echo $markCoor?> href='javascript:doSomething();' title='The "Merge with Star Tech" text is clickable!'> <area <?php echo $copyRightCoor?> href='javascript:doSomething();' title='The copyright text is clickable!'>

01', '959', '1018', '1102');