<h1>
    Grouping and Drill-Down
</h1>

<p>
    This example shows how you can leverage the grouping
    features in the <b>CollectionView</b> class to create
    drill-down charts.
</p>
<p>
    Click on the bars to drill-down into any group. The
    chart will be updated to show the new data, and the
    chart's header will show breadcrumbs so you can
    navigate back up the group hierarchy:
</p>

<div class="chart-host">
    <h4 id="header">Sales</h4>
    @(Html.C1().FlexChart().Id("theChart")
        .BindingX("name")
        .Series(sb=>sb.Add().Binding("sales").Name("Sales"))
        .AxisX(x=>x.Title("Country"))
        .AxisY(y=>y.Title("Sales (US$ thousands)").Format("n0,"))
        .Legend(C1.Web.Mvc.Chart.Position.None)
        .Tooltip(t=>t.Content(""))
        .SelectionMode(C1.Web.Mvc.Chart.SelectionMode.Point)
    )
</div>