1
+ (**
2
+ ---
3
+ title: Plotting multicategory data
4
+ category: Simple Charts
5
+ categoryindex: 3
6
+ index: 10
7
+ ---
8
+ *)
9
+
10
+ (*** hide ***)
11
+
12
+ (*** condition: prepare ***)
13
+ #r " nuget: Newtonsoft.JSON, 13.0.1"
14
+ #r " nuget: DynamicObj, 2.0.0"
15
+ #r " nuget: Giraffe.ViewEngine, 1.4.0"
16
+ #r " ../src/Plotly.NET/bin/Release/netstandard2.0/Plotly.NET.dll"
17
+
18
+ Plotly.NET.Defaults.DefaultDisplayOptions <-
19
+ Plotly.NET.DisplayOptions.init ( PlotlyJSReference = Plotly.NET.PlotlyJSReference.NoReference)
20
+
21
+ (*** condition: ipynb ***)
22
+ #if IPYNB
23
+ #r " nuget: Plotly.NET, {{fsdocs-package-version}}"
24
+ #r " nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
25
+ #endif // IPYNB
26
+
27
+ (**
28
+ # Plotting multicategory data
29
+
30
+ [](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
31
+ []({{root}}{{fsdocs-source-basename}}.ipynb)
32
+
33
+ *Summary:* This example shows how to plot multicategory data on 2D charts in F#.
34
+
35
+ Since Plotly.NET v4, multicategory data are supported on the following 2D charts:
36
+
37
+ - [Chart.Scatter](#Scatter)
38
+ - [Chart.Bar and Chart.Column](#Bar-and-Column)
39
+ - [Chart.Histogram](#Histogram)
40
+ - [Chart.Histogram2D](#Histogram2D)
41
+ - [Chart.BoxPlot and Chart.Violin](#BoxPlot-and-Violin)
42
+ - [Chart.Histogram2DContour](#Histogram2DContour)
43
+ - [Chart.Heatmap and Chart.AnnotatedHeatmap](#Heatmap-and-AnnotatedHeatmap)
44
+ - [Chart.Contour](#Contour)
45
+ - [Chart.OHLC and Chart.Candlestick](#OHLC-and-Candlestick)
46
+
47
+ ## Scatter
48
+
49
+ Note that this does not apply to all derived Charts such as `Chart.Point`, `Chart.Line`, `Chart.Bubble`, `Chart.Spline` etc. (to avoid creating dozens ov overloads for scatter derived traces)
50
+
51
+ You can however design those yourself using Chart.Scatter, here are some examples:
52
+ *)
53
+ open Plotly.NET
54
+ open System
55
+
56
+ let multicategoryScatterAndDerived =
57
+ [
58
+ Chart.Scatter(
59
+ Name = " Point" ,
60
+ Mode = StyleParam.Mode.Markers, // creates multicategory point chart
61
+ MultiX = [[ " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AB" ; " BA" ; " BB" ]],
62
+ MultiY = [
63
+ [ " A" ; " A" ; " B" ; " B" ] |> Seq.map ( fun x -> x :> IConvertible) // you can use different IConvertibles if you cast here
64
+ [ 1 ; 2 ; - 1 ; - 2 ] |> Seq.map ( fun x -> x :> IConvertible)
65
+ ]
66
+ )
67
+ Chart.Scatter(
68
+ Name = " Line" ,
69
+ Mode = StyleParam.Mode.Lines, // creates multicategory line chart
70
+ MultiX = [[ " C" ; " C" ; " D" ; " D" ];[ " CA" ; " CB" ; " DA" ; " DB" ]],
71
+ MultiY = [
72
+ [ " A" ; " A" ; " B" ; " B" ] |> Seq.map ( fun x -> x :> IConvertible) // you can use different IConvertibles if you cast here
73
+ [ 1 ; 2 ; - 1 ; - 2 ] |> Seq.map ( fun x -> x :> IConvertible)
74
+ ]
75
+ )
76
+ Chart.Scatter(
77
+ Name = " SplineArea" ,
78
+ Mode = StyleParam.Mode.Lines, // creates multicategory splinearea chart
79
+ MultiX = [[ " E" ; " E" ; " F" ; " F" ];[ " EA" ; " EB" ; " FA" ; " FB" ]],
80
+ MultiY = [
81
+ [ " A" ; " A" ; " B" ; " B" ] |> Seq.map ( fun x -> x :> IConvertible) // you can use different IConvertibles if you cast here
82
+ [ 1 ; 2 ; - 1 ; - 2 ] |> Seq.map ( fun x -> x :> IConvertible)
83
+ ],
84
+ Line = Line.init( Shape = StyleParam.Shape.Spline),
85
+ Fill = StyleParam.Fill.ToZero_ y
86
+ )
87
+ ]
88
+ |> Chart.combine
89
+ |> Chart.withSize( Width = 1000 )
90
+
91
+ (*** condition: ipynb ***)
92
+ #if IPYNB
93
+ multicategoryScatterAndDerived
94
+ #endif // IPYNB
95
+
96
+ (***hide***)
97
+ multicategoryScatterAndDerived |> GenericChart.toChartHTML
98
+ (***include-it-raw***)
99
+
100
+ (**
101
+ ## Bar and Column
102
+ *)
103
+ let multiCategoryBarColumn =
104
+ [
105
+ Chart.Bar(
106
+ values = [ 1 ; 2 ; - 1 ; - 2 ],
107
+ MultiKeys = [[ " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AB" ; " BA" ; " BB" ]],
108
+ Name = " Bar"
109
+ )
110
+ Chart.Column(
111
+ values = [ 1 ; 2 ; - 1 ; - 2 ],
112
+ MultiKeys = [[ " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AB" ; " BA" ; " BB" ]],
113
+ Name = " Column"
114
+ )
115
+ ]
116
+ |> Chart.Grid ( nRows = 1 , nCols = 2 )
117
+ |> Chart.withSize( Width = 1000 )
118
+
119
+ (*** condition: ipynb ***)
120
+ #if IPYNB
121
+ multiCategoryBarColumn
122
+ #endif // IPYNB
123
+
124
+ (***hide***)
125
+ multiCategoryBarColumn |> GenericChart.toChartHTML
126
+ (***include-it-raw***)
127
+
128
+ (**
129
+ ## Histogram
130
+ *)
131
+
132
+ let multicategoryHistogram =
133
+ Chart.Histogram(
134
+ MultiX = [[ " A" ; " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AA" ; " AB" ; " BA" ; " BB" ]]
135
+ )
136
+
137
+ (*** condition: ipynb ***)
138
+ #if IPYNB
139
+ multicategoryHistogram
140
+ #endif // IPYNB
141
+
142
+ (***hide***)
143
+ multicategoryHistogram |> GenericChart.toChartHTML
144
+ (***include-it-raw***)
145
+
146
+ (**
147
+ ## Histogram2D
148
+ *)
149
+
150
+ let multicategoryHistogram2D =
151
+ Chart.Histogram2D(
152
+ MultiX = [[ " A" ; " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AA" ; " AB" ; " BA" ; " BB" ]],
153
+ MultiY = [[ " A" ; " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AA" ; " AB" ; " BA" ; " BB" ]]
154
+ )
155
+
156
+ (*** condition: ipynb ***)
157
+ #if IPYNB
158
+ multicategoryHistogram2D
159
+ #endif // IPYNB
160
+
161
+ (***hide***)
162
+ multicategoryHistogram2D |> GenericChart.toChartHTML
163
+ (***include-it-raw***)
164
+
165
+ (**
166
+ ## BoxPlot and Violin
167
+ *)
168
+
169
+ let multicategoryBoxPlotViolin =
170
+ [
171
+ [
172
+ Chart.BoxPlot(
173
+ Name = " BoxPlot 1" ,
174
+ Y = [ 1 ; 1 ; 2 ; 3 ; 4 ; 3 ; 2 ],
175
+ MultiX = [[ " A" ; " A" ; " A" ; " A" ; " A" ; " A" ; " A" ];[ " AA" ; " AA" ; " AA" ; " AA" ; " AA" ; " AA" ; " AA" ]]
176
+ )
177
+ Chart.BoxPlot(
178
+ Name = " BoxPlot 2" ,
179
+ Y = [ 1 ; 1 ; 2 ; 3 ; 4 ; 3 ; 2 ],
180
+ MultiX = [[ " A" ; " A" ; " A" ; " A" ; " A" ; " A" ; " A" ];[ " AB" ; " AB" ; " AB" ; " AB" ; " AB" ; " AB" ; " AB" ]]
181
+ )
182
+ Chart.BoxPlot(
183
+ Name = " BoxPlot 3" ,
184
+ Y = [ 1 ; 1 ; 2 ; 3 ; 4 ; 3 ; 2 ],
185
+ MultiX = [[ " B" ; " B" ; " B" ; " B" ; " B" ; " B" ; " B" ];[ " BB" ; " BB" ; " BB" ; " BB" ; " BB" ; " BB" ; " BB" ]]
186
+ )
187
+ ]
188
+ |> Chart.combine
189
+ [
190
+ Chart.Violin(
191
+ Name = " Violin 1" ,
192
+ Y = [ 1 ; 1 ; 2 ; 3 ; 4 ; 3 ; 2 ],
193
+ MultiX = [[ " A" ; " A" ; " A" ; " A" ; " A" ; " A" ; " A" ];[ " AA" ; " AA" ; " AA" ; " AA" ; " AA" ; " AA" ; " AA" ]]
194
+ )
195
+ Chart.Violin(
196
+ Name = " Violin 2" ,
197
+ Y = [ 1 ; 1 ; 2 ; 3 ; 4 ; 3 ; 2 ],
198
+ MultiX = [[ " A" ; " A" ; " A" ; " A" ; " A" ; " A" ; " A" ];[ " AB" ; " AB" ; " AB" ; " AB" ; " AB" ; " AB" ; " AB" ]]
199
+ )
200
+ Chart.Violin(
201
+ Name = " Violin 3" ,
202
+ Y = [ 1 ; 1 ; 2 ; 3 ; 4 ; 3 ; 2 ],
203
+ MultiX = [[ " B" ; " B" ; " B" ; " B" ; " B" ; " B" ; " B" ];[ " BB" ; " BB" ; " BB" ; " BB" ; " BB" ; " BB" ; " BB" ]]
204
+ )
205
+ ]
206
+ |> Chart.combine
207
+ ]
208
+ |> Chart.Grid ( nRows = 1 , nCols = 2 )
209
+ |> Chart.withSize( Width = 1000 )
210
+
211
+ (*** condition: ipynb ***)
212
+ #if IPYNB
213
+ multicategoryBoxPlotViolin
214
+ #endif // IPYNB
215
+
216
+ (***hide***)
217
+ multicategoryBoxPlotViolin |> GenericChart.toChartHTML
218
+ (***include-it-raw***)
219
+
220
+ (**
221
+ ## Histogram2DContour
222
+ *)
223
+
224
+ let multicategoryHistogram2DContour =
225
+ Chart.Histogram2DContour(
226
+ MultiX = [[ " A" ; " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AA" ; " AB" ; " BA" ; " BB" ]],
227
+ MultiY = [[ " A" ; " A" ; " A" ; " B" ; " B" ];[ " AA" ; " AA" ; " AB" ; " BA" ; " BB" ]]
228
+ )
229
+
230
+ (*** condition: ipynb ***)
231
+ #if IPYNB
232
+ multicategoryHistogram2DContour
233
+ #endif // IPYNB
234
+
235
+ (***hide***)
236
+ multicategoryHistogram2DContour |> GenericChart.toChartHTML
237
+ (***include-it-raw***)
238
+
239
+ (**
240
+ ## Heatmap and AnnotatedHeatmap
241
+ *)
242
+
243
+ let multicategoryHeatmap =
244
+ Chart.Heatmap(
245
+ zData = [
246
+ [ 1 ; 2 ; 3 ]
247
+ [ 2 ; 3 ; 1 ]
248
+ [ 3 ; 1 ; 2 ]
249
+ ],
250
+ MultiX = [[ " A" ; " A" ; " B" ];[ " AA" ; " AB" ; " BA" ]],
251
+ MultiY = [[ " A" ; " A" ; " B" ];[ " AA" ; " AB" ; " BA" ]]
252
+ )
253
+
254
+ (*** condition: ipynb ***)
255
+ #if IPYNB
256
+ multicategoryHeatmap
257
+ #endif // IPYNB
258
+
259
+ (***hide***)
260
+ multicategoryHeatmap |> GenericChart.toChartHTML
261
+ (***include-it-raw***)
262
+
263
+ let multicategoryAnnotatedHeatmap =
264
+ Chart.AnnotatedHeatmap(
265
+ zData = [
266
+ [ 1 ; 2 ; 3 ]
267
+ [ 2 ; 3 ; 1 ]
268
+ [ 3 ; 1 ; 2 ]
269
+ ],
270
+ annotationText = [
271
+ [ " A;AA x A;AA" ; " A;AA x A;AB" ; " A;AA x B;BA" ]
272
+ [ " A;AB x A;AA" ; " A;AB x A;AB" ; " A;AB x B;BA" ]
273
+ [ " B;BA x A;AA" ; " B;BA x A;AB" ; " B;BA x B;BA" ]
274
+ ],
275
+ MultiX = [[ " A" ; " A" ; " B" ];[ " AA" ; " AB" ; " BA" ]],
276
+ MultiY = [[ " A" ; " A" ; " B" ];[ " AA" ; " AB" ; " BA" ]]
277
+ )
278
+
279
+ (*** condition: ipynb ***)
280
+ #if IPYNB
281
+ multicategoryAnnotatedHeatmap
282
+ #endif // IPYNB
283
+
284
+ (***hide***)
285
+ multicategoryAnnotatedHeatmap |> GenericChart.toChartHTML
286
+ (***include-it-raw***)
287
+
288
+ (**
289
+ ## Contour
290
+ *)
291
+
292
+ let multicategoryContour =
293
+ Chart.Contour(
294
+ zData = [
295
+ [ 1 ; 2 ; 3 ]
296
+ [ 2 ; 3 ; 1 ]
297
+ [ 3 ; 1 ; 2 ]
298
+ ],
299
+ MultiX = [[ " A" ; " A" ; " B" ];[ " AA" ; " AB" ; " BA" ]],
300
+ MultiY = [[ " A" ; " A" ; " B" ];[ " AA" ; " AB" ; " BA" ]]
301
+ )
302
+
303
+ (*** condition: ipynb ***)
304
+ #if IPYNB
305
+ multicategoryContour
306
+ #endif // IPYNB
307
+
308
+ (***hide***)
309
+ multicategoryContour |> GenericChart.toChartHTML
310
+ (***include-it-raw***)
311
+
312
+ (**
313
+ ## OHLC and Candlestick
314
+ *)
315
+
316
+ let multicategoryFinance =
317
+ [
318
+ Chart.OHLC(
319
+ `` open `` = [ 1 ; 2 ],
320
+ high = [ 3 ; 4 ],
321
+ low = [ 0 ; 1 ],
322
+ close = [ 0.5 ; 1. ],
323
+ MultiX = [[ " A" ; " A" ];[ " AA" ; " AB" ]],
324
+ Name = " OHLC"
325
+ )
326
+ Chart.Candlestick(
327
+ `` open `` = [ 1 ; 2 ],
328
+ high = [ 3 ; 4 ],
329
+ low = [ 0 ; 1 ],
330
+ close = [ 0.5 ; 1. ],
331
+ MultiX = [[ " A" ; " A" ];[ " AA" ; " AB" ]],
332
+ Name = " Candlestick"
333
+ )
334
+ ]
335
+ |> Chart.Grid ( nRows = 1 , nCols = 2 )
336
+ |> Chart.withSize( Width = 1000 )
337
+
338
+ (*** condition: ipynb ***)
339
+ #if IPYNB
340
+ multicategoryFinance
341
+ #endif // IPYNB
342
+
343
+ (***hide***)
344
+ multicategoryFinance |> GenericChart.toChartHTML
345
+ (***include-it-raw***)
0 commit comments