FinancialChart - Renko - C1 ASP.NET MVC

Features

Renko

A Line Break or Three Line Break chart uses vertical boxes or lines to illustrate the price changes of an asset or market.

Features

Chart Types

Interaction

Analytics

Sample
Source
Documentation

Settings

Description

A Line Break or Three Line Break chart uses vertical boxes or lines to illustrate the price changes of an asset or market.

The Renko chart uses bricks of uniform size to chart the price movement. When a price moves to a greater or lesser value than the preset boxSize option required to draw a new brick, a new brick is drawn in the succeeding column. The change in box color and direction signifies a trend reversal.

RenkoController.cs
Renko.cshtml

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FinancialChartExplorer.Models;
 
namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult Renko()
        {
            var model = BoxData.GetDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateRenkoSettings() };
            return View(model);
        }
 
        private static IDictionary<string, object[]> CreateRenkoSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"Options.Renko.BoxSize", new object[]{"2","3","4","5","6","7","8","9","10","20"}},
                {"Options.Renko.RangeMode", new object[]{"ATR","Fixed"}},
                {"Options.Renko.Fields", new object[]{"High","Low","Open","Close","HL2","HLC3","HLOC4"}},
            };
 
            return settings;
        }
    }
}

@using FinancialChartExplorer.Models
 
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
 
 
<script type="text/javascript">
    function convertOptions_Renko_BoxSize(value) {
        return +value;
    }
 
    function convertOptions_Renko_RangeMode(value) {
        return wijmo.chart.finance.RangeMode[value];
    }
 
    function convertOptions_Renko_Fields(value) {
        return wijmo.chart.finance.DataFields[value];
    }
</script>
 
 
@(Html.C1().FinancialChart()
.Id(demoSettingsModel.ControlId)
.Bind(Model)
.BindingX("X")
.ChartType(C1.Web.Mvc.Finance.ChartType.Renko)
.Options(o => { o.RenkoBoxSize(2); o.RenkoFields(C1.Web.Mvc.Finance.DataFields.High); o.RenkoRangeMode(C1.Web.Mvc.Finance.RangeMode.ATR); })
.Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close").Name("BOX");
    })
.Tooltip(t => t.Content("financialTooltip")))
 
 
@section Description{
    <p>
        A Line Break or Three Line Break chart uses vertical boxes or lines to illustrate the price changes of an asset or market.
    </p>
    <p>
        The Renko chart uses bricks of uniform size to chart the price movement.
        When a price moves to a greater or lesser value than the preset boxSize option required to draw a new brick, a new brick is drawn in the succeeding column. The change in box color and direction signifies a trend reversal.
    </p>
}
@section Summary{
    <p>
        A Line Break or Three Line Break chart uses vertical boxes or lines to illustrate the price changes of an asset or market.
    </p>
}