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

@{
    var neckStyles = new[] { "Default", "Rectangle" };
}

<h1>
    Funnel Charts
</h1>

<p>
    Funnel charts show values along multiple stages in a process.
</p>
<p>
    For example, you could use a funnel chart to show the number of
    sales prospects at each stage in a sales pipeline. Typically,
    the values decrease gradually, making the bars resemble a
    funnel.
</p>
<p>
    To create funnel charts with the FlexChart control, set the
    <b>bindingX</b> property to the name of the property that
    contains the step along the pipeline, and add a single series
    with <b>binding</b> set to the amount of transactions at the
    given step.
</p>
<p>
    You can adjust the funnel's height, width, and style using
    the <b>options</b> property:
</p>

<div class="demo-settings">
    <label for="neckWidth">Neck Width: </label>
    @Html.C1().InputNumber().Id("neckWidth").Min(0).Max(1).Step(0.1).Format("p0").Value(0.2)
    <br />
    <label for="neckHeight">Neck Height: </label>
    @Html.C1().InputNumber().Id("neckHeight").Min(0).Max(1).Step(0.1).Format("p0").Value(0.4)
    <br />
    <label for="neckStyle">Neck Style: </label>
    @Html.C1().ComboBox().Id("neckStyle").Bind(neckStyles)
</div>

@(Html.C1().FlexChart<FlexChartData.StageCount>().Id("theChart")
    .Bind("Stage", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Funnel)
    .Options(o =>
    {
        o.Funnel(f => f.NeckWidth(0.2f).NeckHeight(0.4f).Type(C1.Web.Mvc.FunnelType.Default));
    })
    .Series(sb => sb.Add().Binding("Count").Name("Sales Pipeline"))
    .DataLabel(dl => dl.Content("{item.count}"))
)