Popup Series Picker

You can easily implement a series-picker UI using the chart's series property, a ListBox control, and C1 MVC's showPopup and hidePopup methods.

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 ListBox where you can select the series you want to display.

Note that you can achieve a similar result by setting the chart's legendToggle 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.

// This file locates: "Scripts/Lesson/C1FlexChart/SeriesPicker.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var theSeriesPicker = wijmo.Control.getControl('#theSeriesPicker');
 
    // auto-generate series
    var item = theChart.itemsSource.items[0];
    for (var k in item) {
        if (wijmo.isNumber(item[k])) {
            var series = new wijmo.chart.Series();
            series.binding = k;
            series.name = wijmo.toHeaderCase(k);
            series['visible'] = true; // add 'visible' property for binding
            theChart.series.push(series);
        }
    }
 
    // the series picker
    theSeriesPicker.itemsSource = theChart.series;
    theSeriesPicker.lostFocus.addHandler(function (s, e) {
        wijmo.hidePopup(theSeriesPicker.hostElement);
    });
    theSeriesPicker.checkedItemsChanged.addHandler(function (s, e) {
        // map extra 'visible' property to 'Series.visibility' values
        theChart.series.forEach(function (series) {
            series.visibility = s.checkedItems.indexOf(series) > -1
                ? 'Visible'
                : 'Hidden';
        });
    });
 
    document.getElementById('pickerButton').addEventListener('click', function (e) {
        wijmo.showPopup(theSeriesPicker.hostElement, e.target, false, true, false);
        theSeriesPicker.focus();
        e.preventDefault();
    })
});

// This file locates: "Content/css/Lesson/C1FlexChart/SeriesPicker.css".
.series-picker {
  columns: 2;
  padding: 12px;
  margin-left: 12px;
  margin-top: 26px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#pickerButton {
  cursor: pointer;
  color: #FF8754;
  padding: 6px;
  position: absolute;
  left: 0;
  top: 0
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: SeriesPicker
        public ActionResult SeriesPicker()
        {
            return View(Models.FlexChartData.GetSummaries());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Summary>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.SeriesPicker_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesPicker_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesPicker_Text2)
</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">
        @Html.Raw(Resources.C1FlexChart.SeriesPicker_Text3)
    </div>
</div>