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