StockChart HtmlHelper Overview

The StockChart HtmlHelper extension is a server-side wrapper for the Kendo UI StockChart widget.

Getting Started

Binding

The UI for ASP.NET StockChart makes Ajax requests when bound to a data source.

Configuration

Below are steps for you to follow when configuring the Kendo UI StockChart for ASP.NET MVC for Ajax binding.

Add a New Action Method

Add a new action method which returns data to populate the StockChart.

Example

    @(Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("_BoeingStockData", "Home")
        ))
        .DateField("Date")
    )

    public class StockDataPoint
    {
        public DateTime Date { get; set; }

        public decimal Close { get; set; }

        public long Volume { get; set; }

        public decimal Open { get; set; }

        public decimal High { get; set; }

        public decimal Low { get; set; }

        public string Symbol { get; set; }
    }

    public IActionResult Index()
    {
        return View();
    }

    public IActionResult _BoeingStockData()
    {
        using (var db = GetContext())
        {
            // Return the data as JSON.
            return Json(
                (from s in db.Stocks
                where s.Symbol == "BA"
                select new StockDataPoint
                {
                    Date = s.Date,
                    Open = s.Open,
                    High = s.High,
                    Low = s.Low,
                    Close = s.Close,
                    Volume = s.Volume
                }).ToList()
            );
        }
    }

Create the Data Series

Create the main and navigator data series.

Example

    @(Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("_BoeingStockData", "Home")
        ))
        .DateField("Date")
                .Series(series => {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
        .Navigator(nav => nav
            .Series(series => {
                series.Line(s => s.Volume);
            })
        )
    )

Event Handling

You can subscribe to all StockChart events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

    @(Html.Kendo().StockChart(Model)
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DateField("Date")
        .Series(series => {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
        .Events(e => e
          .DataBound("stockChart_dataBound")
          .SeriesClick("stockChart_seriesClick")
        )
    )

    <script>
        function stockChart_dataBound(e) {
            //Handle the dataBound event.
        }

        function stockChart_seriesClick(e) {
            //Handle the seriesClick event.
        }
    </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

    @(Html.Kendo().StockChart(Model)
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DateField("Date")
        .Series(series => {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
        .Events(e => e
          .DataBound(@<text>
               function(e) {
                   //Handle the dataBound event inline.
               }
          </text>)
          .SeriesClick(@<text>
               function(e) {
                   //Handle the seriesClick event inline.
               }
          </text>)
        )
    )

Reference

Existing Instances

To reference an existing Kendo UI StockChart instance, use the jQuery.data() configuration option. Once a reference is established, use the StockChart API to control its behavior.

Example

  //Put this after your Kendo UI StockChart for ASP.NET Core declaration.
  <script>
      $(function() {
          // Notice that the Name() of the StockChart is used to get its client-side instance.
          var chart = $("#stockChart").data("kendoStockChart");
      });
  </script>