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 System.Collections.Generic;
using System.Web.Mvc;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        //
        // GET: /Overlays/
        public ActionResult Overlays()
        {
            var model = BoxData.GetDataFromJson();
            return View(model);
        }
    }
}
@using FinancialChartExplorer.Models

@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    var overlays = new List<AnalysisType> { 
        new AnalysisType{Name = "Bollinger Bands", Abbreviation = "bollinger"},
        new AnalysisType{Name = "Envelopes", Abbreviation = "envelopes" }
    };
}

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


@(Html.C1().FinancialChart()
.Id("overlays")
.Bind(Model)
.BindingX("X")
.SymbolSize(6)
.ChartType(C1.Web.Mvc.Finance.ChartType.Candlestick)
.Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close").Name("BOX");
        sers.AddBollingerBands().Binding("Close").Period(20).Multiplier(2).Name("Bollinger Bands");
        sers.AddEnvelopes().Binding("Close").Period(20).Size(0.03).Type(C1.Web.Mvc.Finance.MovingAverageType.Simple).Name("Envelopes").Visibility(C1.Web.Mvc.Chart.SeriesVisibility.Hidden);
    })
.Tooltip(t => t.Content("tooltip")))

@section Settings{
<div class="panel-body">
    <!-- Overlay Selector -->
    <ul class="list-inline">
        <li>
            <label>Overlay</label>
            @(Html.C1().ComboBox().Id("overlayComboBox").Bind(overlays).SelectedValuePath("Abbreviation").DisplayMemberPath("Name").OnClientSelectedIndexChanged("updateOverlayType").IsEditable(false))
        </li>
    </ul>

    <!-- Bollinger Bands Properties -->
    <ul class="list-inline" id="bollinger">
        <li>
            <label>Period</label>
            @(Html.C1().InputNumber().Value(20).Min(2).Step(1).Max((Model.Count - 1)).Format("n0").OnClientValueChanged("updateBBPeriod"))
        </li>
        <li>
            <label>Multiplier</label>
            @(Html.C1().InputNumber().Value(2).Min(1).Step(1).Max(100).Format("n0").OnClientValueChanged("updateBBMultiplier"))
        </li>
    </ul>

    <!-- Envelope Properties -->
    <ul class="list-inline" id="envelopes">
        <li>
            <label>Period</label>
            @(Html.C1().InputNumber().Value(20).Min(2).Step(1).Max((Model.Count - 1)).Format("n0").OnClientValueChanged("updateEnvelopePeriod"))
        </li>
        <li>
            <label>Size</label>
            @(Html.C1().InputNumber().Value(0.03).Min(0).Step(0.01).Max(1).Format("p0").OnClientValueChanged("updateEnvelopeSize"))
        </li>
        <li>
            @(Html.C1().Menu().Header("Type: <b>Simple</b>")
            .MenuItems(mifb =>
            {
                mifb.Add().Header("Simple").CommandParameter("Simple");
                mifb.Add().Header("Exponential").CommandParameter("Exponential");
            })
            .OnClientItemClicked("envelopeTypeChanged"))
        </li>
    </ul>
</div>
}

@section Description{
    <p>
        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.
    </p>
}
@section Summary{
    <p>
        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. 
    </p>
}