ASP.NET Core C1 FlexPie 101

This page shows how to get started with ASP.NET Core MVC's C1 FlexPie controls.

Getting Started

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

  1. Create a new ASP.NET Core MVC project using the "C1 ASP.NET Core MVC Web Application" template.
  2. Add controller and corresponding view to the project.
  3. Initialize the C1 FlexPie control in view using tag <c1-flex-pie></c1-flex-pie>
  4. (Optional) Add some CSS to customize the FlexPie control's appearance.
<!DOCTYPE html> <html> <head> </head> <body> <!-- FlexPie --> <c1-flex-pie id="introChart" header="Products Sale By Country" binding-name="Country" binding="Count"> <c1-items-source source-collection="@Model.CountryGroupOrderData"></c1-items-source> <c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel> </c1-flex-pie> </body> </html>
using Microsoft.AspNetCore.Mvc; using FlexPie101.Models; using System.Collections.Generic; using C1.Web.Mvc.Chart; namespace FlexPie101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexPieModel ModelObj = new FlexPieModel(); ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData(); return View(ModelObj); } } }

Result (live):

Basic Features

The FlexPie control has five basic properties that allow you to customize its layout and appearance:

The example below allows you to see what happens when you change these properties. Also, clicking on a pie slice will display a tooltip for the data point.

<c1-flex-pie id="basicChart" header="Products Sale By Country" binding-name="Country" binding="Count"> <c1-items-source source-collection="@Model.CountryGroupOrderData"></c1-items-source> <c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel> </c1-flex-pie> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Inner Radius</label> <div class="col-md-9"> <c1-input-number id="basicInnerRadius" min="0" max="1" step=".1" format="n" value-changed="basicInnerRadius_valueChanged"> </c1-input-number> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Offset</label> <div class="col-md-9"> <c1-input-number id="basicOffset" min="0" max="1" step=".1" format="n" value-changed="basicOffset_valueChanged"> </c1-input-number> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Start Angle</label> <div class="col-md-9"> <c1-input-number id="basicStartAngle" min="-360" max="360" step="45" format="n" value-changed="basicStartAngle_valueChanged"> </c1-input-number> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Palette</label> <div class="col-md-9"> <c1-combo-box id="basicPalette" placeholder="Pallete" selected-index="0" selected-index-changed="basicPalette_SelectedIndexChanged"> <c1-items-source source-collection="@Model.Settings["Palette"]"></c1-items-source> </c1-combo-box> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="basicReversed" type="checkbox" /> Reversed? </label> </div> </div> </div> </div>
$(document).ready(function () { //Basic Features Module var basicReversed = document.getElementById('basicReversed'); basicReversed.addEventListener('change', function () { // determine reversed by checkbox's checked state var chart = wijmo.Control.getControl("#basicChart"); chart.reversed = this.checked; }); }); //Basic Features Module function basicInnerRadius_valueChanged(sender) { var chart = wijmo.Control.getControl("#basicChart"); chart.innerRadius = sender.value; }; function basicOffset_valueChanged(sender) { var chart = wijmo.Control.getControl("#basicChart"); chart.offset = sender.value; }; function basicStartAngle_valueChanged(sender) { var chart = wijmo.Control.getControl("#basicChart"); chart.startAngle = sender.value; }; function basicPalette_SelectedIndexChanged(sender) { if (!sender.selectedValue) return; var chart = wijmo.Control.getControl("#basicChart"); chart.palette = wijmo.chart.Palettes[sender.selectedValue]; };
using Microsoft.AspNetCore.Mvc; using FlexPie101.Models; using System.Collections.Generic; using C1.Web.Mvc.Chart; namespace FlexPie101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexPieModel ModelObj = new FlexPieModel(); ModelObj.Settings = CreateSettings(); ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData(); return View(ModelObj); } private static IDictionary CreateSettings() { var settings = new Dictionary { {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"LegendPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}}, {"SelectedItemPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}}, }; return settings; } } }

Result (live):

Legend & Titles

The legend-position property can be used to customize the appearance of the chart's legend. The header and footer properties can be used to add titles to the FlexPie control as well.

The following example allows you to change the FlexPie's legend-position, header, and footer properties in real-time.

<c1-flex-pie id="ltChart" header="Products Sale By Country" binding-name="Country" binding="Count" legend-position="Top"> <c1-items-source source-collection="@Model.CountryGroupOrderData"></c1-items-source> <c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel> </c1-flex-pie> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Header</label> <div class="col-md-9"> <input id="ltHeader" type="text" class="form-control" placeholder="Specify the FlexPie's header" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Footer</label> <div class="col-md-9"> <input id="ltFooter" type="text" class="form-control" placeholder="Specify the FlexPie's footer" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Legend Position</label> <div class="col-md-9"> <c1-combo-box id="ltLegPos" placeholder="Legend Position" selected-index-changed="ltLegPos_SelectedIndexChanged"> <c1-items-source source-collection="@Model.Settings["LegendPosition"]"></c1-items-source> </c1-combo-box> </div> </div> </div>
$(document).ready(function () { //Legend & Title Module var ltchart = wijmo.Control.getControl("#ltChart"); var ltHeader = document.getElementById('ltHeader'); var ltFooter = document.getElementById('ltFooter'); ltHeader.value = ltchart.header = 'Products By Country'; ltFooter.value = ltchart.footer = '2014, GrapeCity Inc.'; ltHeader.addEventListener('input', function () { ltchart.header = this.value; }); ltFooter.addEventListener('input', function () { ltchart.footer = this.value; }); }); //Legend & Title Module function ltLegPos_SelectedIndexChanged(sender) { if (!sender.selectedValue) return; var chart = wijmo.Control.getControl("#ltChart"); chart.legend.position = sender.selectedValue; };
using Microsoft.AspNetCore.Mvc; using FlexPie101.Models; using System.Collections.Generic; using C1.Web.Mvc.Chart; namespace FlexPie101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexPieModel ModelObj = new FlexPieModel(); ModelObj.Settings = CreateSettings(); ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData(); return View(ModelObj); } private static IDictionary CreateSettings() { var settings = new Dictionary { {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"LegendPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}}, {"SelectedItemPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}}, }; return settings; } } }

Result (live):

Selection

The FlexPie control allows you to select data points by clicking or touching a pie slice. Use the selection-mode property to specify whether you want to allow selection by data point or no selection at all (default).

Setting the selection-mode property to Point causes the FlexPie to update the selection-mode property when the user clicks on a pie slice, and to apply the "wj-state-selected" class to the selected element. Setting the FlexPie's selection-mode property to Series or None will disable selections within the control.

The FlexPie offers three additional properties to customize the selection:

<c1-flex-pie id="selChart" header="Products Sale By Country" binding-name="Country" binding="Count" is-animated="true" selection-mode="Point" selected-item-position="Top"> <c1-items-source source-collection="@Model.CountryGroupOrderData"></c1-items-source> <c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel> </c1-flex-pie> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-4 control-label">Selected Item Offset</label> <div class="col-md-8"> <c1-input-number id="selItemOffset" min="0" max=".5" step=".1" format="n" value-changed="selItemOffset_valueChanged"> </c1-input-number> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Selected Item Position</label> <div class="col-md-8"> <c1-combo-box id="selItemPos" placeholder="Selected Item Position" selected-index="0" selected-index-changed="selItemPos_SelectedIndexChanged"> <c1-items-source source-collection="@Model.Settings["SelectedItemPosition"]"></c1-items-source> </c1-combo-box> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="selAnimated" type="checkbox"> Is Animated? </label> </div> </div> </div> </div>
$(document).ready(function () { //Selection Module var selAnimated = document.getElementById('selAnimated'); selAnimated.checked = true; selAnimated.addEventListener('change', function () { // determine Is Animated by checkbox's checked state var chart = wijmo.Control.getControl("#selChart"); chart.isAnimated = this.checked; }); }); //Selection Module function selItemOffset_valueChanged(sender) { var chart = wijmo.Control.getControl("#selChart"); chart.selectedItemOffset = sender.value; }; function selItemPos_SelectedIndexChanged(sender) { if (!sender.selectedValue) return; var chart = wijmo.Control.getControl("#selChart"); chart.selectedItemPosition = sender.selectedValue; };
using Microsoft.AspNetCore.Mvc; using FlexPie101.Models; using System.Collections.Generic; using C1.Web.Mvc.Chart; namespace FlexPie101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexPieModel ModelObj = new FlexPieModel(); ModelObj.Settings = CreateSettings(); ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData(); return View(ModelObj); } private static IDictionary CreateSettings() { var settings = new Dictionary { {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"LegendPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}}, {"SelectedItemPosition", new object[]{Position.Top.ToString(), Position.Bottom.ToString(), Position.Left.ToString(), Position.None.ToString(), Position.Right.ToString()}}, }; return settings; } } }

Result (live):

Theming

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

You can customize the appearance of the FlexPie control using CSS. To do this, copy the CSS rules from the default theme to a new CSS file and modify the properties as needed.

In this example, we added the "custom-pie-chart" CSS class to the control and defined some CSS rules to change the fill, font family, and font weight of the header, footer, and legend.

<c1-flex-pie id="themeChart" header="Products Sale By Country" class="custom-pie-chart" binding-name="Country" binding="Count" is-animated="true" selection-mode="Point" selected-item-position="Top"> <c1-items-source source-collection="@Model.CountryGroupOrderData"></c1-items-source> <c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel> </c1-flex-pie>
.custom-pie-chart.wj-flexchart .wj-header .wj-title, .custom-pie-chart.wj-flexchart .wj-footer .wj-title, .custom-pie-chart.wj-flexchart .wj-legend > .wj-label { fill: #666; font-family: 'Courier New', Courier, monospace; font-weight: bold; }
using Microsoft.AspNetCore.Mvc; using FlexPie101.Models; using System.Collections.Generic; using C1.Web.Mvc.Chart; namespace FlexPie101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexPieModel ModelObj = new FlexPieModel(); ModelObj.CountryGroupOrderData = CustomerOrder.GetCountryGroupOrderData(); return View(ModelObj); } } }

Result (live):