Features

Markers

Markers

Markers display a text area on the FinancialChart that displays the data values based on the mouse cursor's position on the chart.

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
Date: 01/23/15
High: 25
Low: 20
Open: 20
Close: 23
Volume: 42593223
BOX01/23/1501/26/1501/27/1501/28/1501/29/1501/30/1502/02/1502/03/1502/04/1502/05/1502/06/1502/09/1502/10/1502/11/1502/12/1502/13/1502/17/1502/18/1502/19/1502/20/151718192021222324

Settings

Description

Markers display a text area on the FinancialChart that displays the data values based on the mouse cursor's position on the chart.

Markers also support optional vertical and horizontal lines to enable a cross-hair effect.

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
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 Markers()
        {
            var model = BoxData.GetDataFromJson().GetRange(0, 20);
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateMarkersSettings() };
            return View(model);
        }
 
        private static IDictionary<string, object[]> CreateMarkersSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"Alignment", new object[]{"Auto","Bottom","Left","Right","Top"}},
                {"Interaction", new object[]{"Move","Drag","None"}},
                {"Lines", new object[]{"Both","Horizontal","Vertical","None"}},
            };
 
            return settings;
        }
    }
}
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
69
70
71
72
@using FinancialChartExplorer.Models
 
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
 
 
<script type="text/javascript">
    function customChangeAlignment(control, value) {
        var marker = getLineMarker(control);
        if (marker) {
            marker.alignment = wijmo.chart.LineMarkerAlignment[value];
        }
    }
 
    function customChangeInteraction(control,value) {
        var marker = getLineMarker(control);
        if (marker) {
            marker.interaction = wijmo.chart.LineMarkerInteraction[value];
        }
    }
 
    function customChangeLines(control,value) {
        var marker = getLineMarker(control);
        if (marker) {
            marker.lines = wijmo.chart.LineMarkerLines[value];
        }
    }
 
    function lineMarkerContent(ht, pt) {
        var item = ht.series.collectionView.items[ht.pointIndex];
        if (item) {
            return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '<br/>' +
                                'High: ' + item.High.toFixed() + '<br/>' +
                                'Low: ' + item.Low.toFixed() + '<br/>' +
                                'Open: ' + item.Open.toFixed() + '<br/>' +
                                'Close: ' + item.Close.toFixed() + '<br/>' +
                                'Volume: ' + item.Volume.toFixed();
        }
    }
     
    function getLineMarker(control) {
        return c1.getExtender(control, 'LineMarker');
    }
</script>
 
 
@(Html.C1().FinancialChart()
.Id(demoSettingsModel.ControlId)
.Bind(Model)
.BindingX("X")
.ChartType(C1.Web.Mvc.Finance.ChartType.Candlestick)
.Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close,Volume").Name("BOX");
    })
.Tooltip(tp => tp.Content(""))
.AddLineMarker(lm => lm.Id("LineMarker")
        .Alignment(C1.Web.Mvc.Chart.LineMarkerAlignment.Auto)
        .Lines(C1.Web.Mvc.Chart.LineMarkerLines.Both)
        .DragContent(true)
        .Interaction(C1.Web.Mvc.Chart.LineMarkerInteraction.Move).Content("lineMarkerContent")))
 
@section Description{
    <p>@Html.Raw(Resources.Home.Markers_Text0)</p>
    <p>@Html.Raw(Resources.Home.Markers_Text1)</p>
}
@section Summary{
    <p>@Html.Raw(Resources.Home.Markers_Text2)</p>
}