Tables in F#
How to make tables in F# with Plotly.
Plotly is known for its graphing libraries, but it's also a broader ecosystem for building interactive data apps, AI data analysis tools, and deploying and hosting Dash apps. Explore the full set of tools and platforms designed to help turn data into action. Discover Plotly.
Note: We are retiring documentation for R, MATLAB, Julia, and F#. Learn more about this change here.
In [1]:
#r "nuget: Plotly.NET, 2.0.0-preview.8"
#r "nuget: Plotly.NET.Interactive, 2.0.0-preview.8"
#r "nuget: FSharp.Data"
#r "nuget:Deedle"
Basic Table¶
Chart.Table provides a Table object for detailed data viewing. The data are arranged in a grid of rows and columns. Most styling can be specified for header, columns, rows or individual cells. Table is using a column-major order, ie. the grid is represented as a vector of column vectors.
In [2]:
open Plotly.NET
let header = ["A Scores";"B Scores"]
let rows =
[
[100; 95]
[90; 85]
[80; 75]
[90; 95]
]
Chart.Table(header, rows)
Out[2]:
Styled Table¶
Chart.Table provides several properties for styling as shown below
In [3]:
let header = ["A Scores";"B Scores"]
let rows =
[
[100; 95]
[90; 85]
[80; 75]
[90; 95]
]
let headerLineStyle = Line.init(Color=Color.fromString "#2f4f4f")
let cellLineStyle = Line.init(Color=Color.fromString "#2f4f4f")
let width = 500.0
let height = 300.0
Chart.Table(header,
rows,
AlignHeader = [StyleParam.HorizontalAlign.Left],
AlignCells = [StyleParam.HorizontalAlign.Left],
ColorHeader = Color.fromString "#87CEFA",
ColorCells = Color.fromString "#E0FFFF",
LineHeader = headerLineStyle,
LineCells = cellLineStyle)
|> Chart.withSize (width, height)
Out[3]:
Using a Dataframe¶
In [4]:
open FSharp.Data
open Plotly.NET
open Deedle
let data = CsvFile.Load(@"https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv")
let headers = match data.Headers with
| Some h -> h
| None -> [||]
let rows = data.Rows |> Seq.map(fun r -> [r.GetColumn("Rank")
r.GetColumn("State")
r.GetColumn("Postal")
r.GetColumn("Population")])
Chart.Table(headers,
rows,
AlignHeader = [StyleParam.HorizontalAlign.Left],
AlignCells = [StyleParam.HorizontalAlign.Left],
ColorHeader = Color.fromString "#AFEEEE",
ColorCells = Color.fromString "#E6E6FA")
Out[4]:
Changing Row and Column Size¶
In [5]:
open Plotly.NET
let loremIpsum = "Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad"
let headers = [ "<b>EXPENSES</b><br>as of July 2017"; "<b>DESCRIPTION</b>"]
let rows = [
["Salaries"; loremIpsum]
["Office"; loremIpsum]
["Merchandise"; loremIpsum]
["Legal"; loremIpsum]
["<b>TOTAL<br>EXPENSES</b>"; loremIpsum]
]
let cellColors = [Color.fromString "#AFEEEE"; Color.fromString "#FFFFFF"]
|> Color.fromColors
Chart.Table(headers,
rows,
AlignHeader = [StyleParam.HorizontalAlign.Left],
AlignCells = [StyleParam.HorizontalAlign.Left],
ColumnWidth = [80; 400],
ColumnOrder = [1;2],
ColorHeader = Color.fromString "#4169E1",
FontHeader = Font.init(Color=Color.fromString "#FFFFFF"),
ColorCells = cellColors)
|> Chart.withSize (800.0, 500.0)
Out[5]:
Alternating Row Colors¶
setting a 2D color array for ColorCells can create an alternaring row colors as shown below
In [6]:
open Plotly.NET
open System
let headers = ["<b>EXPENSES</b>";"<b>Q1</b>";"<b>Q2</b>";"<b>Q3</b>";"<b>Q4</b>"]
type CellValue = | Subtitle of string | Amount of int
let renderCellValue value = match value with
| Subtitle v -> v
| Amount v -> v.ToString()
let rows = [ ["Salaries"; "1200000" ; "1300000" ; "1300000" ; "1400000" ];
[ "Office"; "20000"; "20000"; "20000"; "20000"];
[ "Merchandise"; "80000"; "70000"; "120000"; "90000"];
["Legal"; "2000"; "2000"; "2000"; "2000" ];
["<b>TOTAL</b>"; "12120000"; "130902000"; "131222000"; "1410200"] ]
let headerColor = Color.fromString "grey"
let rowEvenColor = Color.fromString "lightgrey"
let rowOddColor = Color.fromString "white"
let cellColors = [[for i in 0..rows.Length-1 -> if (i%2 = 0) then rowEvenColor else rowOddColor]
|> Color.fromColors] |> Color.fromColors
Chart.Table(headers,
rows,
AlignHeader = [StyleParam.HorizontalAlign.Left],
AlignCells = [StyleParam.HorizontalAlign.Left; StyleParam.HorizontalAlign.Center],
ColorHeader = headerColor,
FontHeader = Font.init(Color=Color.fromString "#FFFFFF"),
ColorCells = cellColors)
Out[6]:
Row Color Based on Variable¶
In [7]:
open Plotly.NET
let headers = ["Color"; "<b>YEAR</b>"]
let rows = [
["#EFF3FF"; "2010"];
["#BDD7E7"; "2011"];
["#6BAED6"; "2012"];
["#3182BD"; "2013"];
["#08519C"; "2014"]
];
let cellColors = [["#EFF3FF"; "#BDD7E7"; "#6BAED6"; "#3182BD"; "#08519C"]]
|> Seq.map (fun ca -> ca
|> Seq.map (fun c -> Color.fromString c)
|> Color.fromColors)
|> Color.fromColors
Chart.Table(headers,
rows,
ColorCells = cellColors )
Out[7]:
Cell Color Based on Variable¶
In [8]:
let headers = ["<b>Column A</b>"; "<b>Column B</b>"; "<b>Column C</b>"]
let rows = [
["5"; "5"; "6"]
["8"; "2"; "7"]
["5"; "4"; "6"]
["0"; "2"; "1"]
["0"; "4"; "0"]
["1"; "7"; "1"]
["7"; "7"; "8"]
["6"; "1"; "8"]
["2"; "7"; "3"]
["4"; "0"; "8"]
];
let random = new Random()
let cellColors = [for i in 0..rows.Length-1 ->
[for j in 0..2 -> Color.fromString (String.Format("#{0:X6}", random.Next(0x1000000)))]
|> Color.fromColors]
|> Color.fromColors
Chart.Table(headers,
rows,
ColorCells = cellColors,
FontCells = Font.init(Color=Color.fromString "#FFFFFF"))
Out[8]: