@(Html.DevExtreme().Chart()
.ID("chart")
.Title("Stock Price")
.CommonSeriesSettings(s => s
.ArgumentField("Date")
.Type(SeriesType.Candlestick)
)
.Legend(l => l.ItemTextPosition(Position.Left))
.Series(s => s
.Add()
.Name("E-Mart")
.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.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult Candlestick() {
return View(SampleData.FinancialData);
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.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;
}