ChartDirector Ver 4.1 (PHP Edition Edition)

Pass Data as HTTP Query Parameters




In this example, we will introduce a technique where the database query is performed in the containing HTML page, and the data is passed to the ChartDirector script as HTTP GET query parameters. Using this method, it is possible to perform one database query and feed the data to multiple charts.

The user will select a year from a HTML form and press OK. The web server will query a database to obtain the necessary data, and return a web page containing the bar chart and the line chart for the selected year.

The code for producing the HTML form is listed below.

The code outputs a drop down select list to allow the user to select a year. Based on the selected year, it queries the database and read the data into arrays. The data are then serialized into comma delimited strings using the "join" function. Two <IMG> tags are used to invoke two scripts for charts generation, where the data are passed in as HTTP GET query parameters using the comma delimited strings.

[File: phpdemo/dbdemo2.php]
<?php
require_once("../lib/phpchartdir.php");

# The currently selected year
if (isset($_GET["year"]))
    $selectedYear = $_GET["year"];
else
    $selectedYear = 2001;

# SQL statement to get the monthly revenues for the selected year.
$SQL =
    "Select Software, Hardware, Services From revenue Where Year(TimeStamp) = ".
    "$selectedYear Order By TimeStamp";

#
# Connect to database and read the query result into arrays
#

mysql_connect("localhost", "test", "test");
mysql_select_db("sample");
$result = mysql_query($SQL);

while ($row = mysql_fetch_row($result)) {
    $software[] = $row[0];
    $hardware[] = $row[1];
    $services[] = $row[2];
}

# Serialize the data into a string to be used as HTTP query parameters
$httpParam = sprintf("year=%s&software=%s&hardware=%s&services=%s", $selectedYear,
    join(",", $software), join(",", $hardware), join(",", $services));

#
# The following code generates the <option> tags for the HTML select box, with the
# <option> tag representing the currently selected year marked as selected.
#

$optionTags = array_pad(array(), 2001 - 1990 + 1, null);
for($i = 1990; $i < 2001 + 1; ++$i) {
    if ($i == $selectedYear) {
        $optionTags[$i - 1990] = "<option value='$i' selected>$i</option>";
    } else {
        $optionTags[$i - 1990] = "<option value='$i'>$i</option>";
    }
}
$selectYearOptions = join("", $optionTags);
?>
<html>
<body topmargin="5" leftmargin="5" rightmargin="0" marginwidth="5" marginheight="5">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Database Integration Demo (2)
</div>
<hr color="#000080">
<div style="font-size:10pt; font-family:verdana; width:600px">
This example demonstrates creating a chart using data from a database. The database
query is performed in the containing HTML page. The data are then passed to the chart
generation pages as HTTP GET parameters.
<ul>
    <li><a href="viewsource.php?file=<?php echo $_SERVER["SCRIPT_NAME"]?>">
        View containing HTML page source code
    </a></li>
    <li><a href="viewsource.php?file=dbdemo2a.php">
        View chart generation page source code for upper chart
    </a></li>
    <li><a href="viewsource.php?file=dbdemo2b.php">
        View chart generation page source code for lower chart
    </a></li>
</ul>
<form>
    I want to obtain the revenue data for the year
    <select name="year">
        <?php echo $selectYearOptions?>
    </select>
    <input type="submit" value="OK">
</form>
</div>

<img src="dbdemo2a.php?<?php echo $httpParam?>">
<br><br>
<img src="dbdemo2b.php?<?php echo $httpParam?>">

</body>
</html>

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
#

$selectedYear = $_REQUEST["year"];

$software = split(",", $_GET["software"]);
$hardware = split(",", $_GET["hardware"]);
$services = split(",", $_GET["services"]);

#
# Now we obtained the data into arrays, we can draw the chart using ChartDirector
#

# Create a XYChart object of size 600 x 300 pixels, with a light grey (eeeeee)
# background, black border, 1 pixel 3D border effect and rounded corners.
$c = new XYChart(600, 300, 0xeeeeee, 0x000000, 1);
$c->setRoundedFrame();

# Set the plotarea at (60, 60) and of size 520 x 200 pixels. Set background color to
# white (ffffff) and border and grid colors to grey (cccccc)
$c->setPlotArea(60, 60, 520, 200, 0xffffff, -1, 0xcccccc, 0xccccccc);

# Add a title to the chart using 15pts Times Bold Italic font, with a light blue
# (ccccff) background and with glass lighting effects.
$textBoxObj = $c->addTitle("Global Revenue for Year $selectedYear", "timesbi.ttf", 15
    );
$textBoxObj->setBackground(0xccccff, 0x000000, glassEffect());

# Add a legend box at (70, 32) (top of the plotarea) with 9pts Arial Bold font
$legendObj = $c->addLegend(70, 32, false, "arialbd.ttf", 9);
$legendObj->setBackground(Transparent);

# Add a line chart layer using the supplied data
$layer = $c->addLineLayer2();
$dataSetObj = $layer->addDataSet($software, 0xff0000, "Software");
$dataSetObj->setDataSymbol(CircleShape, 9);
$dataSetObj = $layer->addDataSet($hardware, 0x00ff00, "Hardware");
$dataSetObj->setDataSymbol(DiamondShape, 11);
$dataSetObj = $layer->addDataSet($services, 0xffaa00, "Services");
$dataSetObj->setDataSymbol(Cross2Shape(), 11);

# Set the line width to 3 pixels
$layer->setLineWidth(3);

# 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 y axis title
$c->yAxis->setTitle("USD (Millions)");

# Set axes width to 2 pixels
$c->xAxis->setWidth(2);
$c->yAxis->setWidth(2);

# output the chart in PNG format
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
#

$selectedYear = $_REQUEST["year"];

$software = split(",", $_GET["software"]);
$hardware = split(",", $_GET["hardware"]);
$services = split(",", $_GET["services"]);

#
# Now we obtained the data into arrays, we can draw the chart using ChartDirector
#

# Create a XYChart object of size 600 x 300 pixels, with a light grey (eeeeee)
# background, black border, 1 pixel 3D border effect and rounded corners.
$c = new XYChart(600, 300, 0xeeeeee, 0x000000, 1);
$c->setRoundedFrame();

# Set the plotarea at (60, 60) and of size 520 x 200 pixels. Set background color to
# white (ffffff) and border and grid colors to grey (cccccc)
$c->setPlotArea(60, 60, 520, 200, 0xffffff, -1, 0xcccccc, 0xccccccc);

# Add a title to the chart using 15pts Times Bold Italic font, with a dark green
# (006600) background and with glass lighting effects.
$textBoxObj = $c->addTitle("Global Revenue for Year $selectedYear", "timesbi.ttf",
    15, 0xffffff);
$textBoxObj->setBackground(0x006600, 0x000000, glassEffect(ReducedGlare));

# Add a legend box at (70, 32) (top of the plotarea) with 9pts Arial Bold font
$legendObj = $c->addLegend(70, 32, false, "arialbd.ttf", 9);
$legendObj->setBackground(Transparent);

# Add a stacked area chart layer using the supplied data
$layer = $c->addAreaLayer2(Stack);
$layer->addDataSet($software, 0x40ff0000, "Software");
$layer->addDataSet($hardware, 0x4000ff00, "Hardware");
$layer->addDataSet($services, 0x40ffaa00, "Services");

# Set the area border color to the same as the fill color
$layer->setBorderColor(SameAsMainColor);

# 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 y axis title
$c->yAxis->setTitle("USD (Millions)");

# Set axes width to 2 pixels
$c->xAxis->setWidth(2);
$c->yAxis->setWidth(2);

# output the chart in PNG format
header("Content-type: image/png");
print($c->makeChart2(PNG));
?>