Annotation Symbols

A typical use for annotations is the addition of symbols (text or images) to data points. The symbols typically have tooltips or text with additional information about the point they are attached to.

The chart below has symbols that contain relevant (but fake) headlines for some key dates:

// This file locates: "Scripts/Lesson/C1FlexChart/AnnotationsSymbols.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // add annotation layer
    var annotations = new wijmo.chart.annotation.AnnotationLayer(theChart, [
        {
            type: 'Rectangle',
            attachment: 'DataIndex',
            pointIndex: 33,
            position: 'Top',
            tooltip: 'Something <b>negative</b><br/>happened today...',
            content: 'N',
            width: 20, height: 20,
            style: { fill: '#01DFD7', stroke: '#000000' }
        },
        {
            type: 'Rectangle',
            attachment: 'DataIndex',
            pointIndex: 27,
            position: 'Top',
            tooltip: 'Something <b>positive</b><br/>happened today...',
            content: 'P',
            width: 20, height: 20,
            style: { fill: '#01DFD7', stroke: '#000000' }
        },
        {
            type: 'Image',
            href: 'https://maps.google.com/mapfiles/marker_green.png',
            width: 15, height: 30,
            attachment: 'DataCoordinate',
            point: { x: new Date(2017, 1, 7), y: 800 },
            tooltip: 'Time to buy!',
        },
        {
            type: 'Image',
            href: 'https://maps.google.com/mapfiles/marker_yellow.png',
            width: 15, height: 30,
            attachment: 'DataCoordinate',
            point: { x: new Date(2017, 1, 24), y: 800 },
            tooltip: 'Turbulence ahead...',
        },
        {
            type: 'Image',
            href: 'https://maps.google.com/mapfiles/marker_green.png',
            width: 15, height: 30,
            attachment: 'DataCoordinate',
            point: { x: new Date(2017, 2, 5), y: 800 },
            tooltip: 'All is fine again...',
        },
    ]);
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AnnotationsSymbols
        public ActionResult AnnotationsSymbols()
        {
            return View(Models.FlexChartData.GetStocks3());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AnnotationsSymbols_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AnnotationsSymbols_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AnnotationsSymbols_Text2)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .Series(sb => sb.Add().Binding("Low,High,Open,Close").Name("Alphabet Inc"))
)