ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / FlexChart Elements / FlexChart Series / Waterfall Series
In This Topic
    Waterfall Series
    In This Topic

    Waterfall series allows you to understand the cumulative effect of sequential positive or negative values. It is useful to understand the effect of a series of positive and negative values on an initial value. The series depicts color coded columns to easily distinguish positive values from negative values. Generally initial and final values are depicted by total columns, while intermediate values are represented by floating columns. It is recommended to use Waterfall series when there is a column of category text and a mix of positive and negative values. Such cases are mostly found in quantitative analysis like inventory analysis or performance analysis, where the chart shows the gradual transition in the quantitative value of an entity subjected to increment or decrement.

    FlexChart provides features that can be implemented and customized for enhanced data visualization through Waterfall series. 

    The following image displays Waterfall series displaying the cumulative effect of sequential positive and negative values.

    To use the Waterfall series in FlexChart, create an instance of the Waterfall class, which inherits the Series class, and add the created instance to the FlexChart Series collection using the Series property provided by the C1FlexChart class.

    The following code snippet illustrates how to set various properties while working with Waterfall series in FlexChart. The code snippet first creates a class DataCreator to generate data for the chart, and then binds the series to the data source.

    Class DataCreator
        Public Shared Function CreateData() As List(Of DataItem)
            Dim data = New List(Of DataItem)()
            data.Add(New DataItem("Product Revenue", 420))
            data.Add(New DataItem("Services Revenue", -180))
            data.Add(New DataItem("Fixed Costs", 130))
            data.Add(New DataItem("Variable Costs", -20))
            Return data
        End Function
    End Class
    
    Public Class DataItem
        Public Sub New(costs__1 As String, amount__2 As Integer)
            Costs = costs__1
            Amount = amount__2
        End Sub
    
        Public Property Costs() As String
            Get
                Return m_Costs
            End Get
            Set
                m_Costs = Value
            End Set
        End Property
        Private m_Costs As String
        Public Property Amount() As Integer
            Get
                Return m_Amount
            End Get
            Set
                m_Amount = Value
            End Set
        End Property
        Private m_Amount As Integer
    End Class
    
    using System.Collections.Generic;
    
    namespace Waterfall
    {
        class DataCreator
        {
            public static List<DataItem> CreateData()
            {
                var data = new List<DataItem>();
                data.Add(new DataItem("Product Revenue", 420));
                data.Add(new DataItem("Services Revenue", -180));
                data.Add(new DataItem("Fixed Costs", 130));
                data.Add(new DataItem("Variable Costs", -20));
                return data;
            }
        }
    
        public class DataItem
        {
            public DataItem(string costs, int amount)
            {
                Costs = costs;
                Amount = amount;
            }
    
            public string Costs { get; set; }
            public int Amount { get; set; }
        }
    }
    

     

    Here is the code snippet for binding the FlexChart to the data source.

    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Waterfall"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Chart="using:C1.Xaml.Chart" 
        xmlns:Foundation="using:Windows.Foundation"
        x:Class="Waterfall.MainPage"
        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
        mc:Ignorable="d" Height="528.558" Width="712.292">
        <Grid Margin="-140,0,-223.667,-0.333">
            <Chart:C1FlexChart x:Name="flexChart"
                            BindingX="Costs" 
                            ItemsSource="{Binding DataContext.Data}"  Margin="10,127,10,10">
                <Chart:C1FlexChart.Series>
                    <Chart:Waterfall Binding="Amount" ConnectorLines="True" ShowTotal="True" 
                           ShowIntermediateTotal="True">
                        <Chart:Waterfall.StartStyle>
                            <Chart:ChartStyle Fill="#7dc7ed" />
                        </Chart:Waterfall.StartStyle>
                        <Chart:Waterfall.FallingStyle>
                            <Chart:ChartStyle Fill="#dd2714" />
                        </Chart:Waterfall.FallingStyle>
                        <Chart:Waterfall.RisingStyle>
                            <Chart:ChartStyle Fill="#0f9d58" Stroke="#0f9d58" />
                        </Chart:Waterfall.RisingStyle>
                        <Chart:Waterfall.IntermediateTotalStyle>
                            <Chart:ChartStyle Fill="#7dc7ed" />
                        </Chart:Waterfall.IntermediateTotalStyle>
                        <Chart:Waterfall.TotalStyle>
                            <Chart:ChartStyle Fill="#7dc7ed" />
                        </Chart:Waterfall.TotalStyle>
                        <Chart:Waterfall.ConnectorLineStyle>
                            <Chart:ChartStyle Stroke="#333" StrokeDashArray="5,5"/>
                        </Chart:Waterfall.ConnectorLineStyle>
                    </Chart:Waterfall>
                </Chart:C1FlexChart.Series>
                <Chart:C1FlexChart.AxisY>
                    <Chart:Axis Min="0" Max="500"></Chart:Axis>
                </Chart:C1FlexChart.AxisY>
            </Chart:C1FlexChart>
        </Grid>
    </Page>
    
    C#
    Copy Code
    // clear the FlexChart series collection
    flexChart.Series.Clear();
    
    // create an instance of the Waterfall series
    C1.Xaml.Chart.Waterfall waterFall = new C1.Xaml.Chart.Waterfall();
    
    // add the instance to Series collection
    flexChart.Series.Add(waterFall);
    
    // bind the field containing Y values for the series
    waterFall.Binding = "Amount";
    
    // bind the field containing X values for the FlexChart
    flexChart.BindingX = "Costs";
    
    // set the ConnectorLines property
    waterFall.ConnectorLines = true;
    
    // set the ShowTotal property
    waterFall.ShowTotal = true;
    
                   
    VB
    Copy Code
    ' clear the FlexChart series collection
    flexChart.Series.Clear()
    
    ' create an instance of the Waterfall series
    Dim waterFall As New C1.Xaml.Chart.Waterfall()
    
    ' add the instance to Series collection
    flexChart.Series.Add(waterFall)
    
    ' bind the field containing Y values for the series
    waterFall.Binding = "Amount"
    
    ' bind the field containing X values for the FlexChart
    flexChart.BindingX = "Costs"
    
    ' set the ConnectorLines property
    waterFall.ConnectorLines = True
    
    ' set the ShowTotal property
    waterFall.ShowTotal = True