Difference between revisions of "PHPTutorial10"

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

Latest revision as of 12:02, 29 April 2016

Tchart php.png

Contents page
Previous | Next


Tutorial 10 - Custom drawing on the Chart Panel

TeeChart offers extensive custom drawing facilities via the TCanvas3D component. With Canvas you may add shapes, lines and text anywhere on the Chart Panel and define their colours, pen and brush styles.

TeeChart Canvas

Drawing Lines

2D Chart Let's add a Canvas Line:

Example

   private function Load() { 
       $line1->fillSampleValues(20);
       $line1->setVertAxis(VerticalAxis::$BOTH); 
       $line1->setHorizAxis(HorizontalAxis::$BOTH);
       $tChart1->getAspect->setView3D(false); 
   } 
   public function chartEvent($e) {
     if ($e instanceof AfterDrawEventArgs) {
       $g = $tChart1->getGraphics3D(); 
       $s = new TeePoint($tChart1->getAxes()->getLeft()->getPosition(), $tChart1->getAxes()->getTop()->getPosition()); 
       $e = new TeePoint($tChart1->getAxes()->getRight()->getPosition(), $tChart1->getAxes()->getBottom()->getPosition()); 
       $g->MoveTo($s); 
       $g->LineTo($e,0); 
    }
   }

3D Chart On a 3D Chart the Axis positions are offset from the Chart area due to 3D orthogonal displacement. We can move the Line accordingly:

Example (drawing a Line diagonally from top left to bottom right in the Chart Area of a 3D Chart)

   private function Load() { 
       $line1->fillSampleValues(20); 
       $line1->setVertAxis(VerticalAxis::$BOTH); 
       $line1->setHorizAxis(HorizontalAxis::$BOTH);
       $tChart1->getAspect->setChart3DPercent(50); 
   } 

   public function chartEvent(EventArgs e) {
       if ($e instanceof AfterDrawEventArgs) {
           $g = $tChart1->getGraphics3D(); 
       $s = Point3D(); 
       $s->x = $tChart1->getAxes()->getLeft()->getPosition(); 
       $s->y = tChart1->getAxes()->getTop()->getPosition(); 
       $s->z = 0; 

       C$e = Point3D(); 
       $e->x = $tChart1->getAxes()->getRight()->getPosition();
       $e->y = $tChart1->getAxes()->getBottom()->getPosition(); 
       $e->z = $tChart1->getAspect()->width3D;  

       $g->moveTo($s); 

       $g->lineTo($e); 
      }
   }

Canvas Pen and Brush

The Line above is drawn using the Pen and Brush defined for the last object drawn before the Line is drawn. That may or may not be the Pen you want. You can change the Pen accordingly:

Example (define Pen before drawing the Line)

   public function chartEvent(EventArgs $e) {
       if ($e instanceof AfterDrawEventArgs) {
           $g = $tChart1->getGraphics3D();            
           $p5 = new TeePoint($line1->calcXPos(5), $line1->calcYPos(5)); 
            $p15 = new TeePoint($line1->calcXPos(15), $line1->calcYPos(15)); 
           $g->getPen()->setDashCap(DashCap::$SQUARE);
           $g->getPen()->setEndCap(LineCap::$MITER);
           $g->getPen()->setStyle(DashStyle::$DASHDOTDOT); 
           $g->getPen()->setTransparency(70); 
           $g->getPen()->setWidth(3); 
           $g->getPen()->setColor(Color::BLUE()); 
           $g->moveTo($p5); 
           $g->lineTo($p15, 0);   
      }
  }

Adding 2D Shapes

Add 2D Canvas Shapes in a similar manner to Canvas Lines. The following example adds a Rectangle in the centre of the Chart Area:

2D Charts
2D Charts support only 2D shapes.

Example

   public function chartEvent(EventArgs $e) {
       if ($e instanceof AfterDrawEventArgs) {
           $g = $tChart1->getGraphics3D();                    

       $d = new Dimension(100,100); 
       $p = new TeePoint(((int)($g->getXCenter() - ($d->getWidth()/2))),((int)($g->getYCenter() - ($d->getHeight()/2))));       
       $r = new Rectangle($p,$d); 
       $g->getPen()->setColor(Color::CYAN()); 
       $g->getBrush()->setColor(Color::BLUE()); 
       $g->rectangle($r);
      }
  }

3D Charts
On a 3D Chart you can move the Rectangle in a Z plane too. See the RectangleWithZ method. This example places the Rectangle on the Left Wall but displaces it halfway towards the rear of the Chart (towards the Back Wall).

   private function Load() { 
       $point3D1->LinePen->Visible = false; 
       $point3D1->fillSampleValues(20); 
       $point3D1->setVertAxis(VerticalAxis::$BOTH); 
       $point3D1->setHorizAxis(HorizontalAxis::$BOTH); 
       $tChart1->getAspect->setChart3DPercent(50); 
       $tChart1->getAxes()->getDepth()->setVisible(true); 
   } 

   public function chartEvent(EventArgs $e) {
     if ($e instanceof AfterDrawEventArgs) {
       $g = $tChart1->getGraphics3D();   
       $d = new Dimension(100, 100); 
       $l = new TeePoint(((int)$tChart1->getAxes()->getLeft()->getPosition()),((int)(g->getYCenter() –
              ($d->getHeight() / 2)))); 
       $r = new Rectangle($l,$d); 
       $g->getPen()->setColor(Color::CYAN()); 
       $g->getBrush().setColor(Color::BLUE()); 
       $g->rectangle($r, $tChart1->getAspect()->width3D/2);    
   }

Adding 3D Shapes

You may add 3D shapes to 3D Charts. This example draws a Cube in the middle of the Chart rectangle:

   private function Load() { 
       $point3D1->getLinePen()->setVisible(false); 
       $point3D1->fillSampleValues(20); 
       $tChart1->getAspect()->setChart3DPercent(50); 
       $tChart1->getLegend()->setVisible(false); 
       $tChart1->getAxes()->getDepth()->setVisible(true); 
   } 

   public function chartEvent(EventArgs $e) {
       if (e instanceof AfterDrawEventArgs) {
           IGraphics3D g = tChart1.getGraphics3D();                    

           $d = new Dimension(50,50); 
           $p = new TeePoint(((int)($g->getXCenter() - ($d->getWidth()/2))),((int)($g->getYCenter() – 
              ($d->getHeight()/2)))); 
           $r = new Rectangle($p,$d); 
           $g->cube($r, 0, 20, true);  
        }
   }

Adding text

2D Text location Add Text to the last Rectangle:

Example

   public function chartEvent(EventArgs $e) {
       if (e instanceof AfterDrawEventArgs) {
           $text = "My Text"; 
           $g = $tChart1->getGraphics3D();                      
           $d = new Dimension(150, 50); 
           $p = new TeePoint(((int)($g->getXCenter() - ($d->getWidth()/2))),((int)($g->getYCenter() –
                       ($d->getHeight()/2)))); 
           $r = new Rectangle($p,$d); 
           $g->getPen()->setColor(Color::BLUE()); 
           $g->rectangle($r);     

           $g->textOut(((int)($g->getXCenter() - ($g->textWidth($text)/2))), 
                 ((int)($g->getYCenter() - ($g->textHeight($text)/2))), $text);           
       }
   }

3D Text location You can place Text in a differing 3D plane by using the TextOut overload with a z coordinate.

Example

   private function Load() { 
       $point3D1->fillSampleValues(20);
       $point3D1->getLinePen()->setVisible(false); 
       $tChart1->getAspect()->setChart3DPercent(50); 
   }

   public function chartEvent(EventArgs $e) {
       if ($e instanceof AfterDrawEventArgs) {
           $text = "My Text"; 
           $g = $tChart1->getGraphics3D();           
           $g->textOut($g->getXCenter(), $g->getYCenter(), $tChart1->getAspect()->width3D / 2, $text); 
        }
   }

Applied example

This example takes the 3rd and 10th values of a Series, plots a Line between them and tells us the value of the first and Last point of the new Line and the difference between them:

Example

'First add some data to the empty Chart

   Public function button1_Click();
     begin

       $Series1->FillSampleValues(20);

     end;

   private function Load() { 
       $tChart1->getAspect()->setView3D(false); 
       $line1->fillSampleValues(20); 
} 

   public void chartEvent(EventArgs e) {
       if ($e instanceof AfterDrawEventArgs) {
           $g = $tChart1->getGraphics3D();      
           if($tChart1->getSeriesCount() > 0){ 
               if($tChart1->getSeries(0)->getCount() > 10) { 
                   $s = $tChart1->getSeries(0);
                   $h = $g->textHeight("H");
                   $p1 = new TeePoint($s->calcXPos(3), $s->calcYPos(3));
                   $p2 = new TeePoint($s->calcXPos(10), $s->calcYPos(10));
                   $g->getPen()->setColor(Color::BLUE());
                   $g->getPen()->setWidth(2);
                   $g->getPen()->setStyle(DashStyle::$DASH);
                   $g->moveTo($p1);
                   $g->lineTo($p2, 0);              
                   $g->textOut($p1->x, $p1->y - $h, "Point value: " . $s->getYValues(3));
                   $g->textOut($p2->x, $p2->y, "Point value: " . $s.getYValues(10)); 
                   $g->textOut($p2->x, $p2->y + $h, "Change is: " + $s->getYValues(3) - 
                           $s->getYValues(10)); 
           }             
       }
   }




PREVIOUS

NEXT


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