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