FlexChart
FlexChart
Axis Groups
This view shows the FlexChart with Groups Options
FlexChart's axis now supports groups defined in CollectionView which specified as chart's data source.
Features
Description
This view shows the FlexChart with Groups Options
FlexChart's axis now supports groups defined in CollectionView which specified as chart's data source. To display group you need to create groups in collection view and set Display in AxisGroupsOptions
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 | using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController { public ActionResult AxisGroups() { var model = new ClientSettingsModel { Settings = CreateGroupsOptionSettings(), DefaultValues = new Dictionary<string, object> { {"AxisX.GroupsOptions.Display", "Show"} } }; ViewBag.CitiesSales = CitySale.GetData(8); return View(model); } private static IDictionary<string, object[]> CreateGroupsOptionSettings() { var settings = new Dictionary<string, object[]> { {"AxisX.GroupsOptions.Display", new object[]{"None", "Show", "ShowGrid"}} }; return settings; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @{ // ViewBag.DemoSettings = true; // ViewBag.DemoSettingsModel = Model; IEnumerable<CitySale> CitySaleDatas = ViewBag.CitiesSales; } <c1-items-source id="CVService" group-by="CountryName" source-collection="@CitySaleDatas" page-size="16"></c1-items-source> <c1-flex-chart id="@Model.ControlId" header="@FlexChartRes.Axes_Sales" items-source-id="CVService"> <c1-flex-chart-series name="Sales" binding-x="Name" binding="Sales"> <c1-items-source source-collection="@CitySaleDatas"></c1-items-source> </c1-flex-chart-series> <c1-flex-chart-axis c1-property="AxisX" binding="CountryName"> <c1-axis-groups-options c1-property="GroupsOptions" display="Show"></c1-axis-groups-options> </c1-flex-chart-axis> </c1-flex-chart> @section Description{ <h3>@Html.Raw(FlexChartRes.AxisGroups_Text01)</h3> <p>@Html.Raw(FlexChartRes.AxisGroups_Text02)</p> } |