機能

オーバーレイ

オーバーレイ

テクニカルインジケータと同様にオーバーレイも、元のデータセットに 1 つ以上の数式を適用して計算することにより派生したデータのセットです。

機能

チャートタイプ
ユーザー操作機能
分析機能

設定

説明

テクニカルインジケータと同様にオーバーレイも、元のデータセットに 1 つ以上の数式を適用して計算することにより派生したデータのセットです。オーバーレイは、一般に資産の市場の方向を予測するために使用され、通常は元のデータセットと Y 軸のスケールが同じであるため、一緒にプロットされます。

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 = '@Html.Raw(Resources.Home.Overlays_TypeLabel) <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>@Html.Raw(Resources.Home.Overlays_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>@Html.Raw(Resources.Home.Overlays_Period)</label>
            @(Html.C1().InputNumber().Value(20).Min(2).Step(1).Max((Model.Count - 1)).Format("n0").OnClientValueChanged("updateBBPeriod"))
        </li>
        <li>
            <label>@Html.Raw(Resources.Home.Overlays_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>@Html.Raw(Resources.Home.Overlays_Period)</label>
            @(Html.C1().InputNumber().Value(20).Min(2).Step(1).Max((Model.Count - 1)).Format("n0").OnClientValueChanged("updateEnvelopePeriod"))
        </li>
        <li>
            <label>@Html.Raw(Resources.Home.Overlays_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(Resources.Home.Overlays_TypeBSimpleHeader)
            .MenuItems(mifb =>
            {
                mifb.Add().Header(Resources.Home.Overlays_TypeSimple).CommandParameter("Simple");
                mifb.Add().Header(Resources.Home.Overlays_TypeExponential).CommandParameter("Exponential");
            })
            .OnClientItemClicked("envelopeTypeChanged"))
        </li>
    </ul>
</div>
}

@section Description{
    <p>@Html.Raw(Resources.Home.Overlays_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Resources.Home.Overlays_Text1)</p>
}