FinancialChart - Line Break

Features

Line Break

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.

Movements are depicted with box colors and styles; movements that continue the trend of the previous box are colored similarly while movements that trend oppositely are indicated with a different color and/or style. The opposite trend is only drawn if its value exceeds the extreme value of the previous n number of boxes or lines, which is determined by the newLineBreaks option.

LineBreakController.cs
LineBreak.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 LineBreak()
        {
            var model = BoxData.GetDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateLineBreakSettings() };
            return View(model);
        }
 
        private static IDictionary<string, object[]> CreateLineBreakSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"LineBreak", new object[]{"1","2","3","4","5","6"}},
                {"Stroke", new object[]{"LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}},
                {"AltStroke", new object[]{"LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}},
                {"Fill", new object[]{"LightBlue","Transparent","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}},
                {"AltFill ", new object[]{"Transparent","LightBlue","Red", "Green", "Blue","Black","Purple","Yellow","Orange","Silver","Brown"}}
            };
 
            return settings;
        }
    }
}

@using FinancialChartExplorer.Models
 
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
 
 
<script type="text/javascript">
    function customChangeLineBreak(control, value) {
        control.options = { lineBreak: { newLineBreaks: +value } };
    }
 
    function customChangeStroke(control, value) {
        setColor(control, "style", "stroke", value);
    }
 
    function customChangeAltStroke(control, value) {
        setColor(control, "altStyle", "stroke", value);
    }
 
    function customChangeFill(control, value) {
        setColor(control, "style", "fill", value);
    }
 
    function customChangeAltFill(control, value) {
        setColor(control, "altStyle", "fill", value);
    }
 
    function setColor(control, styleName, attName, value) {
        control.series[0][styleName][attName] = value;
        control.invalidate();
    }
</script>
 
 
@(Html.C1().FinancialChart()
.Id(demoSettingsModel.ControlId)
.Bind(Model)
.BindingX("X")
.ChartType(C1.Web.Mvc.Finance.ChartType.LineBreak)
.Options(o => o.LineBreakNewLineBreaks(1))
.Series(sers =>
    {
        sers.Add().Name("BOX").Binding("High,Low,Open,Close").Style(s => s.Stroke("LightBlue").Fill("LightBlue")).AltStyle(s => s.Stroke("LightBlue").Fill("Transparent"));
    })
.Tooltip(t => t.Content("financialTooltip")))
 
@section Description{
    <p>@Html.Raw(Resources.Home.LineBreak_Text0)</p>
    <p>@Html.Raw(Resources.Home.LineBreak_Text1)</p>
}
@section Summary{
    <p>@Html.Raw(Resources.Home.LineBreak_Text2)</p>
}