Annotation with callout in WebChart

norman · Post by **norman** » Mon Feb 23, 2009 2:27 pm

Hi,

Could someone show me how to add an annotation with a callout to a point on a series. I can get the Annotation to appear but the callout never does!

Code: Select all

Dim series As Steema.TeeChart.Styles.Line
series = GetTimeSeries()  'returns a new series not shown for brevity
WebChart.Chart.Series.Add(series) ' add series to chart
For each myObj in myObjects
   series.Add(myObj.DateTime, myObj.Value) ' add point
Next

Dim note As New Steema.TeeChart.Tools.Annotation(WebChart.Chart)
note.Left = 65
note.Text = "Annotation1"

' The following was just to check that my series does have points does
' Iterate through points in series to get pixel coordinates
' however tmpX and tmpY are always 0
' Tried calling WebChart.Chart.Invalidate method but has no effect
Dim tmpX as Integer
Dim tmpY as Integer
For i As Integer = 0 To WebChart.Chart(0).Count
   tmpX = WebChart.Chart(0).CalcXPos(i)
   tmpY= WebChart.Chart(0).CalcYPos(i)
Next

note.Callout.XPosition = tmpX
note.Callout.YPosition = tmpY
note.Callout.ZPosition = 0

Thanks,

Noman

Narcís · Post by **Narcís** » Mon Feb 23, 2009 2:55 pm

Hi Norman,

Yes, there's an example here.

Hope this helps!

norman · Post by **norman** » Mon Feb 23, 2009 3:16 pm

Hi Narcís,

Thanks for the reply. I'm getting coordinates now by including the line

Code: Select all

Dim bmp As Bitmap = WebChart.Chart.Bitmap(400, 300)

before calling the CalcXPos and CalcYPos methods. I can see a small black square appearing on my chart but the connecting line between the annotation and the square is not visible. I have included:

Code: Select all

note.Callout.Pen.Color = Color.Black
note.Callout.Brush.Color = Color.Black
note.Callout.Pen.Width = 2
note.Callout.Visible = True

What am I missing?

Thanks

norman · Post by **norman** » Mon Feb 23, 2009 3:44 pm

Hi Narcís,

I've noticed also that the black square does not appear to be in the correct position - or perhaps I'm misunderstanding things? The following lines:

Code: Select all

tmpX = WebChart.Chart(0).CalcXPos(5) 
tmpY= WebChart.Chart(0).CalcYPos(5)

should return the x and y pixel coords of the 6th point in the 1st series - right? If I set the callout XPosition and YPosition (as in my previous post), the square should appear over the 6th point - right? However it isn't. Would it have anything to do with the fact that I have two series each with their own custom axes (i.e. the two series appear stacked on top of eachother).

Thanks again,

Norman

Narcís · Post by **Narcís** » Mon Feb 23, 2009 4:33 pm

Hi Norman,

What am I missing?

You also need to make Callou'ts Arrow visible:

AnnotationTool.Callout.Arrow.Visible = true;

should return the x and y pixel coords of the 6th point in the 1st series - right?

Yes, that's correct.

If I set the callout XPosition and YPosition (as in my previous post), the square should appear over the 6th point - right? However it isn't. Would it have anything to do with the fact that I have two series each with their own custom axes (i.e. the two series appear stacked on top of eachother).

Are you using this code in the AfterDraw event and calling Bitmap method as in the example I pointed?

Thanks in advance.

norman · Post by **norman** » Mon Feb 23, 2009 5:28 pm

Hi,

OK - I can see the line now.

Code: Select all

AnnotationTool.Callout.Arrow.Visible = true

Did the trick. However the point is still in the wrong place! Here's the code I have.

Code: Select all

Partial Class MyChart

Dim Annotation1 As Steema.TeeChart.Tools.Annotation

Protected Sub cmdDraw_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdDraw.Click

            Dim series As Steema.TeeChart.Styles.Line
            Dim axis As Steema.TeeChart.Axis

            For Each objLine In objLines
		series = GetSeries(...) ' returns new series (omitted for brevity)
                WebChart.Chart.Series.Add(series)

                axis = GetAxis(...) ' returns new custom axis with start and end position for stacking (omitted for brevity)
                WebChart.Chart.Axes.Custom.Add(axis)

                series.CustomVertAxis = axis

                For each objPoint in my objPoints ' add data (omitted for brevity)
			series.Add(obj.DateTime, obj.Value)
                Next
            Next

            Annotation1 = New Steema.TeeChart.Tools.Annotation(WebChart.Chart)
            Annotation1.Active = True
            Annotation1.Position = Steema.TeeChart.Tools.AnnotationPositions.LeftTop
            Annotation1.Text = "My Annotation"
            Annotation1.Callout.Visible = True
            Annotation1.Callout.Arrow.Visible = True

            Dim bmp As Bitmap = WebChart.Chart.Bitmap(400, 300) ' need to specify height and width however are the same as those specified at design time

        End Sub

Protected Sub WebChart_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles WebChart.AfterDraw

            Dim tmpX As Integer = WebChart.Chart(1).CalcXPos(5)
            Dim tmpY As Integer = WebChart.Chart(1).CalcYPos(5)

            Annotation1.Callout.XPosition = tmpX
            Annotation1.Callout.YPosition = tmpY
            Annotation1.Callout.ZPosition = 0

        End Sub

End Class

I could post an image but I'm not sure how to upload it.

Thanks again

Narcís · Post by **Narcís** » Tue Feb 24, 2009 2:24 pm

Hi norman,

Code below works fine for me here. Can you please check if it works fine at your end?

Code: Select all

  Dim Annotation1 As Steema.TeeChart.Tools.Annotation

  Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim ch1 As Steema.TeeChart.Chart = WebChart1.Chart
    ch1.Aspect.View3D = False

    For i As Integer = 0 To 4
      ch1.Series.Add(New Steema.TeeChart.Styles.Line())
      ch1(i).FillSampleValues()
      CType(ch1(i), Steema.TeeChart.Styles.Line).Pointer.Visible = True
    Next

    Annotation1 = New Steema.TeeChart.Tools.Annotation(ch1)
    Annotation1.Active = True
    Annotation1.Position = Steema.TeeChart.Tools.AnnotationPositions.LeftTop
    Annotation1.Text = "My Annotation"
    Annotation1.Callout.Visible = True
    Annotation1.Callout.Arrow.Visible = True

    Dim bmp As Drawing.Bitmap = ch1.Bitmap(400, 300)
  End Sub

  Protected Sub WebChart1_AfterDraw(ByVal sender As Object, ByVal g As Steema.TeeChart.Drawing.Graphics3D) Handles WebChart1.AfterDraw
    If (WebChart1.Chart.Series.Count > 0) Then
      Dim tmpX As Integer = WebChart1.Chart(1).CalcXPos(5)
      Dim tmpY As Integer = WebChart1.Chart(1).CalcYPos(5)

      Annotation1.Callout.XPosition = tmpX
      Annotation1.Callout.YPosition = tmpY
      Annotation1.Callout.ZPosition = 0
    End If
  End Sub

Thanks in advance.

norman · Post by **norman** » Wed Feb 25, 2009 4:13 pm

Hi Narcís,

Thanks for the continued help. My bad

, after trying your sample (which worked) I went back and re-examined things and found that I was setting other chart properties (e.g. position of legend etc.) after the call to the cmdDraw_Click event which affected things. Once I moved this routine to before the cmdDraw_Click event the callout appeared in the correct position.

One more thing... is there a easier way to position an annotation above a point without having to doing some type of calculation involving the position of the point, the dimensions of the annotation and some offset - e.g. I'd like to position an annotation n (where n is a number) pixels centred above a point - with the callout being vertical.

As a general rule when you're working with pixel coordinates for use in calculations should you always get/set these in the AfterDraw event?

Thanks again,

Norman

Narcís · Post by **Narcís** » Fri Feb 27, 2009 10:17 am

Hi Norman,

One more thing... is there a easier way to position an annotation above a point without having to doing some type of calculation involving the position of the point, the dimensions of the annotation and some offset - e.g. I'd like to position an annotation n (where n is a number) pixels centred above a point - with the callout being vertical.

I'm afraid not.

As a general rule when you're working with pixel coordinates for use in calculations should you always get/set these in the AfterDraw event?

Yes, there are 2 advantages here:

1. In the AfterDraw event all chart objects have already been painted and therefore used properties and methods return valid values.

2. If objects are set to positions relative to the chart (series points, axes, legend, etc.) everytime the chart is drawn (zoom, scroll, ...) those positions are also updated.