-
Notifications
You must be signed in to change notification settings - Fork 81
/
02_1_bar-and-column-charts.fsx
120 lines (90 loc) · 2.63 KB
/
02_1_bar-and-column-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
(**
---
title: Bar and column charts
category: Simple Charts
categoryindex: 3
index: 2
---
*)
(*** hide ***)
(*** condition: prepare ***)
#r "nuget: Newtonsoft.JSON, 13.0.1"
#r "nuget: DynamicObj, 1.0.1"
#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
(**
# Bar and column charts
[](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 bar and a column charts in F#.
let's first create some data for the purpose of creating example charts:
*)
open Plotly.NET
let values = [20; 14; 23;]
let keys = ["Product A"; "Product B"; "Product C";]
(**
A bar chart or bar graph is a chart that presents grouped data with rectangular bars with
lengths proportional to the values that they represent. The bars can be plotted vertically
or horizontally. A vertical bar chart is called a column bar chart.
### Column Charts
*)
let column = Chart.Column(values,keys)
(*** condition: ipynb ***)
#if IPYNB
column
#endif // IPYNB
(***hide***)
column |> GenericChart.toChartHTML
(***include-it-raw***)
(**
### Bar Charts
*)
let bar =
Chart.Bar(values,keys)
(*** condition: ipynb ***)
#if IPYNB
bar
#endif // IPYNB
(***hide***)
bar |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Stacked bar chart or column charts
The following example shows how to create a stacked bar chart by combining bar charts created by combining multiple `Chart.StackedBar` charts:
Basically those charts are just normal bar/column charts with the Layout property `BarMode` set to `Stack`. You can do this yourself by changing the Chart layout.
### Stacked bar Charts
*)
let stackedBar =
[
Chart.StackedBar(values,keys,Name="old");
Chart.StackedBar([8; 21; 13;],keys,Name="new")
]
|> Chart.combine
(*** condition: ipynb ***)
#if IPYNB
stackedBar
#endif // IPYNB
(***hide***)
stackedBar |> GenericChart.toChartHTML
(***include-it-raw***)
(*
### Stacked bar Charts
*)
let stackedColumn =
[
Chart.StackedColumn(values,keys,Name="old");
Chart.StackedColumn([8; 21; 13;],keys,Name="new")
]
|> Chart.combine
(*** condition: ipynb ***)
#if IPYNB
stackedColumn
#endif // IPYNB
(***hide***)
stackedColumn |> GenericChart.toChartHTML
(***include-it-raw***)