FlexChart
FlexChart
Waterfall
The Waterfall series is normally used to demonstrate how the starting position either increases or decreases through a series of changes.
Features
Settings
Relative Data: False
Connector Lines: True
Show Total: True
Show Intermediate Total: False
Description
The Waterfall series is normally used to demonstrate how the starting position either increases or decreases through a series 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 | using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; 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 | @ { ViewBag.DemoSettings = true ; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var showIntermediateTotal = demoSettingsModel.GetBool( "ShowIntermediateTotal" , false ); var waterfallStyle = new WaterfallStyles(); waterfallStyle.ConnectorLines = new SVGStyle { Stroke = "#333" , StrokeDasharray = "5 5" }; waterfallStyle.Start = new SVGStyle { Fill = "#7dc7ed" }; waterfallStyle.Falling = new SVGStyle { Fill = "#dd2714" , Stroke = "#a52714" }; waterfallStyle.Rising = new SVGStyle { Fill = "#0f9d58" , Stroke = "#0f9d58" }; waterfallStyle.IntermediateTotal = new SVGStyle { Fill = "#7dc7ed" }; var labels = new string [] { "Q1" , "Q2" , "Q3" , "Q4" }; var positions = new int [] { 3, 6, 9, 12 }; } @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> } < c1-flex-chart id = "@demoSettingsModel.ControlId" binding = "Value" binding-x = "Name" height = "300px" > < c1-items-source source-collection = "Model" /> < c1-flex-chart-waterfall relative-data = "false" show-total = "true" start = "1000" show-intermediate-total = "@showIntermediateTotal" intermediate-total-labels = "labels" intermediate-total-positions = "positions" connector-lines = "true" styles = "waterfallStyle" name = "Increase,Decrease,Total" /> </ c1-flex-chart > @section Description{ < p > @Html .Raw(FlexChartRes.Waterfall_Text0)</ p > } |