Please help with callout from series/point and hotspot

[norman]

Hi,

I trying to devise a way of displaying events on my (time series) chart but I'm not sure of how to go about it.

What I'd like to end up with something like I've tried to depict below. The -o- is my series. The - is the series line and the o are the individual series points. This much I have already. The | is a line (or callout) emanating from a point on the series or from the series line itself (really its position corresponds to a specific date-and-time on the x-axis). At the end of the line is A which could be a shape (like those used to represent series points e.g. a circle or square etc.), an image or some text (whatever is achievable). The important thing is that if you hover over the A, a popup should appear displaying additional text (i.e. the A would be a hotspot?). Ideally it would be nice if this was html (either a div-style popup or a new html window) to allow for the possibility of formatting but a tooltip may do. Just wondering how much of this is achievable? I see some type of popup is achieved in the 'Customising Mouseover Marks' - is there any way this could be attached to a callout as I've described?

Code: Select all

      A       
      |	          A	
      |             |
------o--------o----|----o---

Any tips from anybody who's tried anything similar would be appreciated.

Thanks,

Norman

[Marc]

Hello Norman,

We'll have to add this as a feature request because at the moment there is no immediate mechanism to place the hotspots on non-Series elements of the Chart. It could now still be achieved in a roundabout way now though....

If we use the Web demo, customisingmouseovermarkschart.aspx, as the basis of this example .. you'll see that you can substitute in co-ordinates of a different Chart element for those of a point, thus modifying the html MAP on the page.

Using the following code you will see the hotspot image (or text) appear when you mouseover the Chart Legend.

Code: Select all

private void hotspot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
{
  //modding the beginning of the event code ->

  int left = WebChart1.Chart.Legend.Left;
  int top = WebChart1.Chart.Legend.Top;
  int right = WebChart1.Chart.Legend.Right;
  int bottom = WebChart1.Chart.Legend.Bottom;

  if ((e.Series==WebChart1.Chart[0]) && (e.PointPolygon.ValueIndex == 1)) //enter once
  {
    e.PointPolygon.Coordinates = new int[] { left, top, right, top, right,bottom , left,bottom };
    e.PointPolygon.Attributes = String.Format(Texts.HelperScriptAnnotation,
                                    "<IMG SRC=images/image" + (e.PointPolygon.ValueIndex + 1) + ".gif>");
  }
  else ......etc (existing code)

In this case no mouseover custom hint appears now over the first of the middle bars of the example as its hint has been redirected to the Legend. You could use the technique to raise the height of hotspots to that of a mark above a point (by Series.Marks.ArrowLength for example, the e.PointPolygon.Coordinates use pixel locations and ArrowLength is expressed in pixels).

The downside of this technique, as it stands, is that you need Series points to force the hotspot1_GetHTMLMap event call. Almost certainly your Chart will have points, but the technique does require that you surrender your point hotspots for your other objectives.

If processed inhouse here as a feature request we'll make a note to make any new event (callback) as generic as possible in nature.

Regards,
Marc Meumann

[Marc]

Hello,

As a followup I have just found that there is provision already for custom objects in the html MAP. Somewhat easier than the previous option I described.

You need to write it in as a map element (SeriesHotspot MapElements property). Internally this is slightly incorrect in implementation as it writes before the closing '>' of the opening MAP tag. It is easy to put right though, you need to write the closing tag in, in the following way:

Eg.

Code: Select all

private void seriesHotspot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
{		
	e.PointPolygon.Title = e.Series.Labels[e.PointPolygon.ValueIndex]+" "+ e.Series.YValues.Value[e.PointPolygon.ValueIndex].ToString();
	e.PointPolygon.HREF =Request.Path+"?index="+e.PointPolygon.ValueIndex;

  if (e.PointPolygon.ValueIndex==0)
    ((Steema.TeeChart.Tools.SeriesHotspot)(sender)).MapElements = "><AREA shape=\"Poly\" Title=\"Legend hotspot\" coords=\"350,10,399,10,399,54,350,54";
}

One closing tag will then be generated at the end. If you write multiple entries, leave the closing '>' tag off the last entry.

Co-ordinates could be generated dynamically according to Chart element locations as in the previous example.

Regards,
Marc

[norman]

Hi Marc,

Thanks for the tips - certainly food for thought. I'll need to play around with things to see how things hang together.

Thanks again

[norman]

Hi Marc,

Apologies I'm only getting around to this again now. So far I have the following working (basically I've just added two annotations at specific points and custom text is displayed if you hover over them):

Code: Select all

Public Partial Class WebForm1
    Inherits System.Web.UI.Page

    Dim annotations As New ArrayList

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim seriesHotspotTool As New Steema.TeeChart.Tools.SeriesHotspot(WebChart1.Chart)
        With seriesHotspotTool
            .HelperScript = Steema.TeeChart.Tools.HotspotHelperScripts.Annotation
            .HotspotCanvasIndex = 499
            .MapAction = Steema.TeeChart.Styles.MapAction.Mark
            .MapElements = ""
        End With
        AddHandler seriesHotspotTool.GetHTMLMap, AddressOf hotspot_GetHTMLMap

    End Sub

    Private Sub hotspot_GetHTMLMap(ByVal sender As Steema.TeeChart.Tools.SeriesHotspot, ByVal e As Steema.TeeChart.Tools.SeriesHotspotEventArgs)

        Dim XVal As String = e.PointPolygon.Title
        XVal = Date.FromOADate(e.Series.XValues.Value(e.PointPolygon.ValueIndex)).ToString("MM/dd/yyyy HH:mm:ss")

        e.PointPolygon.Title = "Date/Time: " & XVal & vbCrLf & _
        "Value: " & e.Series.YValues.Value(e.PointPolygon.ValueIndex).ToString()

        Dim mapElements As String = String.Empty
        For i As Integer = 0 To annotations.Count - 1
            If i = 0 Then
                mapElements &= ">"
            End If
            mapElements &= "<AREA shape=""Poly"" Title=""" & "Event " & (i + 1).ToString & " Title " & _
                vbCrLf & _
                "Event " & (i + 1).ToString & " Description" & """ coords=""" & _
                annotations(i).Left & _
                "," & _
                annotations(i).Top & _
                "," & _
                annotations(i).Left + annotations(i).Width & _
                "," & _
                annotations(i).Top & _
                "," & _
                annotations(i).Left + annotations(i).Width & _
                "," & _
                annotations(i).Top + annotations(i).Height & _
                "," & _
                annotations(i).Left & _
                "," & _
                annotations(i).Top + annotations(i).Height & _
                IIf(i = annotations.Count - 1, """", """>")
        Next

        If mapElements <> String.Empty Then
            CType(sender, Steema.TeeChart.Tools.SeriesHotspot).MapElements = mapElements
        End If

    End Sub

    Private Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click

        Dim ch1 As Steema.TeeChart.Chart = WebChart1.Chart
        ch1.Aspect.View3D = False

        Dim LineSeries As Steema.TeeChart.Styles.Line
        LineSeries = New Steema.TeeChart.Styles.Line
        LineSeries.XValues.DateTime = True
        ch1.Series.Add(LineSeries)

        LineSeries.FillSampleValues(20)
        LineSeries.Pointer.Visible = True
        
        Dim annotation As Steema.TeeChart.Tools.Annotation
        For i As Integer = 0 To 1
            annotation = New Steema.TeeChart.Tools.Annotation(ch1)
            With annotation
                .Active = True
                .Position = Steema.TeeChart.Tools.AnnotationPositions.LeftTop
                .Text = "Annotation " & (i + 1).ToString
                With .Callout
                    .Visible = True
                    .Arrow.Color = Drawing.Color.Black
                    .Arrow.Visible = True
                End With
            End With
            annotations.Add(annotation)
        Next

        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
            Dim tmpY As Integer
            Dim w As Integer
            Dim h As Integer

            For i As Integer = 0 To annotations.Count - 1
                tmpX = WebChart1.Chart(0).CalcXPos((i + 1) * 5)
                tmpY = WebChart1.Chart(0).CalcYPos((i + 1) * 5)
                w = CType(annotations(i), Steema.TeeChart.Tools.Annotation).Width
                h = CType(annotations(i), Steema.TeeChart.Tools.Annotation).Height
                With CType(annotations(i), Steema.TeeChart.Tools.Annotation)
                    .Left = tmpX - (w / 2)
                    .Top = tmpY - (h + 20)
                    With .Callout
                        .XPosition = tmpX
                        .YPosition = tmpY
                        .ZPosition = 0
                    End With
                End With
            Next

        End If

    End Sub

Is it possible to have html (e.g. like a floating div?) displayed instead of tooltips when you hover over the annotations whilst still retaining the tooltips over the series points?

Thanks,

Norm