Home PHP Graphics ASP JavaScript HTML JAVA Swing Webtip Lyric Free sheet music Ringtones

PHP create real-time dynamic chart

Customization Chart entities

Valid types of plots (as of PHPlot 5.0):

bars (with optional shadows)
lines
linepoints (a faster way of plotting when you want both points and lines)
area
points (lots of point types here)
pie (2D or 3D)
thinbarline (sometimes also called impulse)
error bar (which can also be used for stock market data graphs)
squared (for binary data)

You specify which type with the SetPlotType function. We'll look at that function with bars and lines in the next example when we look at multiple graphs per image.

As we discussed before, there are several ways we can manipulate the look/feel of the graph object. Almost every parameter of ticks, grids and data labels can be adjusted via (among many others):

SetXTickPos()
SetYTickPos()
SetXTickLength()
SetYTickLength()
SetXTickCrossing()
SetYTickCrossing()
SetXTickIncrement()
SetYTickIncrement()
SetNumXTicks()
SetNumYticks()
SetSkipTopTick()
SetSkipBottomTick()
SetDrawXGrid()
SetDrawYGrid()
SetDrawDashedGrid()
SetDrawXDataLabelLines()
SetDrawYDataLabelLines() (not yet implemented)
SetXDataLabelPos()
SetYDataLabelPos()
SetXLabelAngle()
SetYLabelAngle()
SetXLabelType()
SetYLabelType()

Real-time dynamic chart examples --Multiple Graphs per Image

To create an image with several separate graphs on it is a straightforward process. As in the previous examples we first have to create an object (e.g. variable) but now we tell it to not print the image at the same time as the draw command. Now we want it to wait for the explicit PrintImage function call. To tell PHPlot this is the way we want to work, we use the SetPrintImage function. SetPrintImage(TRUE) is the default, and tells to draw the image when DrawGraph is called. To turn this off we use SetPrintImage(FALSE).

Now we will draw several images entirely within one object. That means that if we set a value for one graph, there will be a couple of other commands we will need.

To specify in pixels the placement of each graph we use SetNewPlotAreaPixels. The format is SetNewPlotAreaPixels(upper_left_x, upper_left_y, lower_right_x, lower_right_y) . Again we are using the GD coordinates where 0,0 is the upper left corner of the image.

In more detail:

<?php
//Include the code
include('phplot/phplot.php');

//Define the object
$graph =& new PHPlot(400,300);

$graph->SetPrintImage(0); //Don't draw the image until specified explicitly

$example_data = array(
array('a',3),
array('b',5),
array('c',7),
array('d',8),
array('e',2),
array('f',6),
array('g',7)
);

$graph->SetDataType("text-data"); //Must be called before SetDataValues

$graph->SetDataValues($example_data);
$graph->SetYTickIncrement(2); //a smaller graph now - so we set a new tick increment

$graph->SetXLabelAngle(90);
$graph->SetXTitle("");
$graph->SetYTitle("Price");
$graph->SetPlotType("lines");
$graph->SetLineWidth(1);
$graph->SetXTickPos('none');
$graph->SetXTickLabelPos('none');

$graph->SetNewPlotAreaPixels(70,10,375,100); // where do we want the graph to go
$graph->DrawGraph(); // remember, since we said not to draw yet, PHPlot
// still needs a PrintImage command to write an image.

//Now do the second chart on the same image
unset($example_data); //we are re-using $example_data (to save memory), but you don't have to
$example_data = array(
array('a',30,40,20),
array('b',50,'',10), // here we have a missing data point, that's ok
array('c',70,20,60),
array('d',80,10,40),
array('e',20,40,60),
array('f',60,40,50),
array('g',70,20,30)
);

$graph->SetDataType("text-data"); //Must be called before SetDataValues

$graph->SetDataValues($example_data);

$graph->SetXTitle("");
$graph->SetYTitle("Verbal Cues");
$graph->SetYTickIncrement(10);
$graph->SetPlotType("bars");
$graph->SetXLabelAngle(0); //have to re-set as defined above

$graph->SetXTickPos('none');
$graph->SetXTickLabelPos('none');

$graph->SetNewPlotAreaPixels(70,120,375,220);
$graph->SetPlotAreaWorld(0,0,7,80);
$graph->DrawGraph();

//Print the image
$graph->PrintImage();
?>

Here is the image: