Spread Windows Forms and the Funnel Chart

Funnel charts can be a useful tool in your application. For example, since Funnel charts show values across multiple stages, they can be used to find out how many sales leads convert to purchases. Spread for Windows Forms 10 now supports the Funnel chart. Creating a Funnel chart in Spread Win is simple. The following steps show how to create a Funnel chart.

  1. Create a series and add data and category names. 

    FarPoint.Win.Chart.FunnelSeries funnel = new FarPoint.Win.Chart.FunnelSeries();  
funnel.Values.Add(200);  
funnel.Values.Add(180);  
funnel.Values.Add(50);  
funnel.Values.Add(30);  
funnel.Values.Add(8);  
funnel.CategoryNames.Add("Leads");  
funnel.CategoryNames.Add("Emails Sent");  
funnel.CategoryNames.Add("Replies");  
funnel.CategoryNames.Add("Quotes");  
funnel.CategoryNames.Add("Purchases");

  2. Add any formatting. 

    funnel.BarFills.AddRange(new FarPoint.Win.Chart.GradientFill[] { new FarPoint.Win.Chart.GradientFill(Color.LightGreen, Color.Yellow), new FarPoint.Win.Chart.GradientFill(Color.LightBlue, Color.Thistle), new FarPoint.Win.Chart.GradientFill(Color.LightGray, Color.LightPink), new FarPoint.Win.Chart.GradientFill(Color.Beige, Color.Orange), new FarPoint.Win.Chart.GradientFill(Color.LightSalmon, Color.RosyBrown) });  
funnel.BarBorders.AddRange(new FarPoint.Win.Chart.Line[] { new FarPoint.Win.Chart.SolidLine(Color.DarkOliveGreen), new FarPoint.Win.Chart.SolidLine(Color.DarkBlue), new FarPoint.Win.Chart.SolidLine(Color.Black), new FarPoint.Win.Chart.SolidLine(Color.DarkOrange), new FarPoint.Win.Chart.SolidLine(Color.Firebrick) });

  3. Create the plot area and add the series to the plot area. 

    FarPoint.Win.Chart.YPlotArea plotArea = new FarPoint.Win.Chart.YPlotArea();  
plotArea.Location = new PointF(0.2f, 0.2f);  
plotArea.Size = new SizeF(0.6f, 0.6f);  
plotArea.Series.Add(funnel);

  4. Create a chart model and add the plot area to the chart model. 

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

  5. Create a chart object and add the model and set any size or position properties. 

    FarPoint.Win.Spread.Chart.SpreadChart chart = new FarPoint.Win.Spread.Chart.SpreadChart();  
chart.Model = model;  
chart.Left = 0;  
chart.Top = 150;  
chart.Size = new Size(600, 400);

  6. Add the chart. 

    fpSpread1.ActiveSheet.Charts.Add(chart);

winfunnelblog Funnel Chart The following is the complete code sample in C#: 

FarPoint.Win.Chart.FunnelSeries funnel = new FarPoint.Win.Chart.FunnelSeries();  
funnel.Values.Add(200);  
funnel.Values.Add(180);  
funnel.Values.Add(50);  
funnel.Values.Add(30);  
funnel.Values.Add(8);  
funnel.CategoryNames.Add("Leads");  
funnel.CategoryNames.Add("Emails Sent");  
funnel.CategoryNames.Add("Replies");  
funnel.CategoryNames.Add("Quotes");  
funnel.CategoryNames.Add("Purchases");  
funnel.BarFills.AddRange(new FarPoint.Win.Chart.GradientFill[] { new FarPoint.Win.Chart.GradientFill(Color.LightGreen, Color.Yellow), new FarPoint.Win.Chart.GradientFill(Color.LightBlue, Color.Thistle), new FarPoint.Win.Chart.GradientFill(Color.LightGray, Color.LightPink), new FarPoint.Win.Chart.GradientFill(Color.Beige, Color.Orange), new FarPoint.Win.Chart.GradientFill(Color.LightSalmon, Color.RosyBrown) });  
funnel.BarBorders.AddRange(new FarPoint.Win.Chart.Line[] { new FarPoint.Win.Chart.SolidLine(Color.DarkOliveGreen), new FarPoint.Win.Chart.SolidLine(Color.DarkBlue), new FarPoint.Win.Chart.SolidLine(Color.Black), new FarPoint.Win.Chart.SolidLine(Color.DarkOrange), new FarPoint.Win.Chart.SolidLine(Color.Firebrick) });  
FarPoint.Win.Chart.YPlotArea plotArea = new FarPoint.Win.Chart.YPlotArea();  
plotArea.Location = new PointF(0.2f, 0.2f);  
plotArea.Size = new SizeF(0.6f, 0.6f);  
plotArea.Series.Add(funnel);  
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.Left = 0;  
chart.Top = 150;  
chart.Size = new Size(600, 400);  
fpSpread1.ActiveSheet.Charts.Add(chart);  
fpSpread1.Font = new System.Drawing.Font("Calibri", 11);

The following is the complete code sample in VB: 

Dim funnel As New FarPoint.Win.Chart.FunnelSeries()  
funnel.Values.Add(200)  
funnel.Values.Add(180)  
funnel.Values.Add(50)  
funnel.Values.Add(30)  
funnel.Values.Add(8)  
funnel.CategoryNames.Add("Leads")  
funnel.CategoryNames.Add("Emails Sent")  
funnel.CategoryNames.Add("Replies")  
funnel.CategoryNames.Add("Quotes")  
funnel.CategoryNames.Add("Purchases")  
funnel.BarFills.AddRange(New FarPoint.Win.Chart.GradientFill() {New FarPoint.Win.Chart.GradientFill(Color.LightGreen, Color.Yellow), New FarPoint.Win.Chart.GradientFill(Color.LightBlue, Color.Thistle), New FarPoint.Win.Chart.GradientFill(Color.LightGray, Color.LightPink), New FarPoint.Win.Chart.GradientFill(Color.Beige, Color.Orange), New FarPoint.Win.Chart.GradientFill(Color.LightSalmon, Color.RosyBrown)})  
funnel.BarBorders.AddRange(New FarPoint.Win.Chart.Line() {New FarPoint.Win.Chart.SolidLine(Color.DarkOliveGreen), New FarPoint.Win.Chart.SolidLine(Color.DarkBlue), New FarPoint.Win.Chart.SolidLine(Color.Black), New FarPoint.Win.Chart.SolidLine(Color.DarkOrange), New FarPoint.Win.Chart.SolidLine(Color.Firebrick)})  
Dim plotArea As New FarPoint.Win.Chart.YPlotArea()  
plotArea.Location = New PointF(0.2F, 0.2F)  
plotArea.Size = New SizeF(0.6F, 0.6F)  
plotArea.Series.Add(funnel)  
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.Left = 0  
chart.Top = 150  
chart.Size = New Size(600, 400)  
FpSpread1.ActiveSheet.Charts.Add(chart)  
FpSpread1.Font = New System.Drawing.Font("Calibri", 11)

You can also add charts in the Spread Designer. Simply add the data to the designer, select the data, and then select the chart type (Insert, Create Chart dialog, and Funnel). winfunneldesign1 Add Data winfunneldesign2 Select Data and Chart Type winfunneldesign3 Funnel Chart

MESCIUS inc.

comments powered by Disqus