FinancialChart - Markers - C1 ASP.NET MVC

Features

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

Interaction

Analytics

Sample
Source
Documentation

Date: 01/23/15
High: 25
Low: 20
Open: 20
Close: 23
Volume: 42593223

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.

MarkersController.cs
Markers.cshtml

using System.Collections.Generic; 
using FinancialChartExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
  
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; 
        } 
  
    } 
} 

@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>
  
<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="Candlestick"> 
    <c1-items-source source-collection="@Model"></c1-items-source> 
    <c1-financial-chart-series binding="High,Low,Open,Close,Volume" name="BOX"></c1-financial-chart-series> 
    <c1-flex-chart-tooltip content=""></c1-flex-chart-tooltip> 
    <c1-line-marker id="LineMarker" alignment="Auto" lines="Both" drag-content="true" interaction="Move" content="lineMarkerContent"></c1-line-marker> 
</c1-financial-chart> 
  
@section Description{ 
    <p>@Html.Raw(Home.Markers_Text0)</p> 
    <p>@Html.Raw(Home.Markers_Text1)</p> 
} 
@section Summary{ 
    <p>@Html.Raw(Home.Markers_Text2)</p> 
} 