@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Stock>

<h1>
    HighLowOpenClose Charts
</h1>

<p>
    HighLowOpenClose charts are used to describe price movements of a
    security, derivative, or currency over time. They are similar
    to candlestick charts, except opening values are displayed using
    lines to the left, and closing values are displayed using lines
    lines to the right.
</p>
<p>
    To create HighLowOpenClose charts with the FlexChart control,
    set the <b>bindingX</b> property to the name of the property
    that contains the dates, and add a single series with
    <b>binding</b> set to a comma-delimited string containing
    the names of the properties that represent the High, Low,
    Open, and Close values.
</p>
<p>
    The size of the vertical line is determined by the High and
    Low values; short line segments to the left and right
    represent the Open and Close values:
</p>

@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.HighLowOpenClose)
    .Series(sb => sb.Add().Binding("High,Low,Open,Close").Name("Alphabet Inc"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
)