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.

Contents

TeeChart Canvas

Drawing Lines
Canvas Pen and Brush
Adding 2D Shapes
Adding 3D Shapes
Adding text
Applied example


TeeChart Canvas

Drawing Lines

2D Chart
Let's add a Canvas Line:

Example

private funcion 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)); 
            }             
        }
}

 





© 1996-2008 Steema Software SL. All rights reserved.