Stock Events in ASP.NET MVC Stock Chart control

26 Oct 2021 / 1 minute to read

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!