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
Heikin-Ashi
Line Break
Renko
Kagi
ColumnVolume
EquiVolume
CandleVolume
Arms CandleVolume
Point and Figure
Interaction
Markers
Range Selector
Analytics
Trend Lines
Moving Averages
Overlays
Indicators
Event Annotations
Fibonacci Tool
BOX04/02/1504/06/1504/07/1504/08/1504/09/1504/10/1504/13/1504/14/1504/15/1504/16/1504/17/1504/20/1504/21/1504/22/1504/23/1504/24/1504/27/1504/28/1504/29/1504/30/1505/01/1505/04/1505/05/1505/06/1505/07/1505/08/1505/11/1505/12/1505/13/1505/14/1505/15/1505/18/1505/19/1505/20/1505/21/1505/22/1505/26/1505/27/1505/28/1518EEEEEEEEEEEEE
01/23/1501/27/1501/29/1502/02/1502/04/1502/06/1502/10/1502/12/1502/17/1502/19/1502/23/1502/25/1502/27/1503/03/1503/05/1503/09/1503/11/1503/13/1503/17/1503/19/1503/23/1503/25/1503/27/1503/31/1504/02/1504/07/1504/09/1504/13/1504/15/1504/17/1504/21/1504/23/1504/27/1504/29/1505/01/1505/05/1505/07/1505/11/1505/13/1505/15/1505/19/1505/21/1505/26/1505/28/152024

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
@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>@Html.Raw(Resources.Home.EventAnnotations_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Resources.Home.EventAnnotations_Text1)</p>
}