FlexChart Selection

The FlexChart supports selection. Use the selectionMode property to specify whether you want to allow selection by series, by data point, or none at all (selection is off by default.)

Setting the selectionMode property to Series or Point causes the FlexChart to update the selection property when the user clicks an item, and to apply the "wj-state-selected" class to selected chart elements.

The chart selection mechanism us based on the CollectionView class, so if you have multiple controls connected to the same data source, their selections will be synchronized automatically.

Selection Mode:
Chart Type:

// This file locates: "Scripts/Lesson/C1FlexChart/Selection.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl("#theChart");
    var theGrid = wijmo.Control.getControl("#theGrid");
    var selectionMode = wijmo.Control.getControl("#selectionMode");
    var chartType = wijmo.Control.getControl("#chartType");
 
    theChart.selectionChanged.addHandler(function (s, e) {
        var selectedSeries = s.selection;
        if (!selectedSeries) {
            theGrid.hostElement.style.display = 'none';
        } else {
            theGrid.hostElement.style.display = '';
            theGrid.columns.forEach(function(col) {
                col.visible = col.binding == selectedSeries.binding || col.binding == 'Country';
                col.width = '*';
            })
        }
    });
 
    // change the selectionMode
    selectionMode.textChanged.addHandler(function (s, e) {
        theChart.selectionMode = s.text;
    });
 
    // change the chartType
    chartType.textChanged.addHandler(function (s, e) {
        theChart.chartType = s.text;
    });
});

// This file locates: "Content/css/Lesson/C1FlexChart/Selection.css".
.wj-flexchart .wj-state-selected {
  stroke: rgba(0,0,0,.5);
  stroke-width: 3;
  stroke-dasharray: 1;
}

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
@{
    var selectionModes = new[] { "None", "Series", "Point" };
    var chartTypes = new[] { "Column", "Bar", "Scatter", "Line", "LineSymbols", "Area" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Selection_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Selection_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Selection_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Selection_Text3)
</p>
 
<div class="demo-settings">
    <label for="selectionMode">@Html.Raw(Resources.C1FlexChart.Selection_Text4) </label>
    @Html.C1().ComboBox().Id("selectionMode").Bind(selectionModes).Text("Series")
    <br />
    <label for="chartType">@Html.Raw(Resources.C1FlexChart.Selection_Text5) </label>
    @Html.C1().ComboBox().Id("chartType").Bind(chartTypes).Text("Column")
</div>
 
@(Html.C1().CollectionViewService<FlexChartData.Sale>().Id("collectionView1")
        .Bind(Model)
)
 
<div class="row demo-settings">
    <div class="col-xs-8">
        @(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
            .Header(Resources.C1FlexChart.Selection_Text6)
            .Legend(C1.Web.Mvc.Chart.Position.None)
            .ItemsSourceId("collectionView1")
            .BindingX("Country")
            .Series(sb =>
            {
                sb.Add().Binding("Sales").Name("Sales");
                sb.Add().Binding("Expenses").Name("Expenses");
            })
            .Tooltip(t => t.Content(""))
            .SelectionIndex(-1)
            .SelectionMode(C1.Web.Mvc.Chart.SelectionMode.Series)
        )
    </div>
    <div class="col-xs-4">
        @(Html.C1().FlexGrid<FlexChartData.Sale>().Id("theGrid")
            .CssStyle("display", "none")
            .ItemsSourceId("collectionView1")
            .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
            .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
        )
    </div>
</div>