ChartDirector Ver 3.1 (PHP Edition Edition)

Using ChartDirector with Database in Web Pages

To display any image in a HTML web page, one needs to insert an <IMG> tag in the HTML web page. When the browser sees the <IMG> tag, it will load the image using the URL in the <IMG> tag in another HTTP connection.

This is no difference to display a ChartDirector chart in a HTML web page. An <IMG> tag must be used. In this case, the URL in the <IMG> tag points to a "ChartDirector script" (a script using ChartDirector to create and deliver chart images) instead of a static image file.

Thus two scripts can be invoked when displaying a ChartDirector chart in a HTML web page - the script that create the HTML web page, and the script referenced in the URL of <IMG> tag that delivers the chart to the browser.

Strategies in Passing Data to ChartDirector

To create a chart in which the data come from a database, there are several options:

  1. Perform the database query in the ChartDirector script (the script referenced in the <IMG> tag) to obtain the data and create the chart.

  2. Perform the database query in script for the containing HTML page, and pass the data to the ChartDirector script as HTTP query parameters.

    This method allows the data from the database query to be used in multiple charts in the HTML page, and in the HTML page itself (eg. displayed as tables).

  3. Same as above, but instead of using HTTP query parameters to pass the data, use "session variables".

    One limitation of HTTP query parameters is the query cannot exceed 2048 bytes, so it cannot pass too much data. "Session variables" can be used in this case to transfer data among scripts.

  4. Perform the database query and create the chart image in the script for the containing HTML page. Save the chart image to a "session variable". Use an <IMG> tag inform the browser to pick up the image from the "session variable".

    This approach is commonly used in creating clickable charts, but it can be used 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.)

© 2004 Advanced Software Engineering Limited. All rights reserved.
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)); ?>

© 2004 Advanced Software Engineering Limited. All rights reserved.
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!'>

© 2004 Advanced Software Engineering Limited. All rights reserved.
01', '959', '1018', '1102');