|
| 1 | +(** |
| 2 | +--- |
| 3 | +title: Indicator Charts |
| 4 | +category: Finance Charts |
| 5 | +categoryindex: 7 |
| 6 | +index: 4 |
| 7 | +--- |
| 8 | +*) |
| 9 | + |
| 10 | +(*** hide ***) |
| 11 | + |
| 12 | +(*** condition: prepare ***) |
| 13 | +#r "nuget: Newtonsoft.JSON, 13.0.1" |
| 14 | +#r "nuget: DynamicObj" |
| 15 | +#r "../bin/Plotly.NET/net5.0/Plotly.NET.dll" |
| 16 | + |
| 17 | +(*** condition: ipynb ***) |
| 18 | +#if IPYNB |
| 19 | +#r "nuget: Plotly.NET, {{fsdocs-package-version}}" |
| 20 | +#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}" |
| 21 | +#endif // IPYNB |
| 22 | + |
| 23 | +(** |
| 24 | +# Indicator Charts |
| 25 | +
|
| 26 | +[](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb)  |
| 27 | +[]({{root}}{{fsdocs-source-basename}}.fsx)  |
| 28 | +[]({{root}}{{fsdocs-source-basename}}.ipynb) |
| 29 | +
|
| 30 | +*Summary:* This example shows how to create indicator charts in F#. |
| 31 | +
|
| 32 | +Indicator Charts visualize the evolution of a value compared to a reference value, optionally inside a range. |
| 33 | +
|
| 34 | +There are different types of indicator charts, depending on the `IndicatorMode` used in chart generation: |
| 35 | +
|
| 36 | +- `Delta`/`Number` (and combinations) simply shows if the value is increasing or decreasing compared to the reference |
| 37 | +- Any combination of the above with `Gauge` adds a customizable gauge that indicates where the value lies inside a given range. |
| 38 | +*) |
| 39 | + |
| 40 | +open Plotly.NET |
| 41 | +open Plotly.NET.TraceObjects |
| 42 | +open Plotly.NET.LayoutObjects |
| 43 | + |
| 44 | +let allIndicatorTypes = |
| 45 | + [ |
| 46 | + Chart.Indicator( |
| 47 | + 120., StyleParam.IndicatorMode.NumberDeltaGauge, |
| 48 | + Title = "Bullet gauge", |
| 49 | + DeltaReference = 90., |
| 50 | + Range = StyleParam.Range.MinMax(-200., 200.), |
| 51 | + GaugeShape = StyleParam.IndicatorGaugeShape.Bullet, |
| 52 | + ShowGaugeAxis = false, |
| 53 | + Domain = Domain.init(Row = 0, Column = 0) |
| 54 | + ) |
| 55 | + Chart.Indicator( |
| 56 | + 200., StyleParam.IndicatorMode.NumberDeltaGauge, |
| 57 | + Title = "Angular gauge", |
| 58 | + Delta = IndicatorDelta.init(Reference=160), |
| 59 | + Range = StyleParam.Range.MinMax(0., 250.), |
| 60 | + Domain = Domain.init(Row = 0, Column = 1) |
| 61 | + ) |
| 62 | + Chart.Indicator( |
| 63 | + 300., StyleParam.IndicatorMode.NumberDelta, |
| 64 | + Title = "number and delta", |
| 65 | + DeltaReference = 90., |
| 66 | + Domain = Domain.init(Row = 1, Column = 0) |
| 67 | + ) |
| 68 | + Chart.Indicator( |
| 69 | + 40., StyleParam.IndicatorMode.Delta, |
| 70 | + Title = "delta", |
| 71 | + DeltaReference = 90., |
| 72 | + Domain = Domain.init(Row = 1, Column = 1) |
| 73 | + ) |
| 74 | + ] |
| 75 | + |> Chart.combine |
| 76 | + |> Chart.withLayoutGridStyle(Rows = 2, Columns = 2) |
| 77 | + |> Chart.withMarginSize(Left = 200) |
| 78 | + |
| 79 | + |
| 80 | +(*** condition: ipynb ***) |
| 81 | +#if IPYNB |
| 82 | +allIndicatorTypes |
| 83 | +#endif // IPYNB |
| 84 | + |
| 85 | +(***hide***) |
| 86 | +allIndicatorTypes |> GenericChart.toChartHTML |
| 87 | +(***include-it-raw***) |
| 88 | + |
0 commit comments