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

<h1>
    Interactive Charts
</h1>

<p>
    The FlexChart uses the CollectionView class as its
    data source, so it is inherently interactive. Any
    changes made to the data will be automatically reflected
    on the chart.
</p>
<p>
    For example, the chart and the grid below are bound
    to the same CollectionViewService, so if you edit the
    data on the grid, or sort the grid's columns,
    the chart will show the changes automatically:
</p>

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

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

<p>
    In addition to this automatic type of interaction,
    you can use events to add custom interactions to
    the chart, including zooming, selection, grouping,
    drill-downs, and animations.
</p>