FlexChart
FlexChart
Waterfall
The Waterfall series is used to demonstrate how the starting position of the series either increases or decreases through a sequence of changes.
Features
Settings
Relative Data: False
Connector Lines: True
Show Total: True
Show Intermediate Total: False
Description
The Waterfall series is used to demonstrate how the starting position of the series either increases or decreases through a sequence of changes.
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 | 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;namespace MvcExplorer.Controllers{ public partial class FlexChartController : Controller { List<WaterfallData> _data = WaterfallData.GetData(); public ActionResult Waterfall() { var settings = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"RelativeData", new object[] {false, true}}, {"ConnectorLines", new object[] {true, false}}, {"ShowTotal", new object[] {true, false}}, {"ShowIntermediateTotal", new object[] {false, true}} } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(_data); } }} |
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 | @model IEnumerable<WaterfallData>@section Scripts{<script> function customChangeRelativeData(control, value) { control.series[0].relativeData = value; } function customChangeConnectorLines(control, value) { control.series[0].connectorLines = value; } function customChangeShowTotal(control, value) { control.series[0].showTotal = value; } function customChangeShowIntermediateTotal(control, value) { control.series[0].showIntermediateTotal = value; }</script>}@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;}@(Html.C1().FlexChart() .Id(demoSettingsModel.ControlId) .Bind("Name", "Value", Model) .Series(ser => { ser.AddWaterfall().RelativeData(false) .ConnectorLines(true) .ShowTotal(true) .ShowIntermediateTotal(demoSettingsModel.GetBool("ShowIntermediateTotal", false)) .IntermediateTotalLabels("Q1", "Q2", "Q3", "Q4") .IntermediateTotalPositions(3, 6, 9, 12) .Name("Increase, Decrease,Total") .Styles(s => s.ConnectorLines(cnt => cnt.StrokeDasharray("5 5").Stroke("#333")) .Start(start => start.Fill("#7dc7ed")) .Falling(falling => falling.Fill("#dd2714").Stroke("#a52714")) .Rising(rising => rising.Fill("#0f9d58").Stroke("#0f9d58")) .IntermediateTotal(intotal => intotal.Fill("#7dc7ed"))); }) .Height("300px"))@section Description{ <p>@Html.Raw(Resources.FlexChart.Waterfall_Text0)</p>} |