Your search did not match any results.

Stock

Documentation

Stock series help display variations in stock prices over the course of a day. High and low prices are represented by the bottom and top values of the vertical line and open and close prices are represented by left and right tick marks.

bigcharts.marketwatch.com
Backend API
@(Html.DevExtreme().Chart() .ID("chart") .Title("Stock Price") .CommonSeriesSettings(s => s .ArgumentField("Date") .Type(SeriesType.Stock) ) .Series(s => s .Add() .Name("DELL") .OpenValueField("O") .HighValueField("H") .LowValueField("L") .CloseValueField("C") .Reduction(r => r.Color("red")) ) .ValueAxis(a => a .Add() .TickInterval(1) .Title(t => t.Text("US dollars")) .Label(l => l.Format(f => f .Type(Format.Currency) .Precision(0) )) ) .ArgumentAxis(a => a .WorkdaysOnly(true) .Label(l => l.Format(Format.ShortDate)) ) .Export(e => e.Enabled(true)) .Tooltip(t => t .Enabled(true) .Location(ChartTooltipLocation.Edge) .CustomizeTooltip(@<text> function (arg) { return { text: "Open: $" + arg.openValue + "<br />" + "Close: $" + arg.closeValue + "<br />" + "High: $" + arg.highValue + "<br />" + "Low: $" + arg.lowValue + "<br />" }; } </text>) ) .DataSource(Model) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult Stock() { return View(SampleData.FinancialData); } } }
using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<object> FinancialData = new[] { new { Date = new DateTime(1994, 3, 1), L = 24.00, H = 25.00, O = 25.00, C = 24.875 }, new { Date = new DateTime(1994, 3, 2), L = 23.625, H = 25.125, O = 24.00, C = 24.875 }, new { Date = new DateTime(1994, 3, 3), L = 26.25, H = 28.25, O = 26.75, C = 27.00 }, new { Date = new DateTime(1994, 3, 4), L = 26.50, H = 27.875, O = 26.875, C = 27.25 }, new { Date = new DateTime(1994, 3, 7), L = 26.375, H = 27.50, O = 27.375, C = 26.75 }, new { Date = new DateTime(1994, 3, 8), L = 25.75, H = 26.875, O = 26.75, C = 26.00 }, new { Date = new DateTime(1994, 3, 9), L = 25.75, H = 26.75, O = 26.125, C = 26.25 }, new { Date = new DateTime(1994, 3, 10), L = 25.75, H = 26.375, O = 26.375, C = 25.875 }, new { Date = new DateTime(1994, 3, 11), L = 24.875, H = 26.125, O = 26.00, C = 25.375 }, new { Date = new DateTime(1994, 3, 14), L = 25.125, H = 26.00, O = 25.625, C = 25.75 }, new { Date = new DateTime(1994, 3, 15), L = 25.875, H = 26.625, O = 26.125, C = 26.375 }, new { Date = new DateTime(1994, 3, 16), L = 26.25, H = 27.375, O = 26.25, C = 27.25 }, new { Date = new DateTime(1994, 3, 17), L = 26.875, H = 27.25, O = 27.125, C = 26.875 }, new { Date = new DateTime(1994, 3, 18), L = 26.375, H = 27.125, O = 27.00, C = 27.125 }, new { Date = new DateTime(1994, 3, 21), L = 26.75, H = 27.875, O = 26.875, C = 27.75 }, new { Date = new DateTime(1994, 3, 22), L = 26.75, H = 28.375, O = 27.50, C = 27.00 }, new { Date = new DateTime(1994, 3, 23), L = 26.875, H = 28.125, O = 27.00, C = 28.00 }, new { Date = new DateTime(1994, 3, 24), L = 26.25, H = 27.875, O = 27.75, C = 27.625 }, new { Date = new DateTime(1994, 3, 25), L = 27.50, H = 28.75, O = 27.75, C = 28.00 }, new { Date = new DateTime(1994, 3, 28), L = 25.75, H = 28.25, O = 28.00, C = 27.25 }, new { Date = new DateTime(1994, 3, 29), L = 26.375, H = 27.50, O = 27.50, C = 26.875 }, new { Date = new DateTime(1994, 3, 30), L = 25.75, H = 27.50, O = 26.375, C = 26.25 }, new { Date = new DateTime(1994, 3, 31), L = 24.75, H = 27.00, O = 26.50, C = 25.25 } }; } }
#chart { height: 440px; }