Indicator Charts
Summary: This example shows how to create indicator charts in F#.
Indicator Charts visualize the evolution of a value compared to a reference value, optionally inside a range.
There are different types of indicator charts, depending on the IndicatorMode used in chart generation:
Delta/Number(and combinations) simply shows if the value is increasing or decreasing compared to the reference- Any combination of the above with
Gaugeadds a customizable gauge that indicates where the value lies inside a given range.
open Plotly.NET
open Plotly.NET.TraceObjects
open Plotly.NET.LayoutObjects
let allIndicatorTypes =
[ Chart.Indicator(
value = 120.,
mode = StyleParam.IndicatorMode.NumberDeltaGauge,
Title = "Bullet gauge",
DeltaReference = 90.,
Range = StyleParam.Range.MinMax(-200., 200.),
GaugeShape = StyleParam.IndicatorGaugeShape.Bullet,
ShowGaugeAxis = false,
Domain = Domain.init (Row = 0, Column = 0)
)
Chart.Indicator(
value = 200.,
mode = StyleParam.IndicatorMode.NumberDeltaGauge,
Title = "Angular gauge",
Delta = IndicatorDelta.init (Reference = 160),
Range = StyleParam.Range.MinMax(0., 250.),
Domain = Domain.init (Row = 0, Column = 1)
)
Chart.Indicator(
value = 300.,
mode = StyleParam.IndicatorMode.NumberDelta,
Title = "number and delta",
DeltaReference = 90.,
Domain = Domain.init (Row = 1, Column = 0)
)
Chart.Indicator(
value = 40.,
mode = StyleParam.IndicatorMode.Delta,
Title = "delta",
DeltaReference = 90.,
Domain = Domain.init (Row = 1, Column = 1)
) ]
|> Chart.combine
|> Chart.withLayoutGridStyle (Rows = 2, Columns = 2)
|> Chart.withMarginSize (Left = 200)
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>
<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
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>
<summary> Sets how plotly is referenced in the head of html docs. </summary>
union case Plotly.NET.PlotlyJSReference.NoReference: Plotly.NET.PlotlyJSReference
namespace Plotly.NET.TraceObjects
namespace Plotly.NET.LayoutObjects
val allIndicatorTypes: 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.Indicator: value: System.IConvertible * mode: StyleParam.IndicatorMode * ?Range: StyleParam.Range * ?Name: string * ?Title: string * ?Domain: Domain * ?Align: StyleParam.IndicatorAlignment * ?DeltaReference: #System.IConvertible * ?Delta: IndicatorDelta * ?Number: IndicatorNumber * ?GaugeShape: StyleParam.IndicatorGaugeShape * ?Gauge: IndicatorGauge * ?ShowGaugeAxis: bool * ?GaugeAxis: LinearAxis * ?UseDefaults: bool -> GenericChart
module StyleParam
from Plotly.NET
type IndicatorMode =
| Number
| Delta
| Gauge
| NumberDelta
| NumberGauge
| DeltaGauge
| NumberDeltaGauge
member Convert: unit -> objnull
override ToString: unit -> string
static member convert: (IndicatorMode -> objnull)
static member toString: (IndicatorMode -> string)
union case StyleParam.IndicatorMode.NumberDeltaGauge: StyleParam.IndicatorMode
Multiple items
type Title = inherit DynamicObj new: unit -> Title static member init: ?Text: string * ?Font: Font * ?AutoMargin: bool * ?Pad: Padding * ?X: float * ?XAnchor: XAnchorPosition * ?XRef: string * ?Y: float * ?YAnchor: YAnchorPosition * ?YRef: string * ?Standoff: int * ?Side: Side -> Title static member style: ?Text: string * ?Font: Font * ?AutoMargin: bool * ?Pad: Padding * ?X: float * ?XAnchor: XAnchorPosition * ?XRef: string * ?Y: float * ?YAnchor: YAnchorPosition * ?YRef: string * ?Standoff: int * ?Side: Side -> (Title -> Title)
--------------------
new: unit -> Title
type Title = inherit DynamicObj new: unit -> Title static member init: ?Text: string * ?Font: Font * ?AutoMargin: bool * ?Pad: Padding * ?X: float * ?XAnchor: XAnchorPosition * ?XRef: string * ?Y: float * ?YAnchor: YAnchorPosition * ?YRef: string * ?Standoff: int * ?Side: Side -> Title static member style: ?Text: string * ?Font: Font * ?AutoMargin: bool * ?Pad: Padding * ?X: float * ?XAnchor: XAnchorPosition * ?XRef: string * ?Y: float * ?YAnchor: YAnchorPosition * ?YRef: string * ?Standoff: int * ?Side: Side -> (Title -> Title)
--------------------
new: unit -> Title
type Range =
| MinMax of IConvertible * IConvertible
| Values of IConvertible array
member Convert: unit -> objnull
static member ofMinMax: min: #IConvertible * max: #IConvertible -> Range
static member ofValues: values: #IConvertible seq -> Range
static member convert: (Range -> objnull)
<summary> Defines a Range between min and max value </summary>
<summary> Defines a Range between min and max value </summary>
union case StyleParam.Range.MinMax: System.IConvertible * System.IConvertible -> StyleParam.Range
type IndicatorGaugeShape =
| Angular
| Bullet
member Convert: unit -> objnull
override ToString: unit -> string
static member convert: (IndicatorGaugeShape -> objnull)
static member toString: (IndicatorGaugeShape -> string)
union case StyleParam.IndicatorGaugeShape.Bullet: StyleParam.IndicatorGaugeShape
Multiple items
type Domain = inherit DynamicObj new: unit -> Domain static member init: ?X: Range * ?Y: Range * ?Row: int * ?Column: int -> Domain static member style: ?X: Range * ?Y: Range * ?Row: int * ?Column: int -> (Domain -> Domain)
<summary> Dimensions type inherits from dynamic object </summary>
--------------------
new: unit -> Domain
type Domain = inherit DynamicObj new: unit -> Domain static member init: ?X: Range * ?Y: Range * ?Row: int * ?Column: int -> Domain static member style: ?X: Range * ?Y: Range * ?Row: int * ?Column: int -> (Domain -> Domain)
<summary> Dimensions type inherits from dynamic object </summary>
--------------------
new: unit -> Domain
static member Domain.init: ?X: StyleParam.Range * ?Y: StyleParam.Range * ?Row: int * ?Column: int -> Domain
Multiple items
type IndicatorDelta = inherit DynamicObj new: unit -> IndicatorDelta static member init: ?Decreasing: IndicatorSymbol * ?Font: Font * ?Increasing: IndicatorSymbol * ?Position: IndicatorDeltaPosition * ?Prefix: string * ?Reference: #IConvertible * ?Relative: bool * ?Suffix: string * ?ValueFormat: string -> IndicatorDelta static member style: ?Decreasing: IndicatorSymbol * ?Font: Font * ?Increasing: IndicatorSymbol * ?Position: IndicatorDeltaPosition * ?Prefix: string * ?Reference: #IConvertible * ?Relative: bool * ?Suffix: string * ?ValueFormat: string -> (IndicatorDelta -> IndicatorDelta)
--------------------
new: unit -> IndicatorDelta
type IndicatorDelta = inherit DynamicObj new: unit -> IndicatorDelta static member init: ?Decreasing: IndicatorSymbol * ?Font: Font * ?Increasing: IndicatorSymbol * ?Position: IndicatorDeltaPosition * ?Prefix: string * ?Reference: #IConvertible * ?Relative: bool * ?Suffix: string * ?ValueFormat: string -> IndicatorDelta static member style: ?Decreasing: IndicatorSymbol * ?Font: Font * ?Increasing: IndicatorSymbol * ?Position: IndicatorDeltaPosition * ?Prefix: string * ?Reference: #IConvertible * ?Relative: bool * ?Suffix: string * ?ValueFormat: string -> (IndicatorDelta -> IndicatorDelta)
--------------------
new: unit -> IndicatorDelta
static member IndicatorDelta.init: ?Decreasing: IndicatorSymbol * ?Font: Font * ?Increasing: IndicatorSymbol * ?Position: StyleParam.IndicatorDeltaPosition * ?Prefix: string * ?Reference: #System.IConvertible * ?Relative: bool * ?Suffix: string * ?ValueFormat: string -> IndicatorDelta
union case StyleParam.IndicatorMode.NumberDelta: StyleParam.IndicatorMode
union case StyleParam.IndicatorMode.Delta: StyleParam.IndicatorMode
static member Chart.combine: gCharts: GenericChart seq -> GenericChart
static member Chart.withLayoutGridStyle: ?SubPlots: (StyleParam.LinearAxisId * StyleParam.LinearAxisId) array array * ?XAxes: StyleParam.LinearAxisId array * ?YAxes: StyleParam.LinearAxisId array * ?Rows: int * ?Columns: int * ?RowOrder: StyleParam.LayoutGridRowOrder * ?Pattern: StyleParam.LayoutGridPattern * ?XGap: float * ?YGap: float * ?Domain: Domain * ?XSide: StyleParam.LayoutGridXSide * ?YSide: StyleParam.LayoutGridYSide -> (GenericChart -> GenericChart)
static member Chart.withMarginSize: ?Left: 'a * ?Right: 'b * ?Top: 'c * ?Bottom: 'd * ?Pad: 'e * ?Autoexpand: 'f -> (GenericChart -> GenericChart)
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>
<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
Plotly.NET