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

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.

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);
        }

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