Features

Overlays

Overlays

Overlays, like technical indicators, are a set of derived data that is calculated by applying one or more formulas to the original set of data.

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
BOXBollinger Bands01/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

Description

Overlays, like technical indicators, are a set of derived data that is calculated by applying one or more formulas to the original set of data. Overlays are generally used to forecast an asset's market direction and generally plotted with the original data set since the the Y-axis scales are the same.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
using FinancialChartExplorer.Models;
using Microsoft.AspNetCore.Mvc;
  
namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult Overlays()
        {
            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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    var overlays = new List<AnalysisType> {
        new AnalysisType{Name = "Bollinger Bands", Abbreviation = "bollinger"},
        new AnalysisType{Name = "Envelopes", Abbreviation = "envelopes" }
    };
    var envelopeTypes = new List<string> { "Simple", "Exponential" };
}
  
<script type="text/javascript">
    var overlayOpts = [@Html.Raw(string.Join(",", overlays.Select(ovl => "'" + ovl.Abbreviation + "'")))];
  
    function showOption(overlay) {
        for (var i = 0; i < overlayOpts.length; i++) {
            toggleGroup(overlayOpts[i], overlayOpts[i] == overlay);
        }
    }
  
    function toggleGroup(overlay, shown) {
        var optGroup = wijmo.getElement('#' + overlay);
        if (optGroup) {
            if (shown) {
                optGroup.style.display = '';
            } else {
                optGroup.style.display = 'none';
            }
        }
    }
  
    function showSeries(index) {
        var chart = wijmo.Control.getControl('#overlays');
  
        if (index == null || !chart) {
            return;
        }
  
        for (var i = 1; i < chart.series.length; i++) {
            chart.series[i].visibility = (index == i) ? wijmo.chart.SeriesVisibility.Visible : wijmo.chart.SeriesVisibility.Hidden;
        }
    }
  
    function updateOverlayType(combo) {
        showSeries(combo.selectedIndex + 1);
        showOption(combo.selectedValue);
    }
  
    function updateBBPeriod(number) {
        var chart = wijmo.Control.getControl('#overlays');
        if (!checkValue(number)) {
            return;
        }
        if (chart) {
            chart.series[1].period = number.value;
        }
    }
  
    function updateBBMultiplier(number) {
        var chart = wijmo.Control.getControl('#overlays');
        if (!checkValue(number)) {
            return;
        }
        if (chart) {
            chart.series[1].multiplier = number.value;
        }
    }
  
    function updateEnvelopePeriod(number) {
        var chart = wijmo.Control.getControl('#overlays');
        if (!checkValue(number)) {
            return;
        }
        if (chart) {
            chart.series[2].period = number.value;
        }
    }
  
    function updateEnvelopeSize(number) {
        var chart = wijmo.Control.getControl('#overlays');
        if (!checkValue(number)) {
            return;
        }
        if (chart) {
            chart.series[2].size = number.value;
        }
    }
  
    function envelopeTypeChanged(menu) {
        var chart = wijmo.Control.getControl('#overlays');
  
        menu.header = 'Type: <b>' + menu.selectedItem.Header + '</b>';
        if (chart) {
            chart.series[2].type = wijmo.chart.finance.analytics.MovingAverageType[menu.selectedItem.CommandParameter];
        }
    }
  
    function checkValue(number) {
        return number.value >= number.min && number.value <= number.max;
    }
  
    c1.documentReady(function () {
        var combo = wijmo.Control.getControl('#overlayComboBox');
        if (combo) {
            combo.selectedIndex = 0;
            updateOverlayType(combo);
        }
    });
</script>
  
  
<c1-financial-chart id="overlays" symbol-size="6" binding-x="X" chart-type="Candlestick">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-financial-chart-series binding="High,Low,Open,Close" name="BOX"></c1-financial-chart-series>
    <c1-flex-chart-bollinger-bands binding="Close" period="20" multiplier="2" name="Bollinger Bands"></c1-flex-chart-bollinger-bands>
    <c1-flex-chart-envelopes binding="Close" period="20" size="0.03" type="Simple" name="Envelopes"></c1-flex-chart-envelopes>
    <c1-flex-chart-tooltip content="tooltip"></c1-flex-chart-tooltip>
</c1-financial-chart>
  
@section Settings{
    <div class="panel-body">
        <!-- Overlay Selector -->
        <ul class="list-inline">
            <li>
                <label>@Html.Raw(Home.Overlays_Overlay)</label>
                <c1-combo-box id="overlayComboBox" selected-value-path="Abbreviation" display-member-path="Name" selected-index-changed="updateOverlayType" is-editable="false">
                    <c1-items-source source-collection="overlays"></c1-items-source>
                </c1-combo-box>
            </li>
        </ul>
  
        <!-- Bollinger Bands Properties -->
        <ul class="list-inline" id="bollinger">
            <li>
                <label>@Html.Raw(Home.Overlays_Period)</label>
                <c1-input-number value="20" min="2" step="1" max="@(Model.Count - 1)" format="n0" value-changed="updateBBPeriod"></c1-input-number>
            </li>
            <li>
                <label>@Html.Raw(Home.Overlays_Multiplier)</label>
                <c1-input-number value="2" min="1" step="1" max="100" format="n0" value-changed="updateBBMultiplier"></c1-input-number>
            </li>
        </ul>
  
        <!-- Envelope Properties -->
        <ul class="list-inline" id="envelopes">
            <li>
                <label>@Html.Raw(Home.Overlays_Period)</label>
                <c1-input-number value="20" min="2" step="1" max="@(Model.Count - 1)" format="n0" value-changed="updateEnvelopePeriod"></c1-input-number>
            </li>
            <li>
                <label>@Html.Raw(Home.Overlays_Size)</label>
                <c1-input-number value="0.03" min="0" step="0.01" max="1" format="p0" value-changed="updateEnvelopeSize"></c1-input-number>
            </li>
            <li>
                <c1-menu header="Type: <b>Simple</b>" item-clicked="envelopeTypeChanged">
                    <c1-menu-item header="@envelopeTypes[0]" command-parameter="@envelopeTypes[0]"></c1-menu-item>
                    <c1-menu-item header="@envelopeTypes[1]" command-parameter="@envelopeTypes[1]"></c1-menu-item>
                </c1-menu>
            </li>
        </ul>
    </div>
}
  
@section Description{
<p>@Html.Raw(Home.Overlays_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Home.Overlays_Text1)</p>
}