FlexChart
FlexChart
Step Chart
Features
Sample
Settings
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.
Source
StepChartController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.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()); } } }
StepChart.cshtml
@model IEnumerable<StatisticMessage> @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } <script> function updateStepPosition(control, value) { control.options = { step: { position: value.toLowerCase() } }; } </script> @(Html.C1().FlexChart().Id(demoSettingsModel.ControlId) .ChartType(demoSettingsModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Step)) .Legend(l => l.Position(C1.Web.Mvc.Chart.Position.Top)) .AxisX(x => x.AxisLine(false).MajorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.None)) .AxisY(y => y.MajorGrid(false)) .Bind(Model) .BindingX("Month") .Series(sers => { sers.Add().Binding("SMS").Name("SMS Totals"); sers.Add().Binding("Email").Name("Email Totals"); }) .Options(o => o.Step(s => s.Position(StepPosition.Start))) ) @section Description{ <p>@Html.Raw(Resources.FlexChart.StepChart_Text0)</p> }
Documentation