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.

Show Connector Lines:
Show Total Bar:
Randomize Data

// 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;
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AnalyticsWaterfallCharts
        public ActionResult AnalyticsWaterfallCharts()
        {
            return View();
        }
    }
}

<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"))
)