Features

Event Annotations

Event Annotations

Event annotations are used to mark important events that can be attached to a specific data point on the FinancialChart. Hovering over the event annotation will reveal the full details of the event.

Features

Chart Types
Interaction
Analytics

Description

Event annotations are used to mark important events that can be attached to a specific data point on the FinancialChart. Hovering over the event annotation will reveal the full details of the event.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FinancialChartExplorer.Models;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult EventAnnotations()
        {
            var model = BoxData.GetDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { };
            ViewBag.Tooltips = BoxData.GetAnnotationTooltips();
            ViewBag.ChartType = C1.Web.Mvc.Finance.ChartType.Candlestick;
            return View(model);
        }
    }
}
@using FinancialChartExplorer.Models

@model List<FinanceData>
@{
    ViewBag.DemoSettings = false;
    C1.Web.Mvc.Finance.ChartType chartType = ViewBag.ChartType;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
    List<String> tooltips = ViewBag.Tooltips;
    SVGStyle style = new SVGStyle { StrokeWidth = 1, Fill = "rgba(136,189,230,0.7)", Stroke = "#000" };
}


<script type="text/javascript">
    c1.documentReady(function () {
        c1.getExtender(wijmo.Control.getControl("#rs"), "RangeSelector").min = 47.5;
    });
</script>


@(Html.C1().FinancialChart()
.Id(demoSettingsModel.ControlId)
.Bind(Model)
.BindingX("X")
.SymbolSize(6)
.ChartType(chartType)
.Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close,Volume").Name("BOX");
    })
.Tooltip(t => t.Content("financialTooltip"))
.AddAnnotationLayer(layer =>
{
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
        .Content("E").Height(20).Width(20).PointIndex(64).Style(style).Tooltip(tooltips[0]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(65).Style(style).Tooltip(tooltips[1]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(72).Style(style).Tooltip(tooltips[2]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
        .Content("E").Height(20).Width(20).PointIndex(74).Style(style).Tooltip(tooltips[3]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(76).Style(style).Tooltip(tooltips[4]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(77).Style(style).Tooltip(tooltips[5]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(80).Style(style).Tooltip(tooltips[6]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(81).Style(style).Tooltip(tooltips[7]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(82).Style(style).Tooltip(tooltips[8]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(83).Style(style).Tooltip(tooltips[9]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(84).Style(style).Tooltip(tooltips[10]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(85).Style(style).Tooltip(tooltips[11]));
    layer.AddRectangle(rect => rect.Attachment(AnnotationAttachment.DataIndex)
    .Content("E").Height(20).Width(20).PointIndex(86).Style(style).Tooltip(tooltips[12]));
}))

@Html.Partial("_RangeSelector")

@section Description{
    <p>
        Event annotations are used to mark important events that can be attached to a specific data point on the FinancialChart. Hovering over the event annotation will reveal the full details of the event.
    </p>
}
@section Summary{
    <p>
        Event annotations are used to mark important events that can be attached to a specific data point on the FinancialChart. Hovering over the event annotation will reveal the full details of the event.
    </p>
}