|
|
|
Getting Started -
building Charts and populating Data Series
Contents
Introduction
Building a Chart
Including
TeeChart on a Form
Populate
the new data Series
Selecting a Series type to suit your
needs
Introduction
You may define the Chart appearance, titles, Legend characteristics and 3D
aspect without having to include a data Series.
That gives you the freedom to add and remove different data Series types at
runtime without having to redefine the whole Chart look and feel.
|
The steps in this tutorial highlight how easy it is to build a Chart from
scratch and will introduce you through later
tutorials, to modify and further enhance the appearance and functionality of
the Chart at runtime. Good
Charting !!
To include a Tchart component on a PHP web page is
easy. You only have to add the path where the TeeChart for PHP library has been
installed on the server as an include :
<?php
include "../sources/libTeeChart.php";
?>
This will allow you to interact with the TeeChart for
PHP classes. The TChart and render it use the following code :
<?php
$tchart = new TChart(500,300); // specifying its size (width , height)
$tchart->render("tchart.png");
?>
Now, some html lines are required to display the image
at the same page :
<body>
<img alt="" src="tchart.png"
style="border: 0px solid gray;"/>
</body>
If you want to use the TeeChart for PHP library under
the "
1) Copy the \teechart folder into the \vcl folder of
"
\Delphi
for PHP\vcl\teechart
\Delphi
for PHP\vcl\teechart\sources
\Delphi
for PHP\vcl\teechart\demos\*,*
\Delphi
for PHP\vcl\teechart\docs\*,*
2) Copy the \teechart\sources\tchart.inc.php and
\teechart\sources\tchart.ide.inc.php files into the \vcl folder of "
3) Open the "
4) If you create a new
Select the TChartObj
icon, click and drag out to size TChartObj on a PHP Form.
You will see TChartObj as a panel with some basic Chart features such as Axis
and Title.
For
programmed input of data you will need to write some code. This section will
show you the steps necessary to build a chart with coded input.
At runtime the Series will be empty of data unless you manually populate
it. Here an example of code to populate them :
$tChart1 = new TChart(500,300);
$bar = new Bar($tChart1->getChart());
$tChart1->getAxes()->getBottom()->setIncrement(1);
$bar->addYTextColor(400, "pears", Color::GREEN());
$bar->addYTextColor(500, "apples", Color::RED());
$bar->addYTextColor(400, "bananas", Color::YELLOW());
$bar->addYTextColor(200, "oranges", Color::ORANGE());
Run the project and new bars will appear on
your Chart. That's it !! There's no more to it.
Please take a look at the Documentation about Series 'Add' methods, in this case we have used the addXYTextColor(XValue,YValue,Text,Color) but there're more availables as :
$bar->addXY(XValue,YValue)
$bar->addXYText(XValue,YValue,Text)
$bar->addXYColor(XValue,YValue,Color)
$bar->addYText(YValue,Text)
$bar->addYTextColor(YValue,Text,Color)
$bar->addYColor(Value,Color)
$bar->addText(Text)
$bar->add()
$bar->addNull()
$bar->addNullXY(XValue,YValue)
The add() method thus assumes equal
spacing of values on the Label axis (in this case the X-Axis). If your data
contains 2 variables you may use the AddXY Method. Run the Project and add points using
this code:
require_once "../sources/TChart.php";
$tChart1 = new TChart(500,300);
srand(time());
$rnd = rand()%10;
$bar = new Bar($tChart1->getChart());
if ($bar->getCount() > 0)
{
// Increment X Axis value and add a
new random point
$bar->addXYTextColor(($bar->getXValues()->getLast()
+ rand()%10),
(($bar->getYValues()->getLast() /
($bar->getYValues()->getLast() - 1.0)) +
rand()%10), "Lemons", Color::BLUE());
}
else
{
// Add a new random point
$bar->addYTextColor($rnd, "Lemons",
Color::YELLOW());
}
Here we've used addYTextColor to allow us to specify the Text and Color but, if these aren't required you can make use of the add(YValue) method directly.
The
last coded example generated new X and Y values. The X axis distance between
points may not be constant, depending on the values used, which may cause
overlapping of Bars in some cases. This would be desirable for some but not all
applications. You can use the ChangeSeriesType() method to change the type of a
specific Series. The new Series type must graphically represent data with the
same number of
variables. If your data contains different number of variables of the new type
an error will appear. The following table shows the composition
of TeeChart Series types.
|
No.
of variables |
Datasource Properties |
|
|
|
Standard types |
|
|
2 |
XValues, YValues, XLabel |
|
2 |
XValues, YValues, XLabel |
|
2 |
XValues, YValues, XLabel |
|
2 |
XValues, YValues (called
Bar), XLabel |
|
2 |
XValues, YValues (called
Bar), XLabel |
|
2 |
XValues, YValues, XLabel |
|
2 |
XValues, YValues, XLabel |
|
2 |
Xvalues, YValues, XLabel |
|
1 |
PieValues, XLabel |
|
4 |
StartXValues,
StartYValues, XLabel, EndXValues, EndYValues |
|
3 |
Xvalues, YValues, XLabel, RadiusValues |
|
3 |
StartValues, EndValues,
AY (Y axis level), AXLabel (Label optionally shown on Y-axis or as mark) |
|
4 |
X0 (Top), Y0 (Bottom), X1
(Left), Y1 (Right) |
|
Subset of Extended Types |
|
|
2 |
XValues, YValues, XLabel |
|
5 |
OpenValues, CloseValues,
HighValues, LowValues, DateValues |
|
3 |
XValues, YValues, XLabel, ZValues |
|
3 |
XValues, YValues, XLabel, ErrorValues |
|
3 |
XValues, YValues, XLabel, ZValues |
|
2 |
XValues, YValues, Labels
(Polar has Angle and Radius) |
|
2 |
XValues, YValues, Labels
(Radar has Angle and Radius) |
|
3 |
XValues, YValues, ZValues |
|
2 |
XValues, YValues (VolumeValues), XLabel |
|
© 1996-2010 Steema Software SL. All rights reserved.