Funnel Chart in F#

How to make funnel-chart plots in F# with Plotly.

In [1]:

#r "nuget: Newtonsoft.Json, 12.0.3"
#r "nuget: Plotly.NET,  2.0.0-preview.10"
#r "nuget: Plotly.NET.Interactive,  2.0.0-preview.10"

Installed Packages

Newtonsoft.Json, 12.0.3
Plotly.NET, 2.0.0-preview.10
Plotly.NET.Interactive, 2.0.0-preview.10

Loading extensions from Plotly.NET.Interactive.dll

Added Kernel Extension including formatters for Plotly.NET charts.

Introduction¶

Funnel charts are often used to represent data in different stages of a business process. It’s an important mechanism in Business Intelligence to identify potential problem areas of a process. For example, it’s used to observe the revenue or loss in a sales process for each stage, and displays values that are decreasing progressively. Each stage is illustrated as a percentage of the total of all values.

Basic Funnel Chart¶

In [2]:

open Plotly.NET

let y = ["Website visit"; "Downloads"; "Potential customers"; "Requested price"; "invoice sent"]
let x = [39.; 27.4; 20.6; 11.; 2.]

Chart.Funnel(x,y)
|> Chart.withMarginSize(Left=150.)

Out[2]:

Setting Marker Size and Color¶

This example uses TextPosition and TextInfo to determine information appears on the graph, and shows how to customize the bars.

In [3]:

open Plotly.NET
open Plotly.NET.TraceObjects

let y = ["Website visit"; "Downloads"; "Potential customers"; "Requested price"; "invoice sent"]
let x = [39.; 27.4; 20.6; 11.; 2.]

let colors = ["deepskyblue";"lightsalmon"; "tan"; "teal"; "silver"]
                |> Seq.map (fun c -> Color.fromString c)
                |> Color.fromColors

let lineColors = ["wheat";"wheat"; "blue"; "wheat"; "wheat"]
                    |> Seq.map (fun c -> Color.fromString c)
                    |> Color.fromColors

let connector =
    FunnelConnector.init (
        Line = Line.init (Color = Color.fromString "royalblue", Dash = StyleParam.DrawingStyle.Dash, Width = 3.)
    )

Chart.Funnel(x, y, TextPosition = StyleParam.TextPosition.Inside, Opacity = 0.65, Connector = connector)
|> GenericChart.mapTrace
    (fun t ->
        t?textinfo <- "value+percent initial"
        t)
|> Chart.withMarkerStyle (Color = colors, Outline = Line.init (Color = lineColors, Width = 3.))

Out[3]:

Stacked Funnel Plot¶

In [4]:

let y = ["Website visit"; "Downloads"; "Potential customers"; "Requested price"]

let chart1 = Chart.Funnel([120; 60; 30; 20],y,Name="Montreal")
                |> GenericChart.mapTrace(fun t -> t?textinfo <- "value+percent initial";t)

let chart2 = Chart.Funnel(
                    [ 100; 60; 40; 30; 20 ],
                    y,
                    TextPosition = StyleParam.TextPosition.Inside,
                    Orientation = StyleParam.Orientation.Horizontal,
                    Name = "Toronto"
                )|> GenericChart.mapTrace(fun t -> t?textinfo <- "value+percent previous";t)

let final = y@ ["Finalized"]
let chart3 = Chart.Funnel(
                    [ 90; 70; 50; 30; 10; 5],
                    final,
                    TextPosition = StyleParam.TextPosition.Outside,
                    Orientation = StyleParam.Orientation.Horizontal,
                    Name = "Vancouver"
                ) |> GenericChart.mapTrace(fun t -> t?textinfo <- "value+percent total";t)

[chart1;chart2;chart3]
|> Chart.combine
|> Chart.withMarginSize(Left=150.)
|> Chart.withSize(Width=800)
|> Chart.withLayout(Layout.init(PlotBGColor=Color.fromString "#e5ecf6"))

Out[4]:

Basic Area Funnel Plot¶

In [5]:

open Plotly.NET

Chart.FunnelArea(Text=["The 1st";"The 2nd"; "The 3rd"; "The 4th"; "The 5th"],Values=[5; 4; 3; 2; 1])

Out[5]:

Set Marker Size and Color in Area Funnel Plots¶

In [6]:

open Plotly.NET

let colors = ["deepskyblue";"lightsalmon"; "tan"; "teal"; "silver"]
                |> Seq.map (fun c -> Color.fromString c)
                
let lineColors = ["wheat";"wheat"; "blue"; "wheat"; "wheat"]
                    |> Seq.map (fun c -> Color.fromString c)
                    |> Color.fromColors

Chart.FunnelArea(
    Text =
        [ "The 1st"
          "The 2nd"
          "The 3rd"
          "The 4th"
          "The 5th" ],
    Values = [ 5; 4; 3; 2; 1 ],
    Insidetextfont =
        Font.init (Family = StyleParam.FontFamily.Old_Standard_TT, Size = 13., Color = Color.fromString "black"),
    Opacity = 0.65
)
|> Chart.withMarkerStyle (Colors = colors, Outline = Line.init (Color = lineColors, Width = 4.))

Out[6]: