FlexChart
FlexChart
Overview
This view shows basic features of the FlexChart control.
Features
Settings
Chart Type: Column
Stacking: Stacked100pc
Rotated: False
Palette: standard
Group Width: 70%
Legend Orientation: Auto
Tooltip Position: Above
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).
Uses LegendOrientation to determine the orientation of the legend.
Uses Legend.MaxSize to Gets or sets the maximum legend size (width for left or right position and height for top or bottom position). The size can be specified in pixels: maxSize = '100px' or percents: maxSize = '50%'.
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 | 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"}}, {"LegendOrientation", new object[]{ "Auto", "Vertical", "Horizontal"}}, {"TooltipPosition", new object[]{ "Above", "AboveRight", "RightTop", "Right", "RightBottom", "BelowRight", "Below", "BelowLeft", "LeftBottom", "Left", "LeftTop", "AboveLeft" }} }; return settings; } private static IDictionary<string, object> GetIndexDefaultValues() { var defaultValues = new Dictionary<string, object> { {"GroupWidth", "70%"} }; return defaultValues; } }} |
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 | @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"); }) .Legend(C1.Web.Mvc.Chart.Position.Bottom) .Legend(demoSettingsModel.GetEnum("LegendOrientation", C1.Web.Mvc.Chart.LegendOrientation.Auto)) .Legend("100px"))@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; }; function customChangeTooltipPosition(control, value) { control.tooltip.position = value; } function setChartOption(value) { var chart = wijmo.Control.getControl('#@(demoSettingsModel.ControlId)'); if (chart) { chart.legend.maxSize = value; chart.refresh(true); } } function maxSizeChanged(sender, args) { setChartOption(sender.value); }</script>}@section Settings{ <label style="display: inline-block; font-weight: normal">Legend Maxsize</label> @(Html.C1().InputNumber().Value(100).Step(1) .OnClientValueChanged("maxSizeChanged").Width(150))}@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> <p>@Html.Raw(Resources.FlexChart.Index_Text3)</p> <p>@Html.Raw(Resources.FlexChart.Index_Text4)</p>} |