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 FinancialChartExplorer.Models;
using Microsoft.AspNetCore.Mvc;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult MovingAverages()
        {
            var model = BoxData.GetDataFromJson();
            return View(model);
        }
    }
}
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    var avgTypes = new List<string>
    {
        "Simple", "Weighted", "Exponential", "Triangular"
    };
}

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

<c1-financial-chart id="movingAvg" binding-x="X" chart-type="Line">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-financial-chart-series binding="Close" name="BOX"></c1-financial-chart-series>
    <c1-flex-chart-movingaverage binding="Close" period="5" type="Simple" name="5 Day MA"></c1-flex-chart-movingaverage>
    <c1-flex-chart-movingaverage binding="Close" period="20" type="Simple" name="20 Day MA"></c1-flex-chart-movingaverage>
    <c1-flex-chart-tooltip content="tooltip"></c1-flex-chart-tooltip>
</c1-financial-chart>

@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" data-toggle="collapse" data-parent="#settings" href="#settingsBody" target="_self">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>
                            <c1-input-number value="5" min="2" step="1" format="n0" max="@(Model.Count-1)" value-changed="shortPeriodChanged"></c1-input-number>
                        </li>
                        <li>
                            <c1-menu header="Moving Avg. Type: <b>Simple</b>" item-clicked="shortTypeChanged">
                                <c1-menu-item header="@avgTypes[0]" command-parameter="@avgTypes[0]"></c1-menu-item>
                                <c1-menu-item header="@avgTypes[1]" command-parameter="@avgTypes[1]"></c1-menu-item>
                                <c1-menu-item header="@avgTypes[2]" command-parameter="@avgTypes[2]"></c1-menu-item>
                                <c1-menu-item header="@avgTypes[3]" command-parameter="@avgTypes[3]"></c1-menu-item>
                            </c1-menu>
                        </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" data-toggle="collapse" data-parent="#settings" href="#settingsBody" target="_self">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>
                            <c1-input-number value="20" min="2" step="1" format="n0" max="@(Model.Count-1)" value-changed="longPeriodChanged"></c1-input-number>
                        </li>
                        <li>
                            <c1-menu header="Moving Avg. Type: <b>Simple</b>" item-clicked="longTypeChanged">
                                <c1-menu-item header="@avgTypes[0]" command-parameter="@avgTypes[0]"></c1-menu-item>
                                <c1-menu-item header="@avgTypes[1]" command-parameter="@avgTypes[1]"></c1-menu-item>
                                <c1-menu-item header="@avgTypes[2]" command-parameter="@avgTypes[2]"></c1-menu-item>
                                <c1-menu-item header="@avgTypes[3]" command-parameter="@avgTypes[3]"></c1-menu-item>
                            </c1-menu>
                        </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>
}