JavaTutorial10

From Steema Software Reference Wiki
Jump to: navigation, search

Tchart java.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 void Load() {
        line1.fillSampleValues(20);
        line1.setVertAxis(VerticalAxis.BOTH);
        line1.setHorizAxis(HorizontalAxis.BOTH);
        tChart1.getAspect.setView3D(false);
}


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

        Point s = new Point(tChart1.getAxes().getLeft().getPosition(), tChart1.getAxes().getTop().getPosition());
        Point e = new Point(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 void Load() {
        line1.fillSampleValues(20);
        line1.setVertAxis(VerticalAxis.BOTH);
        line1.setHorizAxis(HorizontalAxis.BOTH);
        tChart1.getAspect.setChart3DPercent(50);
}

    public void chartEvent(EventArgs e) {
        if (e instanceof AfterDrawEventArgs) {
            IGraphics3D g = tChart1.getGraphics3D();
        com.steema.teechart.Point3D s = new com.steema.teechart.Point3D();
        s.x = tChart1.getAxes().getLeft().getPosition();
        s.y = tChart1.getAxes().getTop().getPosition();
        s.z = 0;

        com.steema.teechart.Point3D e = new com.steema.teechart.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 void chartEvent(EventArgs e) {
        if (e instanceof AfterDrawEventArgs) {
            IGraphics3D g = tChart1.getGraphics3D();
	    Point p5 = new Point(line1.calcXPos(5), line1.calcYPos(5));
      	    Point p15 = new Point(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 void chartEvent(EventArgs e) {
        if (e instanceof AfterDrawEventArgs) {
            IGraphics3D g = tChart1.getGraphics3D();

        Dimension d = new Dimension(100,100);
        Point p = new Point(((int)(g.getXCenter() - (d.getWidth()/2))),((int)(g.getYCenter() - (d.getHeight()/2))));
        com.steema.teechart.Rectangle r = new com.steema.teechart.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 void 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 void chartEvent(EventArgs e) {
      if (e instanceof AfterDrawEventArgs) {
        IGraphics3D g = tChart1.getGraphics3D();
        Dimension d = new Dimension(100, 100);
        Point l = new Point(((int)tChart1.getAxes().getLeft().getPosition()),((int)(g.getYCenter() - (d.getHeight() / 2))));
        com.steema.teechart.Rectangle r = new com.steema.teechart.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 void Load() {
        point3D1.getLinePen().setVisible(false);
        point3D1.fillSampleValues(20);
        tChart1.getAspect().setChart3DPercent(50);
        tChart1.getLegend().setVisible(false);
        tChart1.getAxes().getDepth().setVisible(true);
}


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

        Dimension d = new Dimension(50,50);
        Point p = new Point(((int)(g.getXCenter() - (d.getWidth()/2))),((int)(g.getYCenter() - (d.getHeight()/2))));
        com.steema.teechart.Rectangle r = new com.steema.teechart.Rectangle(p,d);
        g.cube(r, 0, 20, true);
}
}


Adding text

2D Text location
Add Text to the last Rectangle:

Example

    public void chartEvent(EventArgs e) {
        if (e instanceof AfterDrawEventArgs) {
            String text = "My Text";
            IGraphics3D g = tChart1.getGraphics3D();
            Dimension d = new Dimension(150, 50);
            Point p = new Point(((int)(g.getXCenter() - (d.getWidth()/2))),((int)(g.getYCenter() - (d.getHeight()/2))));
            com.steema.teechart.Rectangle r = new com.steema.teechart.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 void Load() {
        point3D1.fillSampleValues(20);
        point3D1.getLinePen().setVisible(false);
        tChart1.getAspect().setChart3DPercent(50);
}


    public void chartEvent(EventArgs e) {
        if (e instanceof AfterDrawEventArgs) {
            String text = "My Text";
            IGraphics3D 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
procedure TForm1.BitBtn1Click(Sender: TObject);
begin
  Series1.FillSampleValues(20);
end;
private void Load() {
        tChart1.getAspect().setView3D(false);
        line1.fillSampleValues(20);
}


    public void chartEvent(EventArgs e) {
        if (e instanceof AfterDrawEventArgs) {
            IGraphics3D g = tChart1.getGraphics3D();
            if(tChart1.getSeriesCount() > 0){
                if(tChart1.getSeries(0).getCount() > 10) {
                    Series s = tChart1.getSeries(0);
                    int h = Convert.ToInt32(g.TextHeight("H"));
                    Point p1 = new Point(s.calcXPos(3), s.calcYPos(3));
                    Point p2 = new Point(s.calcXPos(10), s.calcYPos(10));
                    g.getPen().setColor(Color.blue);
                    g.getPen().setWidth(2);
                    g.getPen().setStyle(com.steema.teechart.drawing.DashStyle.DASH);
                    g.moveTo(p1);
                    g.lineTo(p2, 0);
                    g.textOut(p1.x, p1.y - h, "Point value: "   s.getYValues(3).toString());
                    g.textOut(p2.x, p2.y, "Point value: "   s.getYValues(10).toString());
                    g.textOut(p2.x, p2.y   h, "Change is: "   s.getYValues(3).toString() -
    s.getYValues(10).toString());
            }
        }
    }



PREVIOUS

NEXT


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