FlexRadar
Radar
The example shows how to create and customize a FlexRadar chart.
Features
Settings
ChartType: Column
Stacking: None
StartAngle: 0
TotalAngle: 360
Reversed: False
Description
The example shows how to create and customize a FlexRadar chart.
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 | using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexRadarController : Controller { private List<ProductSales> productSales = ProductSales.GetData(); public ActionResult Index() { var settings = new ClientSettingsModel { Settings = CreateRadarSettings(), DefaultValues = GetIndexDefaultValues() }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(productSales); } private static IDictionary< string , object []> CreateRadarSettings() { var settings = new Dictionary< string , object []> { { "ChartType" , new object []{ "Column" , "Scatter" , "Line" , "LineSymbols" , "Area" }}, { "Stacking" , new object []{ "None" , "Stacked" , "Stacked100pc" }}, { "StartAngle" , new object []{0, 60, 120, 180, 240, 300, 360}}, { "TotalAngle" , new object []{60, 120, 180, 240, 300, 360}}, { "Reversed" , new object []{ false , true }} }; return settings; } private static IDictionary< string , object > GetIndexDefaultValues() { var defaultValues = new Dictionary< string , object > { { "TotalAngle" , 360} }; return defaultValues; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @model IEnumerable< ProductSales > @using C1.Web.Mvc.Chart @ { ViewBag.DemoSettings = true ; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var chartType = demoSettingsModel.GetEnum( "ChartType" , C1.Web.Mvc.Chart.RadarChartType.Column); var stacking = demoSettingsModel.GetEnum( "Stacking" , C1.Web.Mvc.Chart.Stacking.None); } < c1-flex-radar binding = "Downloads" binding-x = "Country" height = "400px" width = "500px" chart-type = "@chartType" stacking = "@stacking" id = "@demoSettingsModel.ControlId" legend-position = "Top" > < c1-items-source source-collection = "Model" /> < c1-flex-radar-series name = "Downloads" /> < c1-flex-radar-series name = "Sales" binding = "Sales" /> </ c1-flex-radar > @section Description{ < p > @Html .Raw(FlexRadarRes.Index_Text0)</ p > } |