Legend Series Toggle
Set the chart's legendToggle property to true to enable toggling the visibility of series when users click the chart legend:
1 2 3 4 5 6 7 8 9 | // This file locates: "Scripts/Lesson/C1FlexChart/LegendToggle.js". c1.documentReady(function () { var theChart = wijmo.Control.getControl( '#theChart' ); // change legendToggle document.getElementById( 'legendToggle' ).addEventListener( 'click' , function (e) { theChart.legendToggle = e.target. checked ; }) }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: LegendToggle public ActionResult LegendToggle() { return View(Models.FlexChartData.GetSales1()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | @using LearnMvcClient.Models @model IEnumerable< FlexChartData.Sale > < h1 > @Html .Raw(Resources.C1FlexChart.LegendToggle_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexChart.LegendToggle_Text1) </ p > < div class = "demo-settings" > < label for = "legendToggle" > @Html .Raw(Resources.C1FlexChart.LegendToggle_Text2) </ label > < input id = "legendToggle" type = "checkbox" checked = "checked" > </ div > @ (Html.C1().FlexChart< FlexChartData.Sale >().Id( "theChart" ) .Bind( "Country" , Model) .LegendToggle( true ) .Series(sb => { sb.Add().Binding( "Sales" ).Name( "Sales" ); sb.Add().Binding( "Expenses" ).Name( "Expenses" ); sb.Add().Binding( "Downloads" ).Name( "Downloads" ); }) ) |