using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FinancialChartExplorer.Models;
namespace FinancialChartExplorer.Controllers
{
public partial class HomeController : Controller
{
public ActionResult MovingAverages()
{
var model = BoxData.GetDataFromJson();
return View(model);
}
}
}
@using FinancialChartExplorer.Models
@model List<FinanceData>
@{
ViewBag.DemoSettings = true;
}
<script type="text/javascript">
function shortPeriodChanged(number, args) {
if (!checkValue(number)) {
return;
}
updatePeriod(1, number.value);
}
function updatePeriod(seriesIndex, value) {
var chart = wijmo.Control.getControl('#movingAvg'),
series, text,
titleEle = wijmo.getElement(seriesIndex == 1 ? '#shortTitle' : '#longTitle');
if (chart) {
series = chart.series[seriesIndex];
text = value.toString() + ' Day MA';
series.name = text;
series.period = value;
if (titleEle) {
titleEle.innerText = text + ' Settings';
}
}
}
function updateMenu(menu, seriesIndex, headerName) {
var chart = wijmo.Control.getControl('#movingAvg'),
series;
if (chart) {
menu.header = headerName + ': <b>' + menu.selectedItem.Header + '</b>';
series = chart.series[seriesIndex];
series.type = wijmo.chart.analytics.MovingAverageType[menu.selectedItem.CommandParameter];
}
}
function shortTypeChanged(menu) {
updateMenu(menu, 1, 'Moving Avg. Type');
}
function longPeriodChanged(number, args) {
if (!checkValue(number)) {
return;
}
updatePeriod(2, number.value);
}
function longTypeChanged(menu) {
updateMenu(menu, 2, 'Moving Avg. Type');
}
function checkValue(number) {
return number.value >= number.min && number.value <= number.max;
}
</script>
@(Html.C1().FinancialChart()
.Id("movingAvg")
.Bind(Model)
.BindingX("X")
.ChartType(C1.Web.Mvc.Finance.ChartType.Line)
.Series(sers =>
{
sers.Add().Binding("Close").Name("BOX");
sers.AddMovingAverage().Binding("Close").Period(5).Type(C1.Web.Mvc.Chart.MovingAverageType.Simple).Name("5 Day MA");
sers.AddMovingAverage().Binding("Close").Period(20).Type(C1.Web.Mvc.Chart.MovingAverageType.Simple).Name("20 Day MA");
})
.Tooltip(t => t.Content("tooltip")))
@section Settings{
<!-- "Short" MA Settings -->
<div class="panel-group" id="settingsShort">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="shortTitle">5 Day MA Settings</a>
</h4>
</div>
<div id="settingsBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-inline">
<li>
<label>Period</label>
@(Html.C1().InputNumber().Value(5).Min(2).Step(1).Format("n0").Max(Model.Count - 1).OnClientValueChanged("shortPeriodChanged"))
</li>
<li>
@(Html.C1().Menu().Header("Moving Avg. Type: <b>Simple</b>").MenuItems(mifb =>
{
mifb.Add().Header("Simple").CommandParameter("Simple");
mifb.Add().Header("Weighted").CommandParameter("Weighted");
mifb.Add().Header("Exponential").CommandParameter("Exponential");
mifb.Add().Header("Triangular").CommandParameter("Triangular");
}).OnClientItemClicked("shortTypeChanged"))
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- "Long" MA Settings -->
<div class="panel-group" id="settingsLong">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="longTitle">20 Day MA Settings</a>
</h4>
</div>
<div id="settingsBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-inline">
<li>
<label>Period</label>
@(Html.C1().InputNumber().Min(2).Value(20).Step(1).Format("n0").Max(Model.Count - 1).OnClientValueChanged("longPeriodChanged"))
</li>
<li>
@(Html.C1().Menu().Header("Moving Avg. Type: <b>Simple</b>").MenuItems(mifb =>
{
mifb.Add().Header("Simple").CommandParameter("Simple");
mifb.Add().Header("Weighted").CommandParameter("Weighted");
mifb.Add().Header("Exponential").CommandParameter("Exponential");
mifb.Add().Header("Triangular").CommandParameter("Triangular");
}).OnClientItemClicked("longTypeChanged"))
</li>
</ul>
</div>
</div>
</div>
</div>
}
@section Description{
<p>
Moving average trend lines are used to analyze data by creating a series of averages of the original data set.
</p>
}
@section Summary{
<p>
Moving average trend lines are used to analyze data by creating a series of averages of the original data set.
</p>
}