Spread Windows Forms and the Waterfall Chart

A Waterfall chart is a popular visualization tool that you can now use in Spread for Windows Forms, a Visual Studio .NET control. Spread for Windows Forms also supports many other chart types. You can see a list of the many product features on our web site at http://spread.grapecity.com/spread-studio/. Row after row of sales information can be time consuming to review. The Waterfall chart allows you to quickly see key items such as net profit when displaying company profits and expenses. waterfallchart Waterfall Chart You can easily create a Waterfall chart using the Spread Designer or code. Use the following steps to create a Waterfall chart with sales data in the Spread Designer. Refer to the following help topic for information about starting the Spread Designer: http://sphelp.grapecity.com/WebHelp/SpreadNet10/WF/webframe.html#spwin-spd-launch.html.

  1. Add your data to the designer.
  2. Select the Insert tab. waterfalldesign1 Chart Data
  3. Select the Waterfall chart in the Insert Chart dialog from the Other Charts option. waterfalldesign2 Add Chart
  4. Select OK. waterfalldesign3 Format Chart
  5. Double-click on the data point to select the data point you want to apply colors to.
  6. Right-click on the selected data point and choose the Format Data Point option. waterfalldesign4 Format Data Point
  7. Set the gradient color and then select Close. waterfalldesign5 Set Color

You have now created the sample using the Spread Windows Forms designer. Use the following steps to create the same Waterfall chart using code.

  1. Create a series object. 

    FarPoint.Win.Chart.WaterfallSeries wseries = new FarPoint.Win.Chart.WaterfallSeries();

  2. Create a series name. 

    wseries.SeriesName = "Series0";

  3. Add category names for your sales data. 

    wseries.CategoryNames.Add("Sales Revenue");  
wseries.CategoryNames.Add("Rent");  
wseries.CategoryNames.Add("Payroll");  
wseries.CategoryNames.Add("Other Expenses");  
wseries.CategoryNames.Add("Net Profit");

  4. Add your sales values to the series. 

    wseries.Values.Add(200000);  
wseries.Values.Add(-12000);  
wseries.Values.Add(-80000);  
wseries.Values.Add(-30000);  
wseries.Values.Add(78000);

  5. Add any borders or fills to improve the appearance of your chart. 

    wseries.Border = new FarPoint.Win.Chart.SolidLine(Color.Black);  
wseries.Fills.AddRange(new FarPoint.Win.Chart.Fill[] { null, new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange) , null});

  6. Create the plot area, set properties such as location, and add the series. 

    FarPoint.Win.Chart.YPlotArea plotArea = new FarPoint.Win.Chart.YPlotArea();  
plotArea.Location = new System.Drawing.PointF(0.2f, 0.2f);  
plotArea.Size = new System.Drawing.SizeF(0.6f, 0.6f);  
plotArea.Series.Add(wseries);  
plotArea.XAxis.Title = "Company Profit";  
plotArea.XAxis.TitleOffset = 30;

  7. Create a chart model object and add the plot area. 

    FarPoint.Win.Chart.ChartModel model = new FarPoint.Win.Chart.ChartModel();  
model.PlotAreas.Add(plotArea);

  8. Create a SpreadChart object, add the model, set additional properties such as the chart location, and then add the chart to the sheet. 

    FarPoint.Win.Spread.Chart.SpreadChart chart = new FarPoint.Win.Spread.Chart.SpreadChart();  
chart.Model = model;  
chart.Size = new Size(800, 400);  
chart.Location = new Point(100, 100);  
fpSpread1.Sheets[0].Charts.Add(chart);

waterfallchart These are all the steps you need to create a Waterfall chart in Spread for Windows Forms. Here is the complete example in C#: 

FarPoint.Win.Chart.WaterfallSeries wseries = new FarPoint.Win.Chart.WaterfallSeries();  
wseries.SeriesName = "Series0";  
wseries.CategoryNames.Add("Sales Revenue");  
wseries.CategoryNames.Add("Rent");  
wseries.CategoryNames.Add("Payroll");  
wseries.CategoryNames.Add("Other Expenses");  
wseries.CategoryNames.Add("Net Profit");  
wseries.Values.Add(200000);  
wseries.Values.Add(-12000);  
wseries.Values.Add(-80000);  
wseries.Values.Add(-30000);  
wseries.Values.Add(78000);  
wseries.Border = new FarPoint.Win.Chart.SolidLine(Color.Black);  
wseries.Fills.AddRange(new FarPoint.Win.Chart.Fill[] { null, new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange) , null});  
FarPoint.Win.Chart.YPlotArea plotArea = new FarPoint.Win.Chart.YPlotArea();  
plotArea.Location = new System.Drawing.PointF(0.2f, 0.2f);  
plotArea.Size = new System.Drawing.SizeF(0.6f, 0.6f);  
plotArea.Series.Add(wseries);  
plotArea.XAxis.Title = "Company Profit";  
plotArea.XAxis.TitleOffset = 30;  
FarPoint.Win.Chart.ChartModel model = new FarPoint.Win.Chart.ChartModel();  
model.PlotAreas.Add(plotArea);  
FarPoint.Win.Spread.Chart.SpreadChart chart = new FarPoint.Win.Spread.Chart.SpreadChart();  
chart.Model = model;  
chart.Size = new Size(800, 400);  
chart.Location = new Point(100, 100);  
fpSpread1.Sheets[0].Charts.Add(chart);

Here is the complete example in Visual Basic: 

Dim wseries As New FarPoint.Win.Chart.WaterfallSeries()  
wseries.SeriesName = "Series0"  
wseries.CategoryNames.Add("Sales Revenue")  
wseries.CategoryNames.Add("Rent")  
wseries.CategoryNames.Add("Payroll")  
wseries.CategoryNames.Add("Other Expenses")  
wseries.CategoryNames.Add("Net Profit")  
wseries.Values.Add(200000)  
wseries.Values.Add(-12000)  
wseries.Values.Add(-80000)  
wseries.Values.Add(-30000)  
wseries.Values.Add(78000)  
wseries.Border = New FarPoint.Win.Chart.SolidLine(Color.Black)  
wseries.Fills.AddRange(New FarPoint.Win.Chart.Fill() {Nothing, New FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), New FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange),  
New FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), Nothing})  
Dim plotArea As New FarPoint.Win.Chart.YPlotArea()  
plotArea.Location = New System.Drawing.PointF(0.2F, 0.2F)  
plotArea.Size = New System.Drawing.SizeF(0.6F, 0.6F)  
plotArea.Series.Add(wseries)  
plotArea.XAxis.Title = "Company Profit"  
plotArea.XAxis.TitleOffset = 30  
Dim model As New FarPoint.Win.Chart.ChartModel()  
model.PlotAreas.Add(plotArea)  
Dim chart As New FarPoint.Win.Spread.Chart.SpreadChart()  
chart.Model = model  
chart.Size = New Size(800, 400)  
chart.Location = New Point(100, 100)  
FpSpread1.Sheets(0).Charts.Add(chart)

You can also use a data source for the chart. For example: C# 

object[] values = new object[] { 200000, -12000, -80000, -30000, 78000 };  
string[] names = new string[] { "Sales Revenue", "Rent", "Payroll", "Other Expenses", "Net Profit" };  
FarPoint.Win.Chart.WaterfallSeries wseries = new FarPoint.Win.Chart.WaterfallSeries();  
wseries.Values.DataSource = values;  
wseries.SeriesName = "Series0";  
wseries.CategoryNames.DataSource = names;  
wseries.Border = new FarPoint.Win.Chart.SolidLine(Color.Black);  
wseries.Fills.AddRange(new FarPoint.Win.Chart.Fill[] { null, new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), new FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), new  
FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), null });  
FarPoint.Win.Chart.YPlotArea plotArea = new FarPoint.Win.Chart.YPlotArea();  
plotArea.Location = new System.Drawing.PointF(0.2f, 0.2f);  
plotArea.Size = new System.Drawing.SizeF(0.6f, 0.6f);  
plotArea.Series.Add(wseries);  
plotArea.XAxis.Title = "Company Profit";  
plotArea.XAxis.TitleOffset = 30;  
FarPoint.Win.Chart.ChartModel model = new FarPoint.Win.Chart.ChartModel();  
model.PlotAreas.Add(plotArea);  
FarPoint.Win.Spread.Chart.SpreadChart chart = new FarPoint.Win.Spread.Chart.SpreadChart();  
chart.Model = model;  
chart.Size = new Size(800, 400);  
chart.Location = new Point(100, 100);  
fpSpread1.Sheets[0].Charts.Add(chart);

Visual Basic 

Dim values As Object() = {200000, -12000, -80000, -30000, 78000}  
Dim names As String() = {"Sales Revenue", "Rent", "Payroll", "Other Expenses", "Net Profit"}  
Dim wseries As New FarPoint.Win.Chart.WaterfallSeries()  
wseries.Values.DataSource = values  
wseries.SeriesName = "Series0"  
wseries.CategoryNames.DataSource = names  
wseries.Border = New FarPoint.Win.Chart.SolidLine(Color.Black)  
wseries.Fills.AddRange(New FarPoint.Win.Chart.Fill() {Nothing, New FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), New FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange),  
New FarPoint.Win.Chart.GradientFill(Color.Red, Color.Orange), Nothing})  
Dim plotArea As New FarPoint.Win.Chart.YPlotArea()  
plotArea.Location = New System.Drawing.PointF(0.2F, 0.2F)  
plotArea.Size = New System.Drawing.SizeF(0.6F, 0.6F)  
plotArea.Series.Add(wseries)  
plotArea.XAxis.Title = "Company Profit"  
plotArea.XAxis.TitleOffset = 30  
Dim model As New FarPoint.Win.Chart.ChartModel()  
model.PlotAreas.Add(plotArea)  
Dim chart As New FarPoint.Win.Spread.Chart.SpreadChart()  
chart.Model = model  
chart.Size = New Size(800, 400)  
chart.Location = New Point(100, 100)  
FpSpread1.Sheets(0).Charts.Add(chart)

You can download a trial of Spread for Windows Forms here: http://spread.grapecity.com/downloads/. You can find more information about Spread Studio .NET here: http://spread.grapecity.com/spread-studio/.

MESCIUS inc.

comments powered by Disqus