FlexChart
FlexChart
Financial Chart
Financial chart
This view shows how to create financial charts with the FlexChart.
Features
Settings
Chart Type: Candlestick
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | @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 > } |