FlexPie
Multiple Chart
The sample shows how to create multiple pie charts based on the same data source.
Features
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexPieController : Controller { public ActionResult MultipleChart() { return View(ProductSales.GetData()); } } } |
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 27 28 29 30 | @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> <label style="display:inline;margin: 1em;">@Html.Raw(FlexPieRes.Multiple_Text1)</label> @(Html.C1().InputNumber().Min(0).Max(4).Step(1).Value(0).Format("n0").OnClientValueChanged("chartsPerLineChanged")) @section Description{ <p>@Html.Raw(FlexPieRes.Multiple_Text0)</p> } |