LinearGage numeric value

[Thomas]

Hi! I'm using Xamarin.Android teechart.
I want to place numeric representation of value in LinearGauge in center of bar (like on screenshot)
I draw that value in AfterDraw event.
But when i calculate size from the top left corner of chart - and adjust it to specific device - on another device it is in wrong place (i use proper px to dp transformation). I need calculate text position from border top left corner (not whole chart corner)
1) how to get border top left corner coordinates (red arrow on screenshot)? i can't find appropriate properties.
2) how to change border color?
Thanks in advance

[Narcís]

Hi Thomas,

1. You can do this:

Code: Select all

  public class MyLinearGauge : LinearGauge
  {
    public MyLinearGauge(Chart chart) : base(chart) { }

    public Rectangle AxisRectangle
    {
      get
      {
        int height, width, x, y;

        if (Horizontal)
        {
          height = Ticks.VertSize;
          width = Utils.Round(INewRectangle.Width * 0.8);
          x = (INewRectangle.X + (INewRectangle.Width / 2)) - (width / 2);
          y = INewRectangle.Y + ((INewRectangle.Height - height) / 2);
        }
        else
        {
          height = Utils.Round(INewRectangle.Height * 0.8);
          width = Ticks.VertSize;
          x = (INewRectangle.X + (INewRectangle.Width / 2)) - (width / 2);
          y = INewRectangle.Y + ((INewRectangle.Height - height) / 2);
        }

        return new Rectangle(x, y, width, height);
      }
    }
  }

  [Activity(Label = "TeeChart for MonoDroid Demo", MainLauncher = true)]
  public class Activity1 : Activity
  {

    protected override void OnCreate(Bundle bundle)
    {
      base.OnCreate(bundle);

      InitializeChart();      
    }

    private Steema.TeeChart.TChart tChart1;
    MyLinearGauge gauge;

    private void InitializeChart()
    {
      tChart1 = new Steema.TeeChart.TChart(this);

      gauge = new MyLinearGauge(tChart1.Chart);
      gauge.FillSampleValues();

      tChart1.AfterDraw += tChart1_AfterDraw;

      gauge.Frame.InnerBand.Color = Color.Cyan;

      SetContentView(tChart1);
    }

    void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {
      Point topleft = gauge.AxisRectangle.Location;

      g.Pen.Width = 3;
      g.Pen.Color = Color.Pink;
      g.Line(topleft, new Point(200, 10)); 

    }
  }

2. See gauge.Frame.InnerBand.Color property in the example.

[Thomas]

Thanks. 1-st part works perfect.
Frame color deosn't work. When i make FrameVisible, disable Middle and outer bands It draws one more rectangle outside small thin frame. Seems like frame on first screenshot - is not related to LinearLayout.Frame property.

[Narcís]

Hi Thomas,

Frame color deosn't work. When i make FrameVisible, disable Middle and outer bands It draws one more rectangle outside small thin frame. Seems like frame on first screenshot - is not related to LinearLayout.Frame property.

I'm not sure about which is the problem you describe. Adding this code:

Code: Select all

      gauge.Frame.Visible = true;
      gauge.Frame.MiddleBand.Visible = false;
      gauge.Frame.OuterBand.Visible = false;
      gauge.Frame.InnerBand.Color = Color.Cyan;

I get a chart like in the image below. Is that what you get? What's the problem with it?

device-2014-01-21-151924.png (45.61 KiB) Viewed 15807 times

Thanks in advance.

[Thomas]

I have another problem. When i draw line from Point
topleft = gauge.AxisRectangle.Location;
from your first response everything is OK on all devices. The line draws from corner.

But when I try to draw text with
g.TextOut (topleft.X, topleft.Y, "1234");
text is drawed on different positions on Y axis on different devices. g.TextOut works with the same coordinate system? How to draw text in center of bar?
Thanks in advance.

[Narcís]

Hi Thomas,

g.TextOut works with the same coordinate system?

Yes.

How to draw text in center of bar?

Continuing with the MyLinearGauge example, you can do this:

Code: Select all

    void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {
      Point topleft = gauge.AxisRectangle.Location;

      g.Pen.Width = 3;
      g.Pen.Color = Color.Pink;
      g.Line(topleft, new Point(200, 10));

      Point center = new Point(topleft.X + gauge.AxisRectangle.Width / 2, topleft.Y + gauge.AxisRectangle.Height / 2);

      g.Font.Color = Color.Red;
      g.TextOut(center.X, center.Y, "My custom text");
    }

With a Bar series, this:

Code: Select all

  [Activity(Label = "TeeChart for MonoDroid Demo", MainLauncher = true)]
  public class Activity1 : Activity
  {

    protected override void OnCreate(Bundle bundle)
    {
      base.OnCreate(bundle);

      InitializeChart();      
    }

    private Steema.TeeChart.TChart tChart1;
    Bar bar1;
    Rectangle[] barRect;

    private void InitializeChart()
    {
      tChart1 = new Steema.TeeChart.TChart(this);

      bar1 = new Bar(tChart1.Chart);
      bar1.FillSampleValues();

      barRect = new Rectangle[bar1.Count];

      bar1.GetBarStyle += bar1_GetBarStyle;
      tChart1.AfterDraw += tChart1_AfterDraw;

      SetContentView(tChart1);
    }

    void bar1_GetBarStyle(CustomBar sender, CustomBar.GetBarStyleEventArgs e)
    {
      barRect[e.ValueIndex] = sender.BarBounds;
    }

    void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {
      g.Font.Color = Color.Red;

      for (int i = 0; i < bar1.Count; i++)
      {
        string text = bar1.YValues[i].ToString();
        SizeF textSize = g.MeasureString(g.Font, text);

        int X = barRect[i].X + Steema.TeeChart.Utils.Round(barRect[i].Width / 2) - Steema.TeeChart.Utils.Round(textSize.Width / 2);
        int Y = barRect[i].Y + Steema.TeeChart.Utils.Round(barRect[i].Height / 2) - Steema.TeeChart.Utils.Round(textSize.Height / 2);

        g.TextOut(X, Y, text);
      }
    }
  }

[Thomas]

Size of drawing text is strange. Text "100000" has height > widht. height is very big. I
I found solution

Code: Select all

var topleft = gauge.AxisRectangle.Location;
			g.TextOut (topleft.X +  gauge.AxisRectangle.Width/2, topleft.Y - (int)textSize.Height + gauge.AxisRectangle.Height - (gauge.AxisRectangle.Height - g.Font.Size) / 2 + 2, value);

It works.

I have last question. On some devices CircularGauge axis labels are far from the border(see screenshot), on other near the border(frame). All ticks sizes are zero. How to set labels near the frame?

Thanks in advance.

[Narcís]

Hi Thomas,

Size of drawing text is strange. Text "100000" has height > widht. height is very big.

Those are decimals, that's because width and height are float numbers. You can check it using this code:

Code: Select all

    void tChart1_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
    {
      g.Font.Size = 14;
      g.Font.Bold = true;
      g.Font.Color = Color.Red;
      string text = "100000";
      SizeF textSize = g.MeasureString(g.Font, text);
      int x = Steema.TeeChart.Utils.Round(textSize.Width);
      int y = Steema.TeeChart.Utils.Round(textSize.Height);
      g.TextOut(x, y, text + ". Position: " + x.ToString() + " - " + y.ToString());
    }

On some devices CircularGauge axis labels are far from the border(see screenshot), on other near the border(frame). All ticks sizes are zero. How to set labels near the frame?

Which kind of devices? Are those low resolution screened devices? Which sort of screens in the table here? Anyway, you can change that with Ticks.VertSize:

Code: Select all

      circularGauge1.Ticks.VertSize = 0;

Thanks in advance.

[Thomas]

Still cannot change border color (see my 1st post in this topic).
Frame property is other frame, not the frame near hand (see attachment to first post).

[Narcís]

Hi Thomas,

Apologies for the misunderstanding. That frame is the axis, hence you can change its pen properties like this:

Code: Select all

      gauge.Axis.AxisPen.Color = Color.Red;
      gauge.Axis.AxisPen.Width = 5;

Is that what you were looking for?

[Thomas]

Thanks. It works