Stock Events in ASP.NET MVC Stock Chart control

Stock Events visualizes stockevents in stockchart. ‘SplineSeries’ is used to represent selected data value. You can customize the specific data value using stockEvents event.

razor

stockEvents.cs

<script src="~/financial-data.js"></script>

            @(Html.EJS().StockChart("container")..SeriesType(new List<Object>() { }).TrendlineType(new List<Object>() { }).IndicatorType(new List<Object>() { })
              .PrimaryXAxis(xaxis =>xaxis.MajorGridLines(mg=>mg.Width(0)
        ).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).CrosshairTooltip(ct=>ct.Enable(true)))
        .PrimaryYAxis(yaxis =>yaxis.MajorTickLines(mt=>mt.Color("transparent").Width(0)
        ).LineStyle(ls=>ls.Color("transparent")).CrosshairTooltip(ct=>ct.Enable(false)))
         .Series(sr =>
         {
             sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).DataSource("data").XName("x").YName("high").Close("high").Add();
         })
        .Crosshair(cr=>cr.Enable(true))
        .ChartArea(area => area.Border(br=>br.Width(0)))
        .StockEvents(se =>
               {
                    se.Date(new DateTime(2012, 03, 01)).Text("Q2").Description("2012 Quarter2 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).Add();
                    se.Date(new DateTime(2012, 03, 20)).Text("Open").Description("Markets opened").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 06, 01)).Text("Q3").Description("2013 Quarter3 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 09, 01)).Text("Q4").Description("2013 Quarter4 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 07, 30)).Text("G").Description("Google stocks bought").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 10, 01)).Text("Y").Description("Yahoo stocks sold").Type(Syncfusion.EJ2.Charts.FlagType.Square).
                    Background("#841391").Border(br => br.Color("#841391")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 12, 01)).Text("Y2").Description("Year 2013").Type(Syncfusion.EJ2.Charts.FlagType.Pin).
                    Background("#6322e0").ShowOnSeries(false).Border(br => br.Color("#6322e0")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2013, 03, 01)).Text("Q2").Description("2013 Quarter2 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2013, 03, 20)).Text("Q2").Description("Surge in Stocks").Type(Syncfusion.EJ2.Charts.FlagType.ArrowUp).
                    Background("#3ab0f9").Border(br => br.Color("#3ab0f9")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2013, 06, 01)).Text("Q3").Description("2013 Quarter3 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2013, 09, 01)).Text("Q4").Description("2013 Quarter4 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2013, 12, 0)).Text("Y3").Description("Year 2014").Type(Syncfusion.EJ2.Charts.FlagType.Pin).ShowOnSeries(false).
                    Background("#6322e0").Border(br => br.Color("#6322e0")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2014, 03, 01)).Text("Q2").Description("2014 Quarter2 starts").Type(Syncfusion.EJ2.Charts.FlagType.ArrowDown).ShowOnSeries(false).
                    Background("#3ab0f9").Border(br => br.Color("#3ab0f9")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2014, 06, 01)).Text("Q3").Description("2014 Quarter3 starts").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2014, 09, 01)).Text("Q4").Description("2014 Quarter4 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2014, 12, 0)).Text("Y4").Description("Year 2015").Type(Syncfusion.EJ2.Charts.FlagType.Pin).ShowOnSeries(false).
                    Background("#6322e0").Border(br => br.Color("#6322e0")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2014, 02, 02)).Text("End").Description("Markets Closed").Type(Syncfusion.EJ2.Charts.FlagType.ArrowDown).
                    Background("#3ab0f9").Border(br => br.Color("#3ab0f9")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2015, 01, 07)).Text("A").Description("This is event description").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2015, 01, 02)).Text("Q1").Description("Add longer text").
                    Background("#dd3c9f").Border(br => br.Color("#dd3c9f")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2015, 02, 12)).Text("Close").Description("Markets closed").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                })
       .Render())
       
    <script>
        var data = window.aapl;
    </script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }
    }
}

Stock Events for individual series

By default, stock events will be showed for all series. Now, you can set the stock events for particular series using SeriesIndexes property.

razor

stock-events-2.cs

<script src="~/financial-data.js"></script>

            @(Html.EJS().StockChart("container")..SeriesType(new List<Object>() { }).TrendlineType(new List<Object>() { }).IndicatorType(new List<Object>() { })
              .PrimaryXAxis(xaxis =>xaxis.MajorGridLines(mg=>mg.Width(0)
        ).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).CrosshairTooltip(ct=>ct.Enable(true)))
        .PrimaryYAxis(yaxis =>yaxis.MajorTickLines(mt=>mt.Color("transparent").Width(0)
        ).LineStyle(ls=>ls.Color("transparent")).CrosshairTooltip(ct=>ct.Enable(false)))
         .Series(sr =>
         {
             sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).DataSource("data").XName("x").YName("high").Add();
             sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).DataSource("data").XName("x").YName("low").Add();
         })
        .Crosshair(cr=>cr.Enable(true))
        .ChartArea(area => area.Border(br=>br.Width(0)))
        .StockEvents(se =>
               {
                    se.Date(new DateTime(2012, 03, 01)).Text("Q2").Description("2012 Quarter2 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d").SeriesIndexes([0])).Add();
                    se.Date(new DateTime(2012, 03, 20)).Text("Open").Description("Markets opened").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 06, 01)).Text("Q3").Description("2013 Quarter3 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 09, 01)).Text("Q4").Description("2013 Quarter4 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).SeriesIndexes([1]).Add();
                    se.Date(new DateTime(2012, 07, 30)).Text("G").Description("Google stocks bought").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).SeriesIndexes([0]).Add();
                    se.Date(new DateTime(2012, 10, 01)).Text("Y").Description("Yahoo stocks sold").Type(Syncfusion.EJ2.Charts.FlagType.Square).
                    Background("#841391").Border(br => br.Color("#841391")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2012, 12, 01)).Text("Y2").Description("Year 2013").Type(Syncfusion.EJ2.Charts.FlagType.Pin).
                    Background("#6322e0").ShowOnSeries(false).Border(br => br.Color("#6322e0")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2013, 03, 01)).Text("Q2").Description("2013 Quarter2 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).SeriesIndexes([0]).Add();
                    se.Date(new DateTime(2013, 03, 20)).Text("Q2").Description("Surge in Stocks").Type(Syncfusion.EJ2.Charts.FlagType.ArrowUp).
                    Background("#3ab0f9").Border(br => br.Color("#3ab0f9")).TextStyle(ts => ts.Color("white")).SeriesIndexes([1]).Add();
                    se.Date(new DateTime(2013, 06, 01)).Text("Q3").Description("2013 Quarter3 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).SeriesIndexes([0]).Add();
                    se.Date(new DateTime(2013, 09, 01)).Text("Q4").Description("2013 Quarter4 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).SeriesIndexes([1]).Add();
                    se.Date(new DateTime(2013, 12, 0)).Text("Y3").Description("Year 2014").Type(Syncfusion.EJ2.Charts.FlagType.Pin).ShowOnSeries(false).
                    Background("#6322e0").Border(br => br.Color("#6322e0")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2014, 03, 01)).Text("Q2").Description("2014 Quarter2 starts").Type(Syncfusion.EJ2.Charts.FlagType.ArrowDown).ShowOnSeries(false).
                    Background("#3ab0f9").Border(br => br.Color("#3ab0f9")).TextStyle(ts => ts.Color("white")).SeriesIndexes([1]).Add();
                    se.Date(new DateTime(2014, 06, 01)).Text("Q3").Description("2014 Quarter3 starts").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).SeriesIndexes([0]).Add();
                    se.Date(new DateTime(2014, 09, 01)).Text("Q4").Description("2014 Quarter4 starts").Type(Syncfusion.EJ2.Charts.FlagType.Flag).
                    Background("#6c6d6d").Border(br => br.Color("#6c6d6d")).TextStyle(ts => ts.Color("white")).SeriesIndexes([1]).Add();
                    se.Date(new DateTime(2014, 12, 0)).Text("Y4").Description("Year 2015").Type(Syncfusion.EJ2.Charts.FlagType.Pin).ShowOnSeries(false).
                    Background("#6322e0").Border(br => br.Color("#6322e0")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2014, 02, 02)).Text("End").Description("Markets Closed").Type(Syncfusion.EJ2.Charts.FlagType.ArrowDown).
                    Background("#3ab0f9").Border(br => br.Color("#3ab0f9")).TextStyle(ts => ts.Color("white")).SeriesIndexes([0]).Add();
                    se.Date(new DateTime(2015, 01, 07)).Text("A").Description("This is event description").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                    se.Date(new DateTime(2015, 01, 02)).Text("Q1").Description("Add longer text").
                    Background("#dd3c9f").Border(br => br.Color("#dd3c9f")).TextStyle(ts => ts.Color("white")).SeriesIndexes([0]).Add();
                    se.Date(new DateTime(2015, 02, 12)).Text("Close").Description("Markets closed").
                    Background("#f48a21").Border(br => br.Color("#f48a21")).TextStyle(ts => ts.Color("white")).Add();
                })
       .Render())
       
    <script>
        var data = window.aapl;
    </script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }
    }
}

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!