Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0153473

Browse files
author
mahdis-z
committed
Waterfall JS Documentation
1 parent 8751a13 commit 0153473

4 files changed

+224
-0
lines changed

‎_posts/plotly_js/basic/waterfall/2015-04-09-bar_plotly_js_index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Javascript Graphing Library D3.js-based Bar Charts | Examples | Plotly
3+
name: Waterfall Charts
4+
permalink: javascript/waterfall-charts/
5+
description: How to make a D3.js-based waterfall chart in javascript.
6+
layout: user-guide
7+
thumbnail: thumbnail/waterfall-charts.jpg
8+
language: plotly_js
9+
has_thumbnail: true
10+
display_as: basic
11+
order: 6.5
12+
redirect_from: javascript-graphing-library/bar-charts/
13+
---
14+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","waterfall" | sort: "order" %}
15+
{% include auto_examples.html examples=examples %}

‎_posts/plotly_js/basic/waterfall/2015-04-09-basic-bar.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
name: Basic Waterfall Chart
3+
plot_url: https://codepen.io/plotly/embed/jRaPGg/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: waterfall
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
var gd = document.getElementById('graphDiv');
11+
var data = [
12+
{
13+
name: "2018",
14+
type: "waterfall",
15+
orientation: "v",
16+
measure: [
17+
"relative",
18+
"relative",
19+
"total",
20+
"relative",
21+
"relative",
22+
"total"
23+
],
24+
x: [
25+
"Sales",
26+
"Consulting",
27+
"Net revenue",
28+
"Purchases",
29+
"Other expenses",
30+
"Profit before tax"
31+
],
32+
textposition: "outside",
33+
text: [
34+
"+60",
35+
"+80",
36+
"",
37+
"-40",
38+
"-20",
39+
"Total"
40+
],
41+
y: [
42+
60,
43+
80,
44+
0,
45+
-40,
46+
-20,
47+
0
48+
],
49+
base: 1000,
50+
connector: {
51+
line: {
52+
color: "rgb(63, 63, 63)"
53+
}
54+
},
55+
}
56+
];
57+
var layout= {
58+
title: {
59+
text: "Profit and loss statement 2018"
60+
},
61+
xaxis: {
62+
type: "category"
63+
},
64+
yaxis: {
65+
type: "linear"
66+
},
67+
height: 800,
68+
width: 800,
69+
autosize: true,
70+
showlegend: true
71+
};
72+
73+
Plotly.newPlot(gd, data, layout)

‎_posts/plotly_js/basic/waterfall/2015-04-09-horizontal-waterfall-chart.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
name: Horizontal Waterfall Chart
3+
plot_url: https://codepen.io/plotly/embed/KYZmXY/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: waterfall
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var gd = document.getElementById('graphDiv');
12+
var data = [
13+
{
14+
name: "2018",
15+
type: "waterfall",
16+
orientation: "h",
17+
measure: [
18+
"relative",
19+
"relative",
20+
"relative",
21+
"relative",
22+
"total",
23+
"relative",
24+
"relative",
25+
"relative",
26+
"relative",
27+
"total",
28+
"relative",
29+
"relative",
30+
"total",
31+
"relative",
32+
"total"
33+
],
34+
y: [
35+
"Sales",
36+
"Consulting",
37+
"Maintenance",
38+
"Other revenue",
39+
"Net revenue",
40+
"Purchases",
41+
"Material expenses",
42+
"Personnel expenses",
43+
"Other expenses",
44+
"Operating profit",
45+
"Investment income",
46+
"Financial income",
47+
"Profit before tax",
48+
"Income tax (15%)",
49+
"Profit after tax"
50+
],
51+
x: [
52+
375,
53+
128,
54+
78,
55+
27,
56+
null,
57+
-327,
58+
-12,
59+
-78,
60+
-12,
61+
null,
62+
32,
63+
89,
64+
null,
65+
-45,
66+
null
67+
],
68+
connector: {
69+
mode: "between",
70+
line: {
71+
width: 4,
72+
color: "rgb(0, 0, 0)",
73+
dash: 0
74+
}
75+
}
76+
}
77+
];
78+
var layout = {title: {
79+
text: "Profit and loss statement 2018<br>waterfall chart displaying positive and negative"
80+
},
81+
yaxis: {
82+
type: "category",
83+
autorange: "reversed"
84+
},
85+
xaxis: {
86+
type: "linear"
87+
},
88+
margin: { l: 150 },
89+
height: 800,
90+
width: 800,
91+
showlegend: true
92+
}
93+
Plotly.newPlot(gd, data, layout);
94+
95+
96+

‎_posts/plotly_js/basic/waterfall/2015-04-09-multi_category-waterfall-charts.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
name: Multi Category Waterfall Chart
3+
plot_url: https://codepen.io/plotly/embed/JVMNOR/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: waterfall
6+
order: 2
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
var gd = document.getElementById('graphDiv');
11+
var data = [
12+
{
13+
type: "waterfall",
14+
x: [
15+
["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
16+
["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
17+
],
18+
measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
19+
y: [1, 2, 3, -1, null, 1, 2, -4, null],
20+
base: 1000
21+
},
22+
{
23+
type: "waterfall",
24+
x: [
25+
["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
26+
["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
27+
],
28+
measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
29+
y: [1.1, 2.2, 3.3, -1.1, null, 1.1, 2.2, -4.4, null],
30+
base: 1000
31+
}
32+
];
33+
layout = {
34+
xaxis: {
35+
title: "MULTI-CATEGORY",
36+
tickfont: {size: 16},
37+
ticks: "outside"
38+
}
39+
}
40+
Plotly.newPlot(gd, data, layout);

0 commit comments

Comments
 (0)