Difference between revisions of "PHPTutorial4"

From Steema Software Reference Wiki
Jump to: navigation, search
(Multiple Custom Axes)
 
Line 269: Line 269:
 
</center>
 
</center>
 
----
 
----
© 1998-2013 Steema Software SL. All rights reserved.
+
© 1998-{{CURRENTYEAR}} Steema Software SL. All rights reserved.

Latest revision as of 11:59, 29 April 2016

Tchart php.png

Contents page
Previous | Next

Tutorial 4 - Axis Control


Axes control - Key areas

Scales

Axis scales are set automatically when you add Series data to your Chart. You may change from the defaults at runtime by using Axis methods.

Automatic selects the best axis scale range to fit your data. If you turn Automatic off, the Scales section will activate options and you can change Axis values. Important, remember to select the Axis that you wish to configure from the Axis list at the left of the page.

Add a Line Series to a Chart, then add a Button with the following code:

$tChart1->removeAllSeries();
$tChart1->addSeries(new Line());
$tChart1->getSeries(0)->fillSampleValues(40);

Running the code in the button will draw a Line Series with 40 random values. You may now configure Maximum and Minimum values for the Axis scale.

$tChart1->getAxes()->getBottom()->setMinMax(0,10);

You may set Axis scale Maximum and Minimum to automatic individually. eg:

$tChart1->getAxes()->getBottom()->setAutomatic(false);
$tChart1->getAxes()->getBottom()->setAutomaticMaximum(true);
$tChart1->getAxes()->getBottom()->setMinimum(2);

Increment

You may tailor the intervals for the Axis. Set the increment you require :

$tChart1->getAxes()->getBottom()->setIncrement(20);


Datetime data

If your data is datetime (You may set the data to DateTime for your Series by specifying XValues or YValues are dateTime.), the Chart, Axis page and scales section will show a datetime range. You may also change the desired increment.

Here you can see one "scatter plot" example code :

<?php

//Includes
include "../../../sources/TChart.php";

$chart = new TChart(500,300);

$chart->getHeader()->setText("Scatter Plot");
$chart->getPanel()->getGradient()->setVisible(false);
$chart->getAspect()->setView3D(false);

$panel=$chart->getPanel();
$panel->getBevel()->setInner(BevelStyle::$NONE);
$panel->getBevel()->setOuter(BevelStyle::$NONE);
$panel->getPen()->setColor(new Color(120,120,120));
$panel->getPen()->setVisible(true);

$line = new Line($chart->getChart());

// Adding DateTime data
$today = gettimeofday(true);
$days7 = 7 * 86400;
$days2 = 2 * 86400;
$end_date = $today   $days7;
$end_task2= $end_date   $days7 ;

$chart->getChart()->getSeries(0)->getXValues()->setDateTime(true);
$chart->getChart()->getAxes()->getBottom()->getLabels()->setAngle(45);
$chart->getChart()->getAxes()->getBottom()->getLabels()->setRoundFirstLabel(false);

// If you want to set a datetime format...
// $chart->getChart()->getAxes()->getBottom()->getLabels()->setDateTimeFormat('d-m-y h:m:s');

$line->addXY($today,30);
$line->addXY($today 86400,32);
$line->addXY($today $days2,20);
$line->addXY($end_date $days7 $days7,8);
$line->addXY($end_date $days7 $days7 $days2,18);
$line->addXY($end_date $days7 $days7 $days7,10);

$line->getLinePen()->setWidth(3);

$pointer=$line->getPointer();
$pointer->setVisible(true);
$pointer->setStyle(PointerStyle::$CIRCLE);
$pointer->getBrush()->setColor(Color::getWhite());
$pointer->getPen()->setColor($line->getColor());
$pointer->getPen()->setWidth(2);

$chart->getPanel()->getBorderPen()->setVisible(false);

$chart->render("chart1.png");
$rand=rand();
print '<font face="Verdana" size="2">Scatter Plot<p>';
print '<img src="chart1.png?rand='.$rand.'">';
?>

Change the Increment at runtime:

$tChart1->getAxes()->getBottom()->setIncrement(DateTimeSteps::$ONEWEEK);

See the Axis->ExactDateTime property for more information about date axis labelling.

Note

When changing axis label frequency, bear in mind that TeeChart will avoid label overlap according to the setting of the LabelsSeparation method. This means that if the label frequency is too high for the labels to fit, then TeeChart will allocate 'best fit'. Changing the label angle and label separation are 2 options that may help you fit the labels you require. See the Labels section and LabelsAngle method.

Titles

Titles are set in the Titles section of the Axis page. You may change the Title text for the Axis and its font. The angle may be selected from values 0, 90, 180, 270 degrees. For runtime see the ChartAxisTitle Component.

Labels

Note

When changing axis label frequency, bear in mind that TeeChart will avoid label overlap according to the setting of the LabelsSeparation method. This means that if the label frequency is too high for the labels to fit, then TeeChart will allocate a 'best fit'. Changing the label angle and label separation are 2 options that may help you fit the labels you require. See the Labels section and the LabelsAngle method.

Label formats

You may apply all standard number and date formats to Axis labels. The Axis page, Labels section contains the field "Values format". If your data is datetime the field name changes to "Date time format". at runtime use:

$tChart1->getAxes()->getBottom()->getLabels()->setValueFormat("#,##0.00;(#,##0.00)");
//or for Datetime data
$tChart1->getAxes()->getBottom()->getLabels()->setDateTimeFormat("d-m-y h:i:s");


MultiLine labels

Axis labels can be displayed as multi-line text instead of a single line of text. Lines are separated using the TeeLineSeparator global constant, which by default is the carriage-return ascii character ( #13 ).

Example

//Add the Series labels in this way and apply 'Marks' as Axis labelling style
$tChart1->getSeries(0)->addYTextColor(1234, "New cars", Color::BLUE() );
$tChart1->getSeries(0)->addYTextColor(2000, "Old bicycles", Color::GREEN());
$tChart1->getPanel()->setMarginBottom(10);


Example for DateTime labels:

Ticks

Ticks.gif

There are 3 tick types. You can change the length, width and colour of each tick type. If the tick width is set to 1 (default) then you may change the style to one of several line types (dot, dash, etc.). Style will be ignored if width is greater than 1.

$tChart1->getAxes()->getBottom()->getTicks()->setLength(7);
$tChart1->getAxes()->getBottom()->getTicks()->setColor(Color::GREEN());
$tChart1->getAxes()->getBottom()->setMinorTickCount(10);

Axis position

Axes have a method which modifies where each axis is to be located. In this example, the axis is moved to 50% of the total Chart width, so it is shown at the chart center:

$tChart1->getAxes()->getLeft()->setRelativePosition(50);

Additional Axes

Copying axes

TeeChart offers 5 axes to be associated with data Series: Left, Top, Bottom, Right and Depth. When you add a new series to a Chart you may define to which of the axes the Series should be related.

Custaxis.gif

Custom axes

In this example, TeeChart will plot the New axes, one horizontal and one vertical in the centre of your Chart.

Multiple Custom Axes

Together with the PositionPercent and stretching properties, it is possible to have unlimited axes floating anywhere on the chart. Creating extra axes is now possible at runtime via a few lines of code:

Via Code

Example

$tChart1 = new TChart(500,300);

$line1 = new Line();
$line2 = new Line();

$tChart1->getAspect()->setView3D(false);

$tChart1->getHeader()->setText("TeeChart Multiple Axes");

$tChart1->addSeries($line1);
$tChart1->addSeries($line2);

for($t = 0; $t <= 10;   $t) {
$line1->addXYColor($t, (10   $t), Color::RED());
if($t > 1) {
$line2->addXYColor($t, $t, Color::GREEN());
}
}

$tChart1->getAxes()->getLeft()->setStartPosition(0);
$tChart1->getAxes()->getLeft()->setEndPosition(50);
$tChart1->getAxes()->getLeft()->getAxisPen()->color = Color::RED();
$tChart1->getAxes()->getLeft()->getTitle()->getFont()->setColor(Color::RED());
$tChart1->getAxes()->getLeft()->getTitle()->getFont()->setBold(true);
$tChart1->getAxes()->getLeft()->getTitle()->setText("1st Left Axis"); 

You are able to then position the new Axis in overall relation to the Chart by
using the StartPosition and EndPosition methods. These figures are expressed as percentages of the Chart Rectangle with 0 (zero) (in the case of a
vertical Axis) being Top. These properties can be applied to the Standard Axes to create
completely partitioned 'SubCharts' within the Chart.

$axis1 = new Axis(false, false, $tChart1->getChart());
$tChart1->getAxes()->getCustom()->add($axis1);
$line2->setCustomVertAxis($axis1);

$axis1->setStartPosition(50);
$axis1->setEndPosition(100);

$axis1->getAxisPen()->setColor(Color::GREEN());
$axis1->getTitle()->getFont()->setColor(Color::GREEN());
$axis1->getTitle()->getFont()->setBold(true);
$axis1->getTitle()->setText("Extra Axis");
$axis1->setRelativePosition(20);
   

The above coded example will show the following Chart:


Multaxis.gif

Multiple axes


Options are limitless! We advise caution when using Custom Axes as it is easy to start filling the screen with new axes and to lose track of which one you wish to manage !




PREVIOUS

NEXT


© 1998-2019 Steema Software SL. All rights reserved.