FlexChart
FlexChart
Binding
Chart binding
This view shows how you can use the FlexChart to show two sets of values
from Model.
Features
Settings
ChartType: Line
InterpolateNulls: True
LegendToggle: False
AxisYLabelMin: False
AxisYLabelMax: False
Description
Chart binding
This view shows how you can use the FlexChart to show two sets of values from Model. This is the most common usage scenario for the FlexChart.
The sample does the following:
- Bind the FlexChart with a IEnumerable DataSource, each item contains value "Date", "SalesInUSA", "SalesInJapan". Set the X data label as "Date".
- Add a Series object to the FlexChart's Series array and set its Binding property to "SalesInUSA".
- Add a second Series object to the FlexChart's Series array and set its Binding property to "SalesInJapan".
In addition to binding, this sample shows the effect of the InterpolateNulls and LegendToggle properties. When you set InterpolateNulls to true, the chart fills in gaps created by null values in the data. When you set LegendToggle to true, the chart toggles the visibility of the series when you click its name in the legend.
This sample also shows the effect of the LabelMin and LabelMax properties of Axis. When you set them to True, the label will be displayed.
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 | using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { private Fruit _apple = new Fruit(); public ActionResult Binding() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateBindingSettings() }; return View(_apple.Sales); } private static IDictionary<string, object[]> CreateBindingSettings() { var settings = new Dictionary<string, object[]> { { "ChartType", new object[] { "Line", "LineSymbols", "Area"} }, { "InterpolateNulls", new object[] { true, false} }, { "LegendToggle", new object[] { false, true } }, { "AxisY.LabelMin", new object[] { false, true } }, { "AxisY.LabelMax", new object[] {false, true } } }; return settings; } } } |
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 | @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var style = new SVGStyle { StrokeWidth = 3 }; } <c1-flex-chart id="@demoSettingsModel.ControlId" binding-x="Date" chart-type="Line" legend-toggle="true" interpolate-nulls="true"> <c1-items-source source-collection="Model"></c1-items-source> <c1-flex-chart-series binding="SalesInUSA" name="Sales in USA" style="@style"></c1-flex-chart-series> <c1-flex-chart-series binding="SalesInJapan" name="Sales in Japan" style="@style"></c1-flex-chart-series> </c1-flex-chart> @section Description{ <h3> @Html.Raw(FlexChartRes.Binding_ChartBinding) </h3> <p>@Html.Raw(FlexChartRes.Binding_Text0)</p> <p>@Html.Raw(FlexChartRes.Binding_Text1)</p> <ol> <li>@Html.Raw(FlexChartRes.Binding_Li1)</li> <li>@Html.Raw(FlexChartRes.Binding_Li2)</li> <li>@Html.Raw(FlexChartRes.Binding_Li3)</li> </ol> <p>@Html.Raw(FlexChartRes.Binding_Text2)</p> <p>@Html.Raw(FlexChartRes.Binding_Text3)</p> } |