-
Notifications
You must be signed in to change notification settings - Fork 81
/
1_2_multiple-charts.fsx
155 lines (116 loc) · 3.73 KB
/
1_2_multiple-charts.fsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
(**
---
title: Multicharts and subplots
category: Chart Layout
categoryindex: 2
index: 3
---
*)
(*** hide ***)
(*** condition: prepare ***)
#r "nuget: Newtonsoft.JSON, 12.0.3"
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
(*** condition: ipynb ***)
#if IPYNB
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
#endif // IPYNB
(**
# Multicharts and subplots
[](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
[]({{root}}{{fsdocs-source-basename}}.fsx) 
[]({{root}}{{fsdocs-source-basename}}.ipynb)
*Summary:* This example shows how to create charts with multiple subplots in F#.
let's first create some data for the purpose of creating example charts:
*)
open Plotly.NET
let x = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
let y = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
(**
## Combining charts
`Chart.Combine` takes a sequence of charts, and attempts to combine their layouts to
produce a composite chart with one layout containing all traces of the input:
*)
let combinedChart =
[
Chart.Line(x,y,Name="first")
Chart.Line(y,x,Name="second")
]
|> Chart.Combine
#if IPYNB
combinedChart
#endif // end cell with chart value in a notebook context
(***hide***)
combinedChart |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Chart subplot grids
### Chart.Grid
`Chart.Grid` takes a 2D input sequence of charts and creates a subplot grid
with the dimensions (outerlength,(max (innerLengths))
*)
//simple 3x3 subplot grid
let grid =
Chart.Grid(
[
[Chart.Line(x,y); Chart.Line(x,y); Chart.Line(x,y)]
[Chart.Point(x,y); Chart.Point(x,y); Chart.Point(x,y)]
[Chart.Spline(x,y); Chart.Spline(x,y); Chart.Spline(x,y)]
]
)
(*** condition: ipynb ***)
#if IPYNB
grid
#endif // IPYNB
(***hide***)
grid |> GenericChart.toChartHTML
(***include-it-raw***)
(**
use `sharedAxis=true` to use one shared x axis per column and one shared y axis per row.
(Try zooming in the single subplots below)
*)
let grid2 =
Chart.Grid(
[
[Chart.Line(x,y); Chart.Line(x,y); Chart.Line(x,y)]
[Chart.Point(x,y); Chart.Point(x,y); Chart.Point(x,y)]
[Chart.Spline(x,y); Chart.Spline(x,y); Chart.Spline(x,y)]
],
sharedAxes=true
)
|> Chart.withLayoutGridStyle(
XSide = StyleParam.LayoutGridXSide.Bottom
)
(*** condition: ipynb ***)
#if IPYNB
grid2
#endif // IPYNB
(***hide***)
grid2 |> GenericChart.toChartHTML
(***include-it-raw***)
(**
### Chart.SingleStack
The `Chart.SingleStack` function is a special version of Chart.Grid that creates only one column from a 1D input chart sequence.
It uses a shared x axis per default. You can also use the Chart.withLayoutGridStyle to further style subplot grids:
*)
let singleStack =
[
Chart.Point(x,y)
|> Chart.withY_AxisStyle("This title must")
Chart.Line(x,y)
|> Chart.withY_AxisStyle("be set on the",Zeroline=false)
Chart.Spline(x,y)
|> Chart.withY_AxisStyle("respective subplots",Zeroline=false)
]
|> Chart.SingleStack
//move xAxis to bottom and increase spacing between plots by using the withLayoutGridStyle function
|> Chart.withLayoutGridStyle(XSide=StyleParam.LayoutGridXSide.Bottom,YGap= 0.1)
|> Chart.withTitle("Hi i am the new SingleStackChart")
|> Chart.withX_AxisStyle("im the shared xAxis")
(*** condition: ipynb ***)
#if IPYNB
singleStack
#endif // IPYNB
(***hide***)
singleStack |> GenericChart.toChartHTML
(***include-it-raw***)