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
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);
        }
    }
}
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
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    var avgTypes = new List<string>
    {
        "Simple", "Weighted", "Exponential", "Triangular"
    };
}
  
<script type="text/javascript">
     var day = 'Day',
        settings = 'Settings';
  
    c1.documentReady(function () {
        day = '@Html.Raw(Home.MovingAverages_Day)';
        settings = '@Html.Raw(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, '@Home.MovingAverages_MovingAvgType');
    }
  
    function longPeriodChanged(number, args) {
        if (!checkValue(number)) {
            return;
        }
        updatePeriod(2, number.value);
    }
  
    function longTypeChanged(menu) {
        updateMenu(menu, 2, '@Home.MovingAverages_MovingAvgType');
    }
  
    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">@Html.Raw(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(Home.MovingAverages_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="@Html.Raw(Home.MovingAverages_Header1)" item-clicked="shortTypeChanged">
                                <c1-menu-item header="@Home.MovingAverages_TypeSimple" command-parameter="@avgTypes[0]"></c1-menu-item>
                                <c1-menu-item header="@Home.MovingAverages_TypeWeighted" command-parameter="@avgTypes[1]"></c1-menu-item>
                                <c1-menu-item header="@Home.MovingAverages_TypeExponential" command-parameter="@avgTypes[2]"></c1-menu-item>
                                <c1-menu-item header="@Home.MovingAverages_TypeTriangular" 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">@Html.Raw(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(Home.MovingAverages_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="@Html.Raw(Home.MovingAverages_Header2)" item-clicked="longTypeChanged">
                                <c1-menu-item header="@Home.MovingAverages_TypeSimple" command-parameter="@avgTypes[0]"></c1-menu-item>
                                <c1-menu-item header="@Home.MovingAverages_TypeWeighted" command-parameter="@avgTypes[1]"></c1-menu-item>
                                <c1-menu-item header="@Home.MovingAverages_TypeExponential" command-parameter="@avgTypes[2]"></c1-menu-item>
                                <c1-menu-item header="@Home.MovingAverages_TypeTriangular" command-parameter="@avgTypes[3]"></c1-menu-item>
                            </c1-menu>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
}
  
@section Description{
<p>@Html.Raw(Home.MovingAverages_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Home.MovingAverages_Text1)</p>
}