Features

Moving Averages

Moving Averages

Moving average trend lines are used to analyze data by creating a series of averages of the original data set.

Features

Chart Types
Interaction
Analytics

Settings

Description

Moving average trend lines are used to analyze data by creating a series of averages of the original data set.

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>
}