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

<h1>
    FlexChart Architecture
</h1>

<p>
    The FlexChart allows you to visualize tabular data as business
    charts. It provides a variety of options about how to present
    and interact with the data, including selection, zooming,
    drill-down, formatting, etc.
</p>
<p>
    Like all C1 MVC controls, the chart delegates all data-related
    tasks to the CollectionView class, so if you want to filter,
    sort, or group the data, you can do it using the CollectionView.
    It may be useful to think of the FlexChart as a special type
    of data grid, where columns are represented by series and
    rows are data points on the chart.
</p>
<p>
    For example, the chart below has buttons that allow users to
    sort the data by changing the <b>sortDescriptions</b> property
    of the chart's <b>collectionView</b>:
</p>

<p>
    Sort by:
    <button id="btnNone" class="btn btn-default">None</button>
    <button id="btnCountry" class="btn btn-default">Country</button>
    <button id="btnSales" class="btn btn-default">Sales</button>
    <button id="btnExpenses" class="btn btn-default">Expenses</button>
    <button id="btnDownloads" class="btn btn-default">Downloads</button>
</p>
@(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");
    })
)