FlexPie
Overview
This view shows the FlexPie's basic features.
Features
Settings
Inner Radius: 0
Offset: 0
Start Angle: 0
Reversed: False
Data Label Position: Center
Data Label Border: False
Palette: Standard
Description
This view shows the FlexPie's basic features. It binds the chart to a data model.
If you move the mouse over a chart element, a tooltip will appear showing details about the data point.
If you select InnerRadius greater than 0 then the InnerText will appears inside center of the pie instead of Header text at the top and it's styled by InnerTextStyle.
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 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 Index() { var settings = new ClientSettingsModel { Settings = CreateSettings(), DefaultValues = new Dictionary<string, object> { {"DataLabel.Position", PieLabelPosition.Center} } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; ViewBag.Palettes = GetPalettes(); return View(CustomerOrder.GetCountryGroupOrderData()); } private static IDictionary<string, object[]> CreateSettings() { var settings = new Dictionary<string, object[]> { {"InnerRadius", new object[]{0, 0.25, 0.5, 0.75}}, {"Offset", new object[]{0, 0.1, 0.2, 0.3, 0.4, 0.5}}, {"StartAngle", new object[]{0, 90, 180, -90}}, {"Reversed", new object[]{false, true}}, {"DataLabel.Position", new object[]{PieLabelPosition.None, PieLabelPosition.Inside, PieLabelPosition.Center, PieLabelPosition.Outside, PieLabelPosition.Radial, PieLabelPosition.Circular}}, {"DataLabel.Border", new object[]{false, true}}, }; return settings; } private object[] GetPalettes() { return new object[] { new {Header = "Standard", Value = Palettes.Standard}, new {Header = "Cocoa", Value = Palettes.Cocoa}, new {Header = "Coral", Value = Palettes.Coral}, new {Header = "Dark", Value = Palettes.Dark}, new {Header = "Highcontrast", Value = Palettes.Highcontrast}, new {Header = "Light", Value = Palettes.Light}, new {Header = "Midnight", Value = Palettes.Midnight}, new {Header = "Minimal", Value = Palettes.Minimal}, new {Header = "Modern", Value = Palettes.Modern }, new {Header = "Organic", Value = Palettes.Organic }, new {Header = "Slate", Value = Palettes.Slate }, new { Header = "Qualitative", Items = new object[] { new {Header = "Accent", GroupName = "Qualitative", Value = Palettes.Qualitative.Accent}, new {Header = "Dark2", GroupName = "Qualitative", Value = Palettes.Qualitative.Dark2}, new {Header = "Paired", GroupName = "Qualitative", Value = Palettes.Qualitative.Paired}, new {Header = "Pastel1", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel1}, new {Header = "Pastel2", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel2}, new {Header = "Set1", GroupName = "Qualitative", Value = Palettes.Qualitative.Set1}, new {Header = "Set2", GroupName = "Qualitative", Value = Palettes.Qualitative.Set2}, new {Header = "Set3", GroupName = "Qualitative", Value = Palettes.Qualitative.Set3}, } }, new { Header = "Diverging", Items = new object[] { new {Header = "BrBG", GroupName = "Diverging", Value = Palettes.Diverging.BrBG}, new {Header = "PiYG", GroupName = "Diverging", Value = Palettes.Diverging.PiYG}, new {Header = "PRGn", GroupName = "Diverging", Value = Palettes.Diverging.PRGn}, new {Header = "PuOr", GroupName = "Diverging", Value = Palettes.Diverging.PuOr}, new {Header = "RdBu", GroupName = "Diverging", Value = Palettes.Diverging.RdBu}, new {Header = "RdGy", GroupName = "Diverging", Value = Palettes.Diverging.RdGy}, new {Header = "RdYlBu", GroupName = "Diverging", Value = Palettes.Diverging.RdYlBu}, new {Header = "RdYlGn", GroupName = "Diverging", Value = Palettes.Diverging.RdYlGn}, new {Header = "Spectral",GroupName = "Diverging", Value = Palettes.Diverging.Spectral}, } }, new { Header = "SequentialSingle", Items = new object[] { new {Header = "Blues", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Blues}, new {Header = "Greens",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greens}, new {Header = "Greys",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greys}, new {Header = "Oranges",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Oranges}, new {Header = "Purples", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Purples}, new {Header = "Reds",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Reds}, } }, new { Header = "SequentialMulti", Items = new object[] { new { Header = "BuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuGn}, new {Header = "BuPu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuPu}, new {Header = "GnBu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.GnBu}, new {Header = "OrRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.OrRd}, new {Header = "PuBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBu}, new {Header = "PuBuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBuGn}, new {Header = "PuRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuRd}, new {Header = "RdPu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.RdPu}, new {Header = "YlGn",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGn}, new {Header = "YlGnBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGnBu}, new {Header = "YlOrBr",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrBr}, new {Header = "YlOrRd",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrRd} } } }; } }} |
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | @model IEnumerable<CustomerOrder>@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; object[] palettesModel = ViewBag.Palettes;}@(Html.C1().FlexPie<CustomerOrder>().Id(demoSettingsModel.ControlId) .InnerRadius(demoSettingsModel.GetFloat("InnerRadius", 0f)) .Header("Sales").Bind("Country", "Count", Model).DataLabel(dl=>dl.Content("{value}")) .InnerText("") .Palette(C1.Web.Mvc.Chart.Palettes.Standard) .InnerTextStyle(svgb => svgb.FontSize(28).FontWeight("400").Fill("#2244ff").Stroke("#0099ff").StrokeWidth(1).StrokeOpacity(0.6)))@section Settings{ <br /> @*<label style="display: inline-block; font-weight: normal">Palettes</label>*@ @(Html.C1().Menu().Id("paletteMenu").Bind(palettesModel) .Header("Palette: <b>Standard</b>") .ShowDropDownButton(true) .CloseOnLeave(true) .SubItemsPath("Items") .OnClientItemClicked("itemPaletteClicked") )}@section Scripts{ <script> function customChangeInnerRadius(control, value) { control.innerRadius = (typeof convertInnerRadius === 'undefined' ? value : convertInnerRadius(value)); if (value > 0) { if (control.header != "") { control.innerText = control.header; control.header = ""; } } else { control.header = control.innerText; control.innerText = ""; } } function itemPaletteClicked(sender) { if (sender.selectedItem) { let flexPie = wijmo.Control.getControl("#@(demoSettingsModel.ControlId)") if (flexPie) { flexPie.palette = sender.selectedItem.Value; flexPie.invalidate(); } let menu = wijmo.Control.getControl("#paletteMenu"); if (sender.selectedItem.GroupName && sender.selectedItem.GroupName.length) { menu.header = "Palette: <b>" + sender.selectedItem.GroupName + "." + sender.selectedItem.Header + "<b/>"; } else { menu.header = "Palette: <b>" + sender.selectedItem.Header + "<b/>"; } sender.invalidate(); } } </script>}@section Description{ <p>@Html.Raw(Resources.FlexPie.Index_Text0)</p> <p>@Html.Raw(Resources.FlexPie.Index_Text1)</p> <p>@Html.Raw(Resources.FlexPie.Index_Text2)</p>} |