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

<h1>
    Popup Series Picker
</h1>
<p>
    You can easily implement a series-picker UI using the
    chart's <b>series</b> property, a <b>ListBox</b> control,
    and C1 MVC's <b>showPopup</b> and <b>hidePopup</b>
    methods.
</p>
<p>
    For example, the chart below starts with an auto-generated
    set of series. Click the gear icon at the top-left corner to
    show a <b>ListBox</b> where you can select the series
    you want to display.
</p>

<div style="position:relative">
    @(Html.C1().FlexChart<FlexChartData.Summary>().Id("theChart")
    .Bind("Country", Model)
    )
    <div id="pickerButton">
        <span class="column-picker-icon glyphicon glyphicon-cog"></span>
    </div>
</div>

<div style="display:none">
    @(Html.C1().ListBox().Id("theSeriesPicker")
        .CssClass("series-picker")
        .CheckedMemberPath("visible")
        .DisplayMemberPath("name")
    )
</div>

<div class="panel panel-warning">
    <div class="panel-heading">
        Note that you can achieve a similar result by setting the
        chart's <b>legendToggle</b> property to true. Once you do
        that, the legend itself acts as a series picker: clicking
        any series name in the legend toggles its visibility.
    </div>
</div>