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
Heikin-Ashi
Line Break
Renko
Kagi
ColumnVolume
EquiVolume
CandleVolume
Arms CandleVolume
Point and Figure
Interaction
Markers
Range Selector
Analytics
Trend Lines
Moving Averages
Overlays
Indicators
Event Annotations
Fibonacci Tool
BOX5 Day MA20 Day MA01/23/1501/27/1501/29/1502/02/1502/04/1502/06/1502/10/1502/12/1502/17/1502/19/1502/23/1502/25/1502/27/1503/03/1503/05/1503/09/1503/11/1503/13/1503/17/1503/19/1503/23/1503/25/1503/27/1503/31/1504/02/1504/07/1504/09/1504/13/1504/15/1504/17/1504/21/1504/23/1504/27/1504/29/1505/01/1505/05/1505/07/1505/11/1505/13/1505/15/1505/19/1505/21/1505/26/1505/28/1520

Settings

5 Day MA Settings

20 Day MA Settings

Description

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
        }
    }
}
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
@using FinancialChartExplorer.Models
 
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
}
 
<script type="text/javascript">
    var day = 'Day',
        settings = 'Settings';
     
    c1.documentReady(function () {
        day = '@Resources.Home.MovingAverages_Day';
        settings = '@Resources.Home.MovingAverages_Settings';
    });
 
    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, '@Html.Raw(Resources.Home.MovingAverages_MovingAvgType)');
    }
 
    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">@Html.Raw(Resources.Home.MovingAverages_5DayMASettings)</a>
            </h4>
        </div>
        <div id="settingsBody" class="panel-collapse collapse in">
            <div class="panel-body">
                <ul class="list-inline">
                    <li>
                        <label>@Html.Raw(Resources.Home.MovingAverages_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(Resources.Home.MovingAverages_Header1).MenuItems(mifb =>
                            {
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeSimple).CommandParameter("Simple");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeWeighted).CommandParameter("Weighted");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeExponential).CommandParameter("Exponential");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeTriangular).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">@Html.Raw(Resources.Home.MovingAverages_20DayMASettings)</a>
            </h4>
        </div>
        <div id="settingsBody" class="panel-collapse collapse in">
            <div class="panel-body">
                <ul class="list-inline">
                    <li>
                        <label>@Html.Raw(Resources.Home.MovingAverages_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(Resources.Home.MovingAverages_Header2).MenuItems(mifb =>
                            {
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeSimple).CommandParameter("Simple");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeWeighted).CommandParameter("Weighted");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeExponential).CommandParameter("Exponential");
                                mifb.Add().Header(Resources.Home.MovingAverages_TypeTriangular).CommandParameter("Triangular");
                            }).OnClientItemClicked("longTypeChanged"))
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
}
 
 
@section Description{
    <p>@Html.Raw(Resources.Home.MovingAverages_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Resources.Home.MovingAverages_Text1)</p>
}