FlexChart
FlexChart
Step Chart
This demo shows line, symbols and area step charts.
Features
Settings
ChartType: Step
StepPosition: Start
Description
This demo shows line, symbols and area step charts. Step charts are useful to display any type of data that has changes at irregular intervals of time, for example, interest rates vs time.
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 | using System; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult StepChart() { var data = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"ChartType", new object[]{"Step", "StepSymbols", "StepArea"}}, {"StepPosition", new object[] {"Start", "Center", "End"}} } }; data.LoadRequestData(Request); ViewBag.DemoSettingsModel = data; return View(StatisticMessage.GetData()); } } } |
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 | @model IEnumerable<StatisticMessage> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel; var chartType = demoSettingModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Step); var stepPositon = demoSettingModel.GetEnum("StepPosition", StepPosition.Start); } <script> function updateStepPosition(control, value) { control.options = { step: { position: value.toLowerCase() } }; } </script> <c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Month" chart-type="@chartType"> <c1-items-source source-collection="Model"></c1-items-source> <c1-flex-chart-series binding="SMS" name="SMS Totals"> </c1-flex-chart-series> <c1-flex-chart-series binding="Email" name="Email Totals"> </c1-flex-chart-series> <c1-chart-legend position="Top"></c1-chart-legend> <c1-flex-chart-axis c1-property="AxisX" axis-line="false" major-tick-marks="None"></c1-flex-chart-axis> <c1-flex-chart-axis c1-property="AxisY" major-grid="false"></c1-flex-chart-axis> <c1-chart-options> <c1-step-options position="@stepPositon" /> </c1-chart-options> </c1-flex-chart> @section Description{ <p>@Html.Raw(FlexChartRes.StepChart_Text0)</p> } |