FlexPie
Multiple Chart
Features
Sample
Charts Per Line
Description
The sample shows how to create multiple pie charts based on the same data source. To create multiple pie charts, just specify several comma-separated properties in Binding.
Source
MultipleChartController.cs
using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexPieController : Controller { public ActionResult MultipleChart() { return View(ProductSales.GetData()); } } }
MultipleChart.cshtml
@model IEnumerable<ProductSales> @section Styles{ <style type="text/css"> .wj-flexchart { height: 600px; } </style> } @section Scripts{ <script> function chartsPerLineChanged(sender, args) { var multipleChart = wijmo.Control.getControl('#multipleChart'); multipleChart.chartsPerLine = sender.value; } </script> } <c1-flex-pie id="multipleChart" header="Product" binding-name="Country" binding="Downloads,Sales,Refunds,Damages"> <c1-items-source source-collection="Model"></c1-items-source> <c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel> </c1-flex-pie> <p style="display:inline;margin: 1em;">@Html.Raw(FlexPieRes.Multiple_Text1)</p> @(Html.C1().InputNumber().Min(0).Max(4).Step(1).Value(0).Format("n0").OnClientValueChanged("chartsPerLineChanged")) @section Description{ <p>@Html.Raw(FlexPieRes.Multiple_Text0)</p> }
Documentation