Logo Plotly.NET

Tables

Binder  Notebook

This example shows how to create tables in F#.

Let's first create some data for the purpose of creating example charts:

open Plotly.NET
open Plotly.NET.StyleParam


let table1 =
    Chart.Table(
        headerValues = [ "<b>RowIndex</b>"; "A"; "simple"; "table" ],
        cellsValues = [ [ "0"; "I"; "am"; "a" ]; [ "1"; "little"; "example"; "!" ] ]
    )

A little bit of styling:

let table2 =
    let header = [ "<b>RowIndex</b>"; "A"; "simple"; "table" ]
    let rows = [ [ "0"; "I"; "am"; "a" ]; [ "1"; "little"; "example"; "!" ] ]

    Chart.Table(
        headerValues = header,
        cellsValues = rows,
        HeaderAlign = StyleParam.HorizontalAlign.Center,
        CellsMultiAlign =
            [ StyleParam.HorizontalAlign.Left
              StyleParam.HorizontalAlign.Center
              StyleParam.HorizontalAlign.Right ],
        HeaderFillColor = Color.fromString "#45546a",
        CellsFillColor =
            Color.fromColors
                [ Color.fromString "#deebf7"
                  Color.fromString "lightgrey"
                  Color.fromString "#deebf7"
                  Color.fromString "lightgrey" ],
        HeaderHeight = 30,
        HeaderOutlineColor = Color.fromString "black",
        HeaderOutlineWidth = 2.,
        MultiColumnWidth = [ 70.; 50.; 100.; 70. ],
        ColumnOrder = [ 1; 2; 3; 4 ]
    )

Value dependent cell coloring:

let table3 =
    let header2 = [ "Identifier"; "T0"; "T1"; "T2"; "T3" ]

    let rowvalues =
        [ [ 10001.; 0.2; 2.0; 4.0; 5.0 ]
          [ 10002.; 2.1; 2.0; 1.8; 2.1 ]
          [ 10003.; 4.5; 3.0; 2.0; 2.5 ]
          [ 10004.; 0.0; 0.1; 0.3; 0.2 ]
          [ 10005.; 1.0; 1.6; 1.8; 2.2 ]
          [ 10006.; 1.0; 0.8; 1.5; 0.7 ]
          [ 10007.; 2.0; 2.0; 2.1; 1.9 ] ]
        |> Seq.sortBy (fun x -> x.[1])

    //map color from value to hex representation
    let mapColor min max value =
        let proportion = (255. * (value - min) / (max - min)) |> int
        Color.fromRGB 255 (255 - proportion) proportion

    //Assign a color to every cell seperately. Matrix must be transposed for correct orientation.
    let cellcolor =
        rowvalues
        |> Seq.map (fun row ->
            row
            |> Seq.mapi (fun index value ->
                if index = 0 then
                    Color.fromString "white"
                else
                    mapColor 0. 5. value))
        |> Seq.transpose
        |> Seq.map Color.fromColors
        |> Color.fromColors

    Chart.Table(headerValues = header2, cellsValues = rowvalues, CellsFillColor = cellcolor)

Sequence representation:

let table4 =
    let sequence =
        [ "ATGAGACGTCGAGACTGATAGACGTCGATAGACGTCGATAGACCG"
          "ATAGACTCGTGATAGACGTCGATAGACGTCGATAGAGTATAGACC"
          "GTGATAGACGTCGAGAAGACGTCGATAGACGTCGATAGACGTCGA"
          "TAGAGATAGACGTCGATAGACCGTATAGAAGACGTCGATAGATAG"
          "ACGTCGATAGACCGTAGACGTCGATAGACGTCGATAGACCGT" ]
        |> String.concat ""

    let elementsPerRow = 60

    let headers =
        [ 0..elementsPerRow ]
        |> Seq.map (fun x -> if x % 10 = 0 && x <> 0 then "|" else "")

    let cells =
        sequence
        |> Seq.chunkBySize elementsPerRow
        |> Seq.mapi (fun i x -> Seq.append [ string (i * elementsPerRow) ] (Seq.map string x))

    let cellcolors =
        cells
        |> Seq.map (fun row ->
            row
            |> Seq.map (fun element ->
                match element with
                //colors taken from DRuMS
                //(http://biomodel.uah.es/en/model4/dna/atgc.htm)
                | "A" -> Color.fromString "#5050FF"
                | "T" -> Color.fromString "#E6E600"
                | "G" -> Color.fromString "#00C000"
                | "C" -> Color.fromString "#E00000"
                | "U" -> Color.fromString "#B48100"
                | _ -> Color.fromString "white"))
        |> Seq.transpose
        |> Seq.map (fun x -> Seq.append x (seq [ Color.fromString "white" ]))
        |> Seq.map Color.fromColors
        |> Color.fromColors

    let line = Line.init (Width = 0., Color = Color.fromString "white")
    let chartwidth = 50 + 10 * elementsPerRow

    Chart.Table(
        headerValues = headers,
        cellsValues = cells,
        CellsOutline = line,
        HeaderOutline = line,
        CellsHeight = 20,
        MultiColumnWidth = [ 50.; 10. ],
        CellsMultiAlign = [ StyleParam.HorizontalAlign.Right; StyleParam.HorizontalAlign.Center ],
        CellsFillColor = cellcolors,
        UseDefaults = false
    )
    |> Chart.withSize (Width = chartwidth)
    |> Chart.withTitle "Sequence A"
namespace Plotly
namespace Plotly.NET
module Defaults from Plotly.NET
<summary> Contains mutable global default values. Changing these values will apply the default values to all consecutive Chart generations. </summary>
val mutable DefaultDisplayOptions: Plotly.NET.DisplayOptions
Multiple items
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addChartDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getChartDescription: displayOpts: DisplayOptions -> XmlNode list static member getDocumentCharset: displayOpts: DisplayOptions -> string static member getDocumentDescription: displayOpts: DisplayOptions -> string static member getDocumentFavicon: displayOpts: DisplayOptions -> XmlNode ...

--------------------
new: unit -> Plotly.NET.DisplayOptions
static member Plotly.NET.DisplayOptions.init: ?DocumentTitle: string * ?DocumentCharset: string * ?DocumentDescription: string * ?DocumentFavicon: Giraffe.ViewEngine.HtmlElements.XmlNode * ?AdditionalHeadTags: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?ChartDescription: Giraffe.ViewEngine.HtmlElements.XmlNode list * ?PlotlyJSReference: Plotly.NET.PlotlyJSReference -> Plotly.NET.DisplayOptions
type PlotlyJSReference = | CDN of string | Full | Require of string | NoReference
<summary> Sets how plotly is referenced in the head of html docs. </summary>
union case Plotly.NET.PlotlyJSReference.NoReference: Plotly.NET.PlotlyJSReference
module StyleParam from Plotly.NET
val table1: GenericChart
type Chart = static member Bubble: x: #IConvertible seq * y: #IConvertible seq * sizes: int seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Line: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Point: x: #IConvertible seq * y: #IConvertible seq * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads static member Range: x: #IConvertible seq * y: #IConvertible seq * upper: #IConvertible seq * lower: #IConvertible seq * mode: Mode * ?Name: string * ?GroupName: string * ?ShowMarkers: bool * ?ShowLegend: bool * ?Text: 'e * ?MultiText: 'e seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?UpperMarker: Marker * ?LowerMarker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?UpperLine: Line * ?LowerLine: Line * ?RangeColor: Color * ?RangePattern: Pattern * ?UpperText: 'f * ?MultiUpperText: 'f seq * ?LowerText: 'g * ?MultiLowerText: 'g seq * ?TextFont: Font * ?LowerName: string * ?UpperName: string * ?UseDefaults: bool -> GenericChart (requires 'e :> IConvertible and 'f :> IConvertible and 'g :> IConvertible) + 2 overloads static member Scatter: ?X: 'a seq * ?XEncoded: EncodedTypedArray * ?MultiX: 'a seq seq * ?Y: 'b seq * ?YEncoded: EncodedTypedArray * ?MultiY: 'b seq seq * ?Mode: Mode * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'a :> IConvertible and 'b :> IConvertible and 'c :> IConvertible) + 3 overloads static member Spline: x: #IConvertible seq * y: #IConvertible seq * ?ShowMarkers: bool * ?Smoothing: float * ?Name: string * ?ShowLegend: bool * ?Opacity: float * ?MultiOpacity: float seq * ?Text: 'c * ?MultiText: 'c seq * ?TextPosition: TextPosition * ?MultiTextPosition: TextPosition seq * ?MarkerColor: Color * ?MarkerColorScale: Colorscale * ?MarkerOutline: Line * ?MarkerSymbol: MarkerSymbol * ?MultiMarkerSymbol: MarkerSymbol seq * ?Marker: Marker * ?LineColor: Color * ?LineColorScale: Colorscale * ?LineWidth: float * ?LineDash: DrawingStyle * ?Line: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?StackGroup: string * ?Orientation: Orientation * ?GroupNorm: GroupNorm * ?Fill: Fill * ?FillColor: Color * ?FillPattern: Pattern * ?UseWebGL: bool * ?UseDefaults: bool -> GenericChart (requires 'c :> IConvertible) + 2 overloads
static member Chart.Table: header: TraceObjects.TableHeader * cells: TraceObjects.TableCells * ?Name: string * ?ColumnOrder: int seq * ?ColumnWidth: float * ?MultiColumnWidth: float seq * ?UseDefaults: bool -> GenericChart
static member Chart.Table: headerValues: #seq<'b> seq * cellsValues: #seq<'d> seq * ?TransposeCells: bool * ?HeaderAlign: HorizontalAlign * ?HeaderMultiAlign: HorizontalAlign seq * ?HeaderFillColor: Color * ?HeaderHeight: int * ?HeaderOutlineColor: Color * ?HeaderOutlineWidth: float * ?HeaderOutlineMultiWidth: float seq * ?HeaderOutline: Line * ?CellsAlign: HorizontalAlign * ?CellsMultiAlign: HorizontalAlign seq * ?CellsFillColor: Color * ?CellsHeight: int * ?CellsOutlineColor: Color * ?CellsOutlineWidth: float * ?CellsOutlineMultiWidth: float seq * ?CellsOutline: Line * ?Name: string * ?ColumnOrder: int seq * ?ColumnWidth: float * ?MultiColumnWidth: float seq * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible and 'd :> System.IConvertible)
type GenericChart = | Chart of data: Trace * layout: Layout * config: Config * displayOpts: DisplayOptions | MultiChart of data: Trace list * layout: Layout * config: Config * displayOpts: DisplayOptions static member addConfig: config: Config -> gChart: GenericChart -> GenericChart static member addDisplayOptions: displayOpts: DisplayOptions -> gChart: GenericChart -> GenericChart static member addLayout: layout: Layout -> gChart: GenericChart -> GenericChart static member combine: gCharts: GenericChart seq -> GenericChart static member countTrace: gChart: GenericChart -> int static member existsTrace: predicate: (Trace -> bool) -> gChart: GenericChart -> bool static member fromChartDTO: dto: ChartDTO -> GenericChart static member fromFigure: fig: Figure -> GenericChart static member getConfig: gChart: GenericChart -> Config static member getDisplayOptions: gChart: GenericChart -> DisplayOptions ...
<summary> The central type that gets created by all Chart constructors is GenericChart, which itself represents either a single chart or a multi chart (as a Discriminate Union type). A GenericChart consists of four top level objects: Trace (multiple of those in the case of a MultiChart), Layout, Config, and DisplayOptions. - `Trace` is in principle the representation of a dataset on a chart, including for example the data itself, color and shape of the visualization, etc. - `Layout` is everything of the chart that is not dataset specific - e.g. the shape and style of axes, the chart title, etc. - `Config` is an object that configures high level properties of the chart like making all chart elements editable or the tool bar on top - `DisplayOptions` is an object that contains meta information about how the html document that contains the chart. </summary>
static member GenericChart.toChartHTML: gChart: GenericChart -> string
val table2: GenericChart
val header: string list
val rows: string list list
type HorizontalAlign = | Left | Center | Right member Convert: unit -> objnull override ToString: unit -> string static member convert: (HorizontalAlign -> objnull) static member toString: (HorizontalAlign -> string)
union case HorizontalAlign.Center: HorizontalAlign
union case HorizontalAlign.Left: HorizontalAlign
union case HorizontalAlign.Right: HorizontalAlign
type Color = override Equals: other: obj -> bool override GetHashCode: unit -> int static member fromARGB: a: int -> r: int -> g: int -> b: int -> Color static member fromColorScaleValues: c: #IConvertible seq -> Color static member fromColors: c: Color seq -> Color static member fromHex: s: string -> Color static member fromKeyword: c: ColorKeyword -> Color static member fromRGB: r: int -> g: int -> b: int -> Color static member fromString: c: string -> Color member Value: obj
<summary> Plotly color can be a single color, a sequence of colors, or a sequence of numeric values referencing the color of the colorscale obj </summary>
static member Color.fromString: c: string -> Color
static member Color.fromColors: c: Color seq -> Color
val table3: GenericChart
val header2: string list
val rowvalues: float list seq
module Seq from Microsoft.FSharp.Collections
val sortBy: projection: ('T -> 'Key) -> source: 'T seq -> 'T seq (requires comparison)
val x: float list
val mapColor: min: float -> max: float -> value: float -> Color
val min: float
val max: float
val value: float
val proportion: int
Multiple items
val int: value: 'T -> int (requires member op_Explicit)

--------------------
type int = int32

--------------------
type int<'Measure> = int
static member Color.fromRGB: r: int -> g: int -> b: int -> Color
val cellcolor: Color
val map: mapping: ('T -> 'U) -> source: 'T seq -> 'U seq
val row: float list
val mapi: mapping: (int -> 'T -> 'U) -> source: 'T seq -> 'U seq
val index: int
val transpose: source: #seq<'T> seq -> 'T seq seq
val table4: GenericChart
val sequence: string
module String from Microsoft.FSharp.Core
val concat: sep: string -> strings: string seq -> string
val elementsPerRow: int
val headers: string seq
val x: int
val cells: string seq seq
val chunkBySize: chunkSize: int -> source: 'T seq -> 'T array seq
val i: int
val x: char array
val append: source1: 'T seq -> source2: 'T seq -> 'T seq
Multiple items
val string: value: 'T -> string

--------------------
type string = System.String
val cellcolors: Color
val row: string seq
val element: string
val x: Color seq
Multiple items
val seq: sequence: 'T seq -> 'T seq

--------------------
type 'T seq = System.Collections.Generic.IEnumerable<'T>
val line: Line
Multiple items
type Line = inherit DynamicObj new: unit -> Line static member init: ?BackOff: BackOff * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?ColorAxis: SubPlotId * ?Colorscale: Colorscale * ?ReverseScale: bool * ?ShowScale: bool * ?ColorBar: ColorBar * ?Dash: DrawingStyle * ?Shape: Shape * ?Simplify: bool * ?Smoothing: float * ?Width: float * ?MultiWidth: float seq * ?OutlierColor: Color * ?OutlierWidth: float -> Line static member style: ?BackOff: BackOff * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?ColorAxis: SubPlotId * ?Colorscale: Colorscale * ?ReverseScale: bool * ?ShowScale: bool * ?ColorBar: ColorBar * ?Dash: DrawingStyle * ?Shape: Shape * ?Simplify: bool * ?Smoothing: float * ?Width: float * ?MultiWidth: float seq * ?OutlierColor: Color * ?OutlierWidth: float -> (Line -> Line)
<summary> The line object determines the style of the line in various aspect of plots such as a line connecting datums, outline of layout objects, etc.. </summary>

--------------------
new: unit -> Line
static member Line.init: ?BackOff: BackOff * ?AutoColorScale: bool * ?CAuto: bool * ?CMax: float * ?CMid: float * ?CMin: float * ?Color: Color * ?ColorAxis: SubPlotId * ?Colorscale: Colorscale * ?ReverseScale: bool * ?ShowScale: bool * ?ColorBar: ColorBar * ?Dash: DrawingStyle * ?Shape: Shape * ?Simplify: bool * ?Smoothing: float * ?Width: float * ?MultiWidth: float seq * ?OutlierColor: Color * ?OutlierWidth: float -> Line
val chartwidth: int
static member Chart.withSize: width: float * height: float -> (GenericChart -> GenericChart)
static member Chart.withSize: ?Width: int * ?Height: int -> (GenericChart -> GenericChart)
static member Chart.withTitle: title: Title -> (GenericChart -> GenericChart)
static member Chart.withTitle: title: string * ?TitleFont: Font -> (GenericChart -> GenericChart)

Type something to start searching.