FlexChart
FlexChart
Step Chart
This demo shows line, symbols and area step charts.
Features
Settings
Chart Type: Step
Step Position: 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 26 27 | 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()); } }} |
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 | @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>} |