FlexChart
FlexChart
Overview
Features
Sample
Settings
Description
This view shows basic features of the FlexChart control. It binds the chart to a Model and allows you to select the chart type, the series stacking, and the 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 to an IEnumerable DataSource.
- Set the BindingX property of the chart 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 Series objects to the chart's Series array and set their Binding property to the name of the property that contains the Y values (in this example the months of March, April, and May).
Source
IndexController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using C1.Web.Mvc.Chart; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult Index() { var data = new ClientSettingsModel { Settings = CreateIndexSettings(), DefaultValues = GetIndexDefaultValues() }; data.LoadRequestData(Request); ViewBag.DemoSettingsModel = data; 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"}} }; return settings; } private static IDictionary<string, object> GetIndexDefaultValues() { var defaultValues = new Dictionary<string, object> { {"GroupWidth", "70%"} }; return defaultValues; } } }
Index.cshtml
@model IEnumerable<Fruit> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @functions{ public C1.Web.Mvc.Chart.Stacking GetStacking(ClientSettingsModel settings) { return settings.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (stacking) => { return string.Equals(stacking, "Stacked 100%", StringComparison.OrdinalIgnoreCase) ? "Stacked100pc" : stacking; }); } } <div id="flexChart"></div> @(Html.C1().FlexChart().Id(demoSettingsModel.ControlId) .ChartType(demoSettingsModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column)) .Stacking(GetStacking(demoSettingsModel)) .Rotated(demoSettingsModel.GetBool("Rotated", false)) .Bind(Model).BindingX("Name").Series(sers => { sers.Add().Binding("MarPrice").Name("March"); sers.Add().Binding("AprPrice").Name("April"); sers.Add().Binding("MayPrice").Name("May"); }) ) @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 }; }; </script> } @section Description{ <p>@Html.Raw(Resources.FlexChart.Index_Text0)</p> <p>@Html.Raw(Resources.FlexChart.Index_Text1)</p> <p>@Html.Raw(Resources.FlexChart.Index_Text2)</p> <ol> <li>@Html.Raw(Resources.FlexChart.Index_Li1)</li> <li>@Html.Raw(Resources.FlexChart.Index_Li2)</li> <li>@Html.Raw(Resources.FlexChart.Index_Li3)</li> </ol> }
Documentation