Features

Fibonacci Tool

Fibonacci Tool

Fibonacci tool is used for trend analysis in financial charts.

Features

Chart Types
Interaction
Analytics

Settings

Description

Fibonacci tool is used for trend analysis in financial charts. With the help of range selector, you can choose data range for calculation.

using System.Collections.Generic;
using FinancialChartExplorer.Models;
using Microsoft.AspNetCore.Mvc;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult FibonacciTool()
        {
            var model = BoxData.GetDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateFibonacciToolSettings() };
            return View(model);
        }

        private static IDictionary<string, object[]> CreateFibonacciToolSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"Type", new object[]{"Arcs", "Fans", "Retracements", "Time Zones"}},
                {"Uptrend", new object[]{"True","False"}},
                {"Label Position", new object[]{"Bottom", "Center", "Left", "None", "Right", "Top"}},
                {"Range Selector", new object[]{"False","True"}},
                {"Start.X", new object[]{"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
                    "11", "12", "13", "14", "15", "20", "25", "30", "35", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "55", "60"}},
                {"Start.Y", new object[]{"15.12", "15.75", "16.12", "16.75", "17.12", "17.75",
                    "18.12", "18.75", "19.12", "19.75", "20.12", "20.75", "21.12", "21.75", "22.12", "22.75", "23.12", "23.75", "24.12", "24.75", "25.12", "25.75"}},
                {"End.X", new object[]{"30", "31", "32", "33", "34", "35", "36", "37", "38", "39",
                    "40", "45", "50", "51", "52", "53", "54", "55", "56", "57", "58", "60"}},
                {"End.Y", new object[]{"15.10", "15.53", "16.10", "16.53", "17.10", "17.53",
                    "18.10", "18.53", "19.10", "19.53", "20.10", "20.53", "21.10", "21.53", "22.10", "22.53", "23.10", "23.53", "24.10", "24.53", "25.10", "25.53"}},
                {"StartX", new object[]{"-10", "-5", "-4", "-3", "-2", "-1", "0", "1", "2", "3", "4", "5", "10"}},
                {"EndX", new object[]{"-10", "-5", "-4", "-3", "-2", "-1", "0", "1", "2", "3", "4", "5", "10"}}
            };

            return settings;
        }

    }
}
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}


<script type="text/javascript">
    var seriesIndex;

    function hideOption(optionName) {
        var eleMenu = wijmo.getElement('#' + optionName.replace('.', '_').replace(/ /g, ''));
        if (eleMenu) {
            eleMenu.style.display = 'none';
        }
    }

    function showOption(optionName, value, allowedValues) {
        var id = optionName.replace('.', '_').replace(/ /g, ''),
            labelText = optionName.replace('.', ' '),
            eleMenu = wijmo.getElement('#' + id), menu;
        if (eleMenu) {
            eleMenu.style.display = '';
        }
        if (typeof (value) !== 'undefined') {
            menu = wijmo.Control.getControl('#' + id);
            if (menu) {
                menu.header = ' ' + labelText + ': ' + '<b>' + value + '</b>';
                if (allowedValues && allowedValues.length > 0) {
                    var items = [];
                    allowedValues.forEach(function (item) {
                        items.push({ Header: item, CommandParameter: item });
                    });
                    menu.itemsSource = items;
                }
            }
        }
    }

    function showSeries(chart, index) {
        for (var i = 1; i < chart.series.length; i++) {
            chart.series[i].visibility = (i == index) ? wijmo.chart.SeriesVisibility.Visible : wijmo.chart.SeriesVisibility.Hidden;
        }
    }

    function updateType(chart, value) {
        var series;
        switch (value) {
            case 'Arcs':
                seriesIndex = 2;
                series = chart.series[seriesIndex];
                showOption('Label Position', wijmo.chart.LabelPosition[series.labelPosition], ['Top', 'Center', 'Bottom', 'None']);
                showOption('Start.X', series.start.x);
                showOption('Start.Y', series.start.y);
                showOption('End.X', series.end.x);
                showOption('End.Y', series.end.y);
                hideOption('StartX');
                hideOption('EndX');
                hideOption('Range Selector');
                hideOption('Uptrend');
                showSeries(chart, seriesIndex);
                break;
            case 'Fans':
                seriesIndex = 3;
                series = chart.series[seriesIndex];
                showOption('Label Position', wijmo.chart.LabelPosition[series.labelPosition], ['Top', 'Center', 'Bottom', 'None']);
                showOption('Start.X', series.start.x);
                showOption('Start.Y', series.start.y);
                showOption('End.X', series.end.x);
                showOption('End.Y', series.end.y);
                hideOption('StartX');
                hideOption('EndX');
                hideOption('Range Selector');
                hideOption('Uptrend');
                showSeries(chart, seriesIndex);
                break;
            case 'Retracements':
                seriesIndex = 1;
                series = chart.series[seriesIndex];
                rs = c1.getExtender(chart, 'RangeSelector'),
                showOption('Label Position', wijmo.chart.LabelPosition[series.labelPosition], ['Left', 'Center', 'Right', 'None']);
                showOption('Uptrend', series.uptrend ? 'True' : 'False');
                showOption('Range Selector', rs.isVisible ? 'True' : 'False');
                hideOption('Start.X');
                hideOption('Start.Y');
                hideOption('End.X');
                hideOption('End.Y');
                hideOption('StartX');
                hideOption('EndX');
                showSeries(chart, seriesIndex);
                break;
            case 'Time Zones':
                seriesIndex = 4;
                series = chart.series[seriesIndex];
                showOption('Label Position', wijmo.chart.LabelPosition[series.labelPosition], ['Left', 'Center', 'Right', 'None']);
                showOption('StartX', series.startX);
                showOption('EndX', series.endX);
                hideOption('Start.X');
                hideOption('Start.Y');
                hideOption('End.X');
                hideOption('End.Y');
                hideOption('Range Selector');
                hideOption('Uptrend');
                showSeries(chart, seriesIndex);
                break;
        }
    }

    function rangeChanged(sender, args) {
        var chart = wijmo.Control.getControl('#' + '@(demoSettingsModel.ControlId)'),
            rs = c1.getExtender(chart, 'RangeSelector');
        if (!chart || !rs) {
            return;
        }

        chart.beginUpdate();
        chart.series[1].minX = rs.min;
        chart.series[1].maxX = rs.max;
        chart.endUpdate();
    }

    function customChangeUptrend(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.uptrend = (value === 'True');
        }
    }

    function customChangeLabelPosition(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.labelPosition = wijmo.chart.LabelPosition[value];
        }
    }

    function customChangeRangeSelector(control, value) {
        var rs = c1.getExtender(control, 'RangeSelector');
        if (rs) {
            rs.isVisible = (value === 'True');
        }
    }

    function customChangeStart_X(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.start = new wijmo.chart.DataPoint(parseFloat(value), series.start.y);
        }
    }

    function customChangeStart_Y(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.start = new wijmo.chart.DataPoint(series.start.x, parseFloat(value));
        }
    }

    function customChangeEnd_X(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.end = new wijmo.chart.DataPoint(parseFloat(value), series.end.y);
        }
    }

    function customChangeEnd_Y(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.end = new wijmo.chart.DataPoint(series.end.x, parseFloat(value));
        }
    }

    function customChangeStartX(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.startX = parseFloat(value);
        }
    }

    function customChangeEndX(control, value) {
        var series = control.series[seriesIndex];
        if (series) {
            series.endX = parseFloat(value);
        }
    }

    c1.documentReady(function () {
        var chart = wijmo.Control.getControl('#' + '@(demoSettingsModel.ControlId)');
        if (chart) {
            updateType(chart, 'Arcs');
        }
    });
</script>

<c1-financial-chart id="@demoSettingsModel.ControlId" 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-fibonacci binding="Close" uptrend="true" label-position="Left"></c1-flex-chart-fibonacci>
    <c1-flex-chart-fibonacci-arcs binding="Close" start="new DataPoint(46, 19.75)" end="new DataPoint(54, 17.10)" label-position="Top"></c1-flex-chart-fibonacci-arcs>
    <c1-flex-chart-fibonacci-fans binding="Close" start="new DataPoint(10, 18.12)" end="new DataPoint(32, 20.53)" label-position="Top"></c1-flex-chart-fibonacci-fans>
    <c1-flex-chart-fibonacci-time-zones binding="Close" start-x="0" end-x="3"></c1-flex-chart-fibonacci-time-zones>
    <c1-range-selector id="RangeSelector" seamless="true" is-visible="false" range-changed="rangeChanged"></c1-range-selector>
</c1-financial-chart>

@section Description{
<p>
    Fibonacci tool is used for trend analysis in financial charts. With the help of range selector, you can choose data range for calculation.
</p>
}
@section Summary{
    <p>
        Fibonacci tool is used for trend analysis in financial charts.
    </p>
}