FlexChart
FlexChart
Financial Chart
Features
Sample
Settings
Description
Financial chart
This view shows how to create financial charts with the FlexChart.
The FlexChart supports two types of financial chart: Candlestick and HiLowOpenClose. To use them, set the ChartType property to the type you want, and set the series Binding property to a string that specifies the fields that contain the High, Low, Open, and Close values in the data source.
Source
FinancialChartController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult FinancialChart() { List<FinanceData> financeDatas = new List<FinanceData>() { }; DateTime startTime = new DateTime(2013, 1, 1); var rand = new Random(); double high, low, open, close; for (int i = 0; i < 90; i++) { DateTime dt = startTime.AddDays(i); if (i > 0) open = financeDatas[i - 1].Close; else open = 1000; high = open + rand.NextDouble() * 50; low = open - rand.NextDouble() * 50; close = low + rand.NextDouble() * (high - low); financeDatas.Add(new FinanceData { X = dt, High = high, Low = low, Open = open, Close = close }); } var settings = new ClientSettingsModel { Settings = CreateFinacialChartSettings() }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(financeDatas); } private static IDictionary<string, object[]> CreateFinacialChartSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Candlestick", "HighLowOpenClose"}}, }; return settings; } } }
FinancialChart.cshtml
@model List<FinanceData> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @section Scripts{ <script type="text/javascript"> var tooltipContent = function (ht) { var item = ht.series.collectionView.items[ht.pointIndex]; return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '<br/>' + 'High: ' + item.High.toFixed() + '<br/>' + 'Low: ' + item.Low.toFixed() + '<br/>' + 'Open: ' + item.Open.toFixed() + '<br/>' + 'Close: ' + item.Close.toFixed(); }; </script> } @(Html.C1().FlexChart().Id(demoSettingsModel.ControlId) .ChartType(demoSettingsModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Candlestick)) .Bind("X", Model).Series(sers => { sers.Add().Binding("High,Low,Open,Close"); }) .SymbolSize(4).AxisX(x => x.Format("MMM-dd")) .Tooltip(tt => tt.Content("tooltipContent"))) @section Description{ <h3> @Html.Raw(Resources.FlexChart.FinancialChart_FinancialChart) </h3> <p>@Html.Raw(Resources.FlexChart.FinancialChart_Text0)</p> <p>@Html.Raw(Resources.FlexChart.FinancialChart_Text1)</p> }
Documentation