Your search did not match any results.
Financial Charts

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
@(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.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult Stock() { return View(SampleData.FinancialData); } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<object> FinancialData = new List<object> { 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; }