AndroidTutorial10

From Steema Software Reference Wiki
Jump to: navigation, search

File:AndroidHeaderLogo.gif

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

The principle event classes referenced in this project are available via: import com.steema.teechart.events.*.

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);
        chart.getAspect.setView3D(false);

		chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {
				IGraphics3D g = chart.getGraphics3D();

				Point s = new Point(chart.getAxes().getLeft().getPosition(), chart.getAxes().getTop().getPosition());
				Point e = new Point(chart.getAxes().getRight().getPosition(), chart.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);
        chart.getAspect.setChart3DPercent(50);

		chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {
				IGraphics3D g = chart.getGraphics3D();
				com.steema.teechart.Point3D s = new com.steema.teechart.Point3D();
				s.x = chart.getAxes().getLeft().getPosition();
				s.y = chart.getAxes().getTop().getPosition();
				s.z = 0;

				com.steema.teechart.Point3D e = new com.steema.teechart.Point3D();
				e.x = chart.getAxes().getRight().getPosition();
				e.y = chart.getAxes().getBottom().getPosition();
				e.z = chart.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)

chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {
				IGraphics3D g = chart.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

chart.addChartPaintListener( new ChartPaintAdapter() {
		public void chartPainted(ChartDrawEvent e) {

            IGraphics3D g = chart.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);
        chart.getAspect.setChart3DPercent(50);
        chart.getAxes().getDepth().setVisible(true);

		chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {

				IGraphics3D g = chart.getGraphics3D();

				//draw an 80% filled cone at co-ordinates 130,130...
				g.cone(
						true,
						130,130,180,150,0,20,
						true,
						80
				);

				//draw a sized 100,100 rectangle against left axis
				Dimension d = new Dimension(100, 100);
				Point l = new Point(((int)chart.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.getBrush().setSolid(true);
				g.getBrush().setTransparency(50);
				g.rectangle(r, chart.getAspect().getWidth3D()/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);
        chart.getAspect().setChart3DPercent(50);
        chart.getLegend().setVisible(false);
        chart.getAxes().getDepth().setVisible(true);

		chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {

				IGraphics3D g = chart.getGraphics3D();

				//draw Cube
				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

chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {

            String text = "My Text";
            IGraphics3D g = chart.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);
        chart.getAspect().setChart3DPercent(50);

		chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {
				String text = "My Text";
				IGraphics3D g = chart.getGraphics3D();
				g.textOut(g.getXCenter(), g.getYCenter(), chart.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() {
        chart.getAspect().setView3D(false);
        line1.fillSampleValues(20);

		chart.addChartPaintListener( new ChartPaintAdapter() {
			public void chartPainted(ChartDrawEvent e) {
				IGraphics3D g = chart.getGraphics3D();
				if(chart.getSeriesCount() > 0){
					if(chart.getSeries(0).getCount() > 10) {
						Series s = chart.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-2014 Steema Software SL. All rights reserved.