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

<h1>
    FlexChart
</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>
    Bind the chart by setting its <b>itemsSource</b> property to an
    array containing regular JavaScript objects,
    and populate the chart's <b>series</b> collection with objects that define which
    properties of the data items should be charted and how:
</p>

@(Html.C1().CollectionViewService<FlexChartData.Sale>().Id("theCollectionView").Bind(Model)
)

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

<p>
    This is the data being charted. Because the grid and the chart
    are bound to the same <b>CollectionView</b>, the chart will be
    updated if you edit or sort the data:
</p>
@(Html.C1().FlexGrid<FlexChartData.Sale>().Id("theGrid").ItemsSourceId("theCollectionView")
)