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

@{ 
    var chartTypes = new[] { "Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea" };
    var stackings = new[] { "None", "Stacked", "Stacked100pc" };
}

<h1>
    FlexChart Chart Types
</h1>

<p>
    The FlexChart has three properties that determine the
    chart type:
</p>
<ol>
    <li>
        <b>chartType</b>:
        Determines the default chart type to be used for all series objects.
        Individual series can override this default.
    </li>
    <li>
        <b>stacking</b>:
        Determines whether series objects are plotted independently, stacked,
        or stacked so their sum is 100%.
    </li>
    <li>
        <b>rotated</b>:
        Determines whether axes should be flipped so the X axis becomes
        vertical and the Y axis horizontal.
    </li>
</ol>
<p>
    This example shows the effect of these properties:
</p>

<div class="demo-settings">
    <label for="chartType">Chart Type: </label>
    @Html.C1().ComboBox().Id("chartType").Bind(chartTypes)
    <br>
    <label for="stacking">Stacking: </label>
    @Html.C1().ComboBox().Id("stacking").Bind(stackings)
    <br>
    <label for="rotated">Rotated: </label>
    <input id="rotated" type="checkbox"><br>
</div>

@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)