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 14 15 | using System.Collections.Generic;using System.Web.Mvc;using C1.Web.Mvc.Chart;using MvcExplorer.Models;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 | @model IEnumerable<ProductSales>@section Scripts{ <script> function chartsPerLineChanged(sender, args) { var multipleChart = wijmo.Control.getControl('#multipleChart'); multipleChart.chartsPerLine = sender.value; } </script>}@(Html.C1().FlexPie<ProductSales>() .Id("multipleChart") .Header("Product") .Height(600) .Binding("Downloads,Sales,Refunds,Damages") .Bind(Model) .BindingName("Country") .DataLabel(dl => dl.Content("{value}")))<label style="display:inline;margin: 1em;">@Html.Raw(Resources.FlexPie.Multiple_Text1)</label>@(Html.C1().InputNumber().Min(0).Max(4).Step(1).Value(0).Format("n0").OnClientValueChanged("chartsPerLineChanged"))@section Description{ <p>@Html.Raw(Resources.FlexPie.Multiple_Text0)</p>} |