Waterfall
Waterfall charts help in understanding the cumulative effect of sequentially introduced positive or negative values. The Waterfall chart is also known as a "flying bricks" chart or Mario chart due to the apparent suspension of columns in mid-air.
To create a Waterfall chart, follow these steps:
- Create a Waterfall series object,
- Configure the Waterfall series by setting its name and bindingproperties, and
- Set additional properties such as showOutliers and showInnerPoints if you want to fine-tune the Waterfall display.
- C1FlexChart/AnalyticsWaterfallCharts.js
- AnalyticsWaterfallChartsController.cs
- AnalyticsWaterfallCharts.cshtml
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 | // This file locates: "Scripts/Lesson/C1FlexChart/AnalyticsWaterfallCharts.js". c1.documentReady(function () { var theChart = wijmo.Control.getControl( '#theChart' ); theChart.itemsSource = getData(); // create Waterfall series for 'sales' and add it to the chart var sales = new wijmo.chart.analytics.Waterfall(); sales.name = 'Sales' ; sales.binding = 'sales' ; sales.styles = { start: { fill: 'blue' , stroke: 'blue' }, total: { fill: 'yellow' , stroke: 'yellow' }, falling: { fill: 'red' , stroke: 'red' }, rising: { fill: 'green' , stroke: 'green' }, connectorLines: { stroke: 'blue' , 'stroke-dasharray' : '3, 1' } }; theChart.series.push(sales); // customize the Waterfall series document.getElementById( 'connectorLines' ).addEventListener( 'click' , function (e) { sales.connectorLines = e.target. checked ; }); document.getElementById( 'showTotal' ).addEventListener( 'click' , function (e) { sales.showTotal = e.target. checked ; }); // randomize the data document.getElementById( 'btnRandomize' ).addEventListener( 'click' , function () { theChart.itemsSource = getData(); }); // create some data function getData() { var data = [] date = new Date(); for (var month = 0; month < 12; month++) { data.push({ date: date, sales: (Math.random() - .4) * 1000 }); date = wijmo.DateTime.addMonths(date, 1); } return data; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: AnalyticsWaterfallCharts public ActionResult AnalyticsWaterfallCharts() { return View(); } } } |
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 | < h1 > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text1) </ p > < p > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text2) </ p > < ol > < li > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text3) </ li > < li > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text4) </ li > < li > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text5) </ li > </ ol > < div class = "demo-settings" > < label for = "connectorLines" > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text6) </ label > < input id = "connectorLines" type = "checkbox" >< br /> < label for = "showTotal" > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text7) </ label > < input id = "showTotal" type = "checkbox" >< br /> < label for = "btnRandomize" > @Html .Raw(Resources.C1FlexChart.AnalyticsWaterfallCharts_Text8)</ label > < button id = "btnRandomize" class = "btn btn-default" > @Resources .Resource.Btn_Go </ button > </ div > @ (Html.C1().FlexChart().Id( "theChart" ) .BindingX( "date" ) .Legend(C1.Web.Mvc.Chart.Position.None) .AxisX(x=>x.Format( "MMM yy" )) ) |