ASP.NET MVC FlexChart 101

This page shows how to get started with ASP.NET MVC's FlexChart control.

Getting Started

Steps for getting started with the FlexChart control in MVC applications:

  1. Create a new MVC project using the C1 ASP.NET MVC application template.
  2. Add controller and corresponding view to the project.
  3. Initialize the Chart control in view using razor syntax.
  4. (Optional) Add some CSS to customize the FlexChart control's appearance.
<!DOCTYPE html> <html> <head> </head> <body> <!-- this is the FlexChart --> @(Html.C1().FlexChart().Id("gettingStartedChart") .Bind(Model.CountrySalesData).BindingX("Country").Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads"); }) ) </body> </html>
.wj-flexchart { background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); height: 400px; margin-bottom: 12px; padding: 8px; }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Chart Types

The FlexChart control has three properties that allow you to customize the chart type:

  1. ChartType: Selects the default chart type to be used for all series. Individual series may override this.
  2. Stacking: Determines whether series are plotted independently, stacked, or stacked so their sum is 100%.
  3. Rotated: Flips the X and Y axes so X becomes vertical and Y horizontal.

The example below allows you to see what happens when you change these properties:

@(Html.C1().FlexChart().Id("chartTypes") .Bind(Model.CountrySalesData).BindingX("Country").Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads"); }) ) <label class="col-md-3 control-label">Chart Type</label> @(Html.C1().ComboBox().Id("typeMenu").Bind(Model.Settings["ChartType"]) .SelectedValue("Column").OnClientSelectedIndexChanged("typeMenu_SelectedIndexChanged") ) <label class="col-md-3 control-label">Stacking</label> @(Html.C1().ComboBox().Id("stackingMenu").Bind(Model.Settings["Stacking"]) .SelectedValue("None").OnClientSelectedIndexChanged("stackingMenu_SelectedIndexChanged") ) <label class="col-md-3 control-label">Rotated</label> @(Html.C1().ComboBox().Id("rotatedMenu").Bind(Model.Settings["Rotated"]) .SelectedValue("False").OnClientSelectedIndexChanged("rotatedMenu_SelectedIndexChanged") )
//Chart Types Module function typeMenu_SelectedIndexChanged(sender) { if(sender.selectedValue) { var chartTypes = wijmo.Control.getControl("#chartTypes"); chartTypes.chartType = sender.selectedValue; } } function stackingMenu_SelectedIndexChanged(sender) { if (sender.selectedValue) { var chartTypes = MVC.Control.getControl("#chartTypes"); chartTypes.stacking = parseInt(sender.selectedIndex);//sender.selectedValue; } } function rotatedMenu_SelectedIndexChanged(sender) { if (sender.selectedValue) { var chartTypes = MVC.Control.getControl("#chartTypes"); chartTypes.rotated = sender.selectedValue == 'True' ? true : false; } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Mixed Chart Types

You can use different chart types for each chart series by setting the ChartType property on the series itself. This overrides the chart's default chart type.

In the example below, the chart's ChartType property is set to Column, but the Downloads series overrides that to use the LineSymbols chart type:

@(Html.C1().FlexChart().Id("mixedTypesChart") .Bind(Model.CountrySalesData).BindingX("Country").Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads").Type(C1.Web.Mvc.Chart.ChartType.LineSymbols); }) )
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Legend and Titles

Use the Legend properties to customize the appearance of the chart legend, and the Header, Footer, and axis Title properties to add titles to your charts.

You can style the legend and titles using CSS. The CSS tab below shows the rules used to customize the appearance of the legend and titles. Notice that these are SVG elements, so you have to use CSS attributes such as "fill" instead of "color."

@(Html.C1().FlexChart().Id("chartLegendAndTitles").Header("Sample Chart").Footer("Copyright (c) ComponentOne") .Bind(Model.CountrySalesData).BindingX("Country").AxisX(x => x.Title("Country")).AxisY(y => y.Title("Amount")) .Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads"); }) ) <dl class="dl-horizontal"> <dt>Header</dt><dd><input id="headerInput" class="form-control"/></dd> <dt>Footer</dt><dd><input id="footerInput" class="form-control"/></dd> <dt>X-Axis Title</dt><dd><input id="xTitleInput" class="form-control"/></dd> <dt>Y-Axis Title</dt><dd><input id="yTitleInput" class="form-control"/></dd> <dt></dt> <dd> @(Html.C1().ComboBox().Id("positionMenu").Bind(Model.Settings["Position"]) .SelectedValue("Right").OnClientSelectedIndexChanged("positionMenu_SelectedIndexChanged") ) </dd> </dl>
$(document).ready(function () { //Legend & Title Module var ltchart = MVC.Control.getControl("#chartLegendAndTitles"); var ltHeader = document.getElementById('headerInput'); var ltFooter = document.getElementById('footerInput'); var ltXTitle = document.getElementById('xTitleInput'); var ltYTitle = document.getElementById('yTitleInput'); ltHeader.value = 'Sample Chart'; ltHeader.addEventListener('input', function () { ltchart.header = this.value; }); ltFooter.value = 'Copyright (c) ComponentOne'; ltFooter.addEventListener('input', function () { ltchart.footer = this.value; }); ltXTitle.value = 'Country'; ltXTitle.addEventListener('input', function () { ltchart.axisX.title = this.value; }); ltYTitle.value = 'Amount'; ltYTitle.addEventListener('input', function () { ltchart.axisY.title = this.value; }); }); //Legend and Title Module function positionMenu_SelectedIndexChanged(sender) { if (sender.selectedValue) { var chart = MVC.Control.getControl("#chartLegendAndTitles"); chart.legend.position = parseInt(sender.selectedIndex); } }
.wj-flexchart .wj-title { font-weight: bold; } .wj-flexchart .wj-header .wj-title { fill: #80044d; font-size: 18pt; } .wj-flexchart .wj-footer .wj-title { fill: #80044d; } .wj-flexchart .wj-axis-x .wj-title, .wj-flexchart .wj-axis-y .wj-title { font-style: italic; }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Header
Footer
X-Axis Title
Y-Axis Title
Legend

Tooltips

The FlexChart has built-in support for tooltips. By default, the control displays tooltips when the user touches or hovers the mouse on a data point.

The tooltip content is generated using a template that may contain the following parameters:

By default, the tooltip template is set to <b>{seriesName}</b><br/>{x} {y}, and you can see how that works in the charts above. In this example, we set the tooltip template to <b>{seriesName}</b> <img src='"+@@Url.Content("~/Content/images/{x}.png")+"'/><br/>{y}, which replaces the country name with the country's flag.

You can disable the chart tooltips by setting the template to an empty string.

@(Html.C1().FlexChart().Id("chartTooltip").Header("Sample Chart").Footer("Copyright (c) ComponentOne") .Tooltip(tt => tt.Content("<img src='"+@Url.Content("~/Content/images/{x}.png")+"' /> <b>{seriesName}</b><br />{y}")) .Bind(Model.CountrySalesData).BindingX("Country").AxisX(x => x.Title("Country")).AxisY(y => y.Title("Amount")) .Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads"); }) )
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Styling Series

The FlexChart automatically picks colors for each series based on a default palette, which you can override by setting the Palette property. But you can also override the default settings by setting the Style property of any series to an object that specifies SVG styling attributes, including Fill, Stroke, StrokeThickness, and so on.

The Series.Style property is an exception to the general rule that all styling in MVC Controls is done through CSS. The exception reflects the fact that many charts have dynamic series, which would be impossible to style in advance. For example, a stock chart may show series selected by the user while running the application.

The chart in this example uses the Style and SymbolStyle properties to select style attributes for each series:

@(Html.C1().FlexChart().Id("chartSeriesStyle") .Tooltip(tt => tt.Content("<img src='"+@Url.Content("~/Content/images/{x}.png")+"' /> <b>{seriesName}</b><br />{y}")) .Bind(Model.CountrySalesData).BindingX("Country").AxisX(x => x.Title("Country")).AxisY(y => y.Title("Amount")) .Series(sers => { sers.Add().Binding("Sales").Name("Sales").Style(ss => ss.Fill("green").Stroke("darkgreen").StrokeWidth(1)); sers.Add().Binding("Expenses").Name("Expenses").Style(ss => ss.Fill("red").Stroke("darkred").StrokeWidth(1)); sers.Add().Binding("Downloads").Name("Downloads") .Type(C1.Web.Mvc.Chart.ChartType.LineSymbols).Style(ss => { ss.Fill("gold"); ss.Stroke("orange"); ss.StrokeWidth(5); }); }) )
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Customizing Axes

Use axis properties to customize the chart's axes, including ranges (minimum and maximum), label format, tickmark spacing, and gridlines.

The Axis class has boolean properties that allow you to turn features on or off (AxisLine, MajorTickMarks and MajorGrid.) You can style the appearance of the features that are turned on using CSS.

@(Html.C1().FlexChart().Id("chartCustomizeAxes") .Tooltip(tt => tt.Content("<img src='"+@Url.Content("~/Content/images/{x}.png")+"' /> <b>{seriesName}</b><br />{y}")) .Bind(Model.CountrySalesData).BindingX("Country") .AxisX(x => x.ShowAxisLine(true).MajorGrid(true)) .AxisY(y => y.Format("c0").Max(12000000).MajorUnit(1000000) .ShowAxisLine(true).MajorGrid(true)) .Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); }) )
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Theming

The appearance of the FlexChart is defined in CSS. In addition to the default theme, we include about a dozen professionally designed themes that customize the appearance of all MVC controls to achieve a consistent, attractive look.

To customize the appearance of the chart, inspect the elements you want to style and create some CSS rules that apply to those elements.

For example, if you right-click one of the labels on the X axis in IE or Chrome, you will see that it is an element with the "wj-label" class, that it is contained in an element with the "wj-axis-x" class, which is contained in the the top-level control element, which has the "wj-flexchart" class. The first CSS rule in this example uses this information to customize the X labels. The rule selector adds the additional requirement that the parent element must be have the "wj-flexchart" and the "custom-flex-chart" classes. Without this, the rule would apply to all charts on the page.

@(Html.C1().FlexChart().Id("chartTheme").CssClass("custom-flex-chart") .Bind(Model.CountrySalesData).BindingX("Country") .Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads"); }) )
/* custom chart theme */ .custom-flex-chart.wj-flexchart .wj-axis-x .wj-label, .custom-flex-chart.wj-flexchart .wj-legend .wj-label { font-family: 'Courier New', Courier, monospace; font-weight: bold; } .custom-flex-chart.wj-flexchart .wj-legend > rect, .custom-flex-chart.wj-flexchart .wj-plot-area > rect { fill: #f8f8f8; stroke: #c0c0c0; }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Selection Modes

The FlexChart allows you to select series or data points by clicking or touching them. Use the SelectionMode property to specify whether you want to allow selection by series, by data point, or no selection 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 the mouse, and to apply the "wj-state-selected" class to selected chart elements.

The Selection property returns the currently selected series. To get the currently selected data point, get the currently selected item within the selected series using the Series.collectionView.currentItem property as shown in the example.

@(Html.C1().FlexChart().Id("chartSelectionMode").OnClientSelectionChanged("chartSelectionMode_SelectionChanged") .Bind(Model.CountrySalesData).BindingX("Country") .Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads"); }) ) <label class="col-md-3 control-label">Selection Mode</label> @(Html.C1().ComboBox().Id("selectionModeMenu").Bind(Model.Settings["SelectionMode"]) .SelectedValue("None").OnClientSelectedIndexChanged("selectionModeMenu_SelectedIndexChanged") ) <label class="col-md-3 control-label">Chart Type</label> @(Html.C1().ComboBox().Id("chartTypeMenu").Bind(Model.Settings["ChartType"]) .SelectedValue("Column").OnClientSelectedIndexChanged("chartTypeMenu_SelectedIndexChanged") ) <div id="seriesContainer" style="display:none"> <h4>Current Selection</h4> <p>Series: <b id="seriesName"></b></p> <dl id="detailContainer" class="dl-horizontal" style="display:none"> <dt>Country</dt><dd id="seriesCountry"></dd> <dt>Sales</dt><dd id="seriesSales"></dd> <dt>Expenses</dt><dd id="seriesExpenses"></dd> <dt>Downloads</dt><dd id="seriesDownloads"></dd> </dl> </div>
var chartSelectionMode = typeMenu = selectionModeMenu = seriesContainer = detailContainer = null; $(document).ready(function () { //Selection Modes Module chartSelectionMode = wijmo.Control.getControl('#chartSelectionMode'), typeMenu = wijmo.Control.getControl('#chartTypeMenu'), selectionModeMenu = wijmo.Control.getControl('#selectionModeMenu'), seriesContainer = document.getElementById('seriesContainer'), detailContainer = document.getElementById('detailContainer'); var chartLegendToggle = wijmo.Control.getControl('#chartSelectionMode'), cbSales = document.getElementById('cbSales'), cbExpenses = document.getElementById('cbExpenses'), cbDownloads = document.getElementById('cbDownloads'); }); //Selection Modes Module function selectionModeMenu_SelectedIndexChanged(sender) { if (sender.selectedValue) { //var chart = wijmo.Control.getControl("#chartSelectionMode"); chartSelectionMode.selectionMode = parseInt(sender.selectedIndex); // toggle the series panel's visiblity if (sender.selectedIndex === 0 || !chartSelectionMode.selection) { if (seriesContainer) seriesContainer.style.display = 'none'; } else { if (seriesContainer) seriesContainer.style.display = 'block'; } // toggle the series panel's visiblity if (sender.selectedIndex !== 2 || !chartSelectionMode.selection || !chartSelectionMode.selection.collectionView.currentItem) { if (detailContainer) detailContainer.style.display = 'none'; } else { // update the details setSeriesDetail(chartSelectionMode.selection.collectionView.currentItem); } // update Menu header //updateMenuHeader(sender, 'Selection Mode'); } } function chartTypeMenu_SelectedIndexChanged(sender) { if (sender.selectedValue) { //var chart = wijmo.Control.getControl("#chartSelectionMode"); chartSelectionMode.chartType = parseInt(sender.selectedIndex); } } // update details when the FlexChart's selection changes function chartSelectionMode_SelectionChanged(sender) { //var chartSelectionMode = wijmo.Control.getControl("#chartSelectionMode"); var currentSelection = sender.selection, currentSelectItem; if (currentSelection) { var seriesContainer = document.getElementById('seriesContainer'), selectionModeMenu = document.getElementById('selectionModeMenu'); seriesContainer.style.display = 'block'; // show container document.getElementById('seriesName').innerHTML = currentSelection.name; currentSelectItem = currentSelection.collectionView.currentItem; if (currentSelectItem && selectionModeMenu.selectedValue === '2') { setSeriesDetail(currentSelectItem); // update details } } } // helper method to show details of the FlexChart's current selection function setSeriesDetail(currentSelectItem) { detailContainer.style.display = 'block'; document.getElementById('seriesCountry').innerHTML = currentSelectItem.Country; document.getElementById('seriesSales').innerHTML = wijmo.Globalize.format(currentSelectItem.Sales, 'c2'); document.getElementById('seriesExpenses').innerHTML = wijmo.Globalize.format(currentSelectItem.Expenses, 'c2'); document.getElementById('seriesDownloads').innerHTML = wijmo.Globalize.format(currentSelectItem.Downloads, 'n0'); };
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Toggle Series

The Series class has a Visibility property that allows you to determine whether a series should be shown in the chart and in the legend, only in the legend, or completely hidden.

This sample shows how you can use the Visibility property to toggle the visibility of a series using two methods:

  1. Clicking on legend entries:
    The chart sets the chart's option.legendToggle property to true, which toggles the Visibility property of a series when its legend entry is clicked.
  2. Using checkboxes:
    When the checked state changed, it will set the Visibility property of each series by the checked state.
@(Html.C1().FlexChart().Id("chartLegendToggle") .LegendToggle(true).OnClientSeriesVisibilityChanged("chartLegendToggle_SeriesVisibilityChanged") .Bind(Model.CountrySalesData).BindingX("Country") .Series(sers => { sers.Add().Binding("Sales").Name("Sales"); sers.Add().Binding("Expenses").Name("Expenses"); sers.Add().Binding("Downloads").Name("Downloads"); }) ) Sales <input id="cbSales" type="checkbox"/><br /> Expenses <input id="cbExpenses" type="checkbox"/><br /> Downloads <input id="cbDownloads" type="checkbox"/>
$(document).ready(function () { //Toggle Series Module // loop through custom check boxes ['cbSales', 'cbExpenses', 'cbDownloads'].forEach(function (item, index) { // update checkbox and toggle FlexChart's series visibility when clicked var el = document.getElementById(item); el.checked = chartLegendToggle.series[index].visibility === wijmo.chart.SeriesVisibility.Visible; el.addEventListener('click', function () { if (this.checked) { chartLegendToggle.series[index].visibility = wijmo.chart.SeriesVisibility.Visible; } else { chartLegendToggle.series[index].visibility =wijmo.chart.SeriesVisibility.Legend; } }); }); }); //Toggle Series Module function chartLegendToggle_SeriesVisibilityChanged(sender) { // loop through chart series sender.series.forEach(function (series) { var seriesName = series.name, checked = series.visibility === wijmo.chart.SeriesVisibility.Visible; // update custom checkbox panel document.getElementById('cb' + seriesName).checked = checked; }); }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FlexChart101.Models; using C1.Web.Mvc.Chart; namespace FlexChart101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexChartModal ModelObj = new FlexChartModal(); ModelObj.Settings = CreateIndexSettings(); ModelObj.CountrySalesData = CountryData.GetCountryData(); return View(ModelObj); } private IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false.ToString(), true.ToString()}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"Position",new object[]{Position.None.ToString(),Position.Left.ToString(),Position.Top.ToString(),Position.Right.ToString(),Position.Bottom.ToString()}}, {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Series.ToString(),SelectionMode.Point.ToString()}} }; return settings; } } }

Result (live):

Sales
Expenses
Downloads