FlexChart
FlexChart
Overview
Features
Sample
Settings
Description
Introduction
This view shows the FlexChart's basic features by using c1-flex-chart tag. It binds the chart to a Model and allows you to select the chart type, series stacking, and rotation.
If you move the mouse over a chart element, a tooltip will appear showing details about the data point.
The simplest way to use the FlexChart is to:
- Bind the FlexChart with an IEnumerable DataSource. by setting source-collection attribute of c1-items-source sub-tag to Model.
- Set binding-x attribute to the name of the property that contains the X values (in this example fruit names), and it will map the field of chart's ItemsSource.
- Add one or more c1-flex-chart-series sub-tags and set their binding attribute to the name of the property that contains the Y values (in this example the months of March, April, and May).
Uses LegendOrientation to determine the orientation of the legend.
Source
IndexController.cs
using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController: Controller { public ActionResult Index() { var settings = new ClientSettingsModel { Settings = CreateIndexSettings(), DefaultValues = GetIndexDefaultValues() }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(Fruit.GetFruitsSales()); } private static IDictionary<string, object[]> CreateIndexSettings() { var settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}}, {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}}, {"Rotated", new object[]{false, true}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}, {"LegendOrientation", new object[]{ "Auto", "Vertical", "Horizontal"}}, }; return settings; } private static IDictionary<string, object> GetIndexDefaultValues() { var defaultValues = new Dictionary<string, object> { {"GroupWidth", "70%"} }; return defaultValues; } } }
Index.cshtml
@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel; var chartType = demoSettingModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column); var orientationType = demoSettingModel.GetEnum("LegendOrientation", C1.Web.Mvc.Chart.LegendOrientation.Auto); var stacking = demoSettingModel.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (content) => { return string.Equals(content, "Stacked 100%", StringComparison.OrdinalIgnoreCase) ? "Stacked100pc" : content; }); var rotated = demoSettingModel.GetBool("Rotated", false); } <c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Name" chart-type="@chartType" stacking="@stacking" rotated="@rotated" legend-position="Bottom" legend-orientation="@orientationType"> <c1-items-source source-collection="Model"></c1-items-source> <c1-flex-chart-series binding="MarPrice" name="March"> </c1-flex-chart-series> <c1-flex-chart-series binding="AprPrice" name="April"> </c1-flex-chart-series> <c1-flex-chart-series binding="MayPrice" name="May"> </c1-flex-chart-series> </c1-flex-chart> @section Scripts{ <script type="text/javascript"> convertStacking = function (value) { return value === "Stacked 100%" ? "Stacked100pc" : value; }; convertPalette = function (value) { return wijmo.chart.Palettes[value]; }; updateGroupWidth = function (control, value) { control.options = { groupWidth: value === "50 pixels" ? 50 : value }; }; customChangeLegendOrientation = function (control, value) { control.legend.orientation = value; }; </script> } @section Description{ <h3> @Html.Raw(FlexChartRes.Index_Introduction) </h3> <p>@Html.Raw(FlexChartRes.Index_Text0)</p> <p>@Html.Raw(FlexChartRes.Index_Text1)</p> <p>@Html.Raw(FlexChartRes.Index_Text2)</p> <ol> <li>@Html.Raw(FlexChartRes.Index_Li1)</li> <li>@Html.Raw(FlexChartRes.Index_Li2)</li> <li>@Html.Raw(FlexChartRes.Index_Li3)</li> </ol> <p>@Html.Raw(FlexChartRes.Index_Text3)</p> }
Documentation