FlexPie
Overview
This view shows the FlexPie's basic features.
Features
Settings
InnerRadius: 0
Offset: 0
StartAngle: 0
Reversed: False
DataLabelPosition: Center
DataLabelBorder: 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 MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Chart; 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 | @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var innerRadius = demoSettingsModel.GetFloat("InnerRadius", 0f); var innerTextStyle = new SVGStyle { FontSize = 28, FontWeight = "400", Fill = "#2244ff", Stroke = "#0099ff", StrokeWidth = 1, StrokeOpacity = 0.6 }; object[] palettesModel = ViewBag.Palettes; } <c1-flex-pie id="@demoSettingsModel.ControlId" header="Sales" inner-radius="@innerRadius" inner-text="" inner-text-style="innerTextStyle" binding-name="Country" binding="Count"> <c1-items-source source-collection="Model"></c1-items-source> <c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel> </c1-flex-pie> @section Settings{ <br /> <c1-menu id="paletteMenu" header="Palette: <b>Standard</b>" show-drop-down-button="true" sub-items-path="Items" item-clicked="itemPaletteClicked"> <c1-items-source source-collection="@palettesModel"></c1-items-source> </c1-menu> } @section Scripts{ <script> function convertPalette(value) { return wijmo.chart.Palettes[value]; } 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(FlexPieRes.Index_Text0)</p> <p>@Html.Raw(FlexPieRes.Index_Text1)</p> <p>@Html.Raw(FlexPieRes.Index_Text2)</p> } |