ASP.NET MVC StockChart Overview
The Telerik UI StockChart HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI StockChart component.
The StockChart is a specialized control visualizing the price movement of any financial instrument over a certain period of time. StockCharts include extensive touch support and a navigator pane for easy browsing of extended time periods. Generally, StockCharts extend the Telerik UI Chart and share most of its features.
Telerik UI for ASP.NET MVC is a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
New to Telerik UI for ASP.NET MVC?
To see the component in action, check the examples:
All of the following series types that are supported by the StockChart are also accessible from a Telerik UI Chart:
- Candlestick
- Open-high-low-close (OHLC)
- Column
- Line
- Area
Basic Configuration
The UI for ASP.NET StockChart makes Ajax requests when it is bound to a data source and has to be configured for Ajax binding.
-
Add the new action method.
The following example demonstrates how to add a new action method which returns data to populate the StockChart.
@(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.
The following example demonstrates how to create the main and the navigator data series.
@(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); }) ) )
Functionality and Features
- Data Binding—You can bind the StockChart to local or remote data.
- Navigator— The StockChart allows you to represent a pane that is placed at the bottom of the chart that can change the date interval in the main panes.