Merge pull request plotly#1311 from plotly/waterfall

Waterfall JS Documentation
Fayyaz01 · Apr 26, 2019 · a0f75eb · a0f75eb
2 parents a15fd9b + 9600bfc
commit a0f75eb
Show file tree

Hide file tree

Showing 5 changed files with 254 additions and 0 deletions.
diff --git a/_posts/plotly_js/basic/waterfall/2015-04-09-bar_plotly_js_index.html b/_posts/plotly_js/basic/waterfall/2015-04-09-bar_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+title: Javascript Graphing Library D3.js-based Bar Charts | Examples | Plotly
+name: Waterfall Charts
+permalink: javascript/waterfall-charts/
+description: How to make a D3.js-based waterfall chart in javascript.
+layout: user-guide
+thumbnail: thumbnail/waterfall-charts.jpg
+language: plotly_js
+has_thumbnail: true
+display_as: basic
+order: 6.5
+redirect_from: javascript-graphing-library/bar-charts/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","waterfall" | sort: "order" %}
+{% include auto_examples.html examples=examples %}
diff --git a/_posts/plotly_js/basic/waterfall/2015-04-09-basic-bar.html b/_posts/plotly_js/basic/waterfall/2015-04-09-basic-bar.html
@@ -0,0 +1,69 @@
+---
+name: Basic Waterfall Chart
+plot_url: https://codepen.io/plotly/embed/jRaPGg/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: waterfall
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('graphDiv');
+var data = [
+        {
+            name: "2018",
+            type: "waterfall",
+            orientation: "v",
+            measure: [
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "relative",
+                "total"
+            ],
+            x: [
+                "Sales",
+                "Consulting",
+                "Net revenue",
+                "Purchases",
+                "Other expenses",
+                "Profit before tax"
+            ],
+            textposition: "outside",
+            text: [
+                "+60",
+                "+80",
+                "",
+                "-40",
+                "-20",
+                "Total"
+            ],          
+            y: [
+                60,
+                80,
+                0,
+                -40,
+                -20,
+                0
+            ],
+            connector: {
+              line: {
+                color: "rgb(63, 63, 63)"
+              }
+            },
+        }
+    ];
+ layout = {
+        title: {
+            text: "Profit and loss statement 2018"
+        },
+        xaxis: {
+            type: "category"
+        },
+        yaxis: {
+            type: "linear"
+        },
+        autosize: true,
+        showlegend: true
+    };
+Plotly.newPlot(gd, data, layout);
diff --git a/_posts/plotly_js/basic/waterfall/2015-04-09-horizontal-waterfall-chart.html b/_posts/plotly_js/basic/waterfall/2015-04-09-horizontal-waterfall-chart.html
@@ -0,0 +1,94 @@
+---
+name: Horizontal Waterfall Chart
+plot_url: https://codepen.io/plotly/embed/KYZmXY/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: waterfall
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var gd = document.getElementById('graphDiv');
+var data = [
+        {
+            name: "2018",
+            type: "waterfall",
+            orientation: "h",
+            measure: [
+                "relative",
+                "relative",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "relative",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "relative",
+                "total",
+                "relative",
+                "total"
+            ],
+            y: [
+                "Sales",
+                "Consulting",
+                "Maintenance",
+                "Other revenue",
+                "Net revenue",
+                "Purchases",
+                "Material expenses",
+                "Personnel expenses",
+                "Other expenses",
+                "Operating profit",
+                "Investment income",
+                "Financial income",
+                "Profit before tax",
+                "Income tax (15%)",
+                "Profit after tax"
+            ],
+            x: [
+                375,
+                128,
+                78,
+                27,
+                null,
+                -327,
+                -12,
+                -78,
+                -12,
+                null,
+                32,
+                89,
+                null,
+                -45,
+                null
+            ],
+            connector: {
+                mode: "between",
+                line: {
+                    width: 4,
+                    color: "rgb(0, 0, 0)",
+                    dash: 0
+                }
+            }
+        }
+    ];
+var layout = {title: {
+            text: "Profit and loss statement 2018<br>waterfall chart displaying positive and negative"
+        },
+        yaxis: {
+            type: "category",
+            autorange: "reversed"
+        },
+        xaxis: {
+            type: "linear"
+        },
+        margin: { l: 150 },
+        showlegend: true
+    }
+Plotly.newPlot(gd, data, layout);
+
+
+
diff --git a/_posts/plotly_js/basic/waterfall/2015-04-09-multi_category-waterfall-charts.html b/_posts/plotly_js/basic/waterfall/2015-04-09-multi_category-waterfall-charts.html
@@ -0,0 +1,41 @@
+---
+name: Multi Category Waterfall Chart
+plot_url: https://codepen.io/plotly/embed/JVMNOR/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: waterfall
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('graphDiv');
+var data = [
+    {
+      type: "waterfall",
+      x: [
+        ["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
+        ["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
+      ],
+      measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
+      y: [1, 2, 3, -1, null, 1, 2, -4, null],
+      base: 1000
+    },
+    {
+      type: "waterfall",
+      x: [
+        ["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
+        ["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
+      ],
+      measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
+      y: [1.1, 2.2, 3.3, -1.1, null, 1.1, 2.2, -4.4, null],
+      base: 1000
+    }
+  ];
+var layout = {
+    waterfallgroupgap : 0.5,
+    xaxis: {
+      title: "MULTI-CATEGORY",
+      tickfont: {size: 16},
+      ticks: "outside"
+    }
+  }
+Plotly.newPlot(gd, data, layout);
diff --git a/_posts/plotly_js/basic/waterfall/2015-04-09-style-waterfall.html b/_posts/plotly_js/basic/waterfall/2015-04-09-style-waterfall.html
@@ -0,0 +1,35 @@
+---
+name: Style Waterfall Chart
+plot_url: https://codepen.io/plotly/embed/GLXVvM/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: waterfall
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('graphDiv');
+var data = [
+    {
+      type: "waterfall",
+      x: [
+        ["2016", "2017", "2017", "2017", "2017", "2018", "2018", "2018", "2018"],
+        ["initial", "q1", "q2", "q3", "total", "q1", "q2", "q3", "total" ]
+      ],
+      measure: ["absolute", "relative", "relative", "relative", "total", "relative", "relative", "relative", "total"],
+      y: [10, 20, 30, -10, null, 10, 20, -40, null],
+      base: 300,
+    decreasing: { marker: { color: "Maroon" , line:{color : "red", width :2}}},
+    increasing: { marker: { color: "Teal"} },
+    totals: { marker: { color: "deep sky blue", line:{color:'blue',width:3}} }
+    }];
+var layout = {title: {
+            text: "Profit and loss statement"
+        },
+    waterfallgap : 0.3,
+    xaxis: {
+      title: "",
+      tickfont: {size: 15},
+      ticks: "outside"
+    }
+  }
+Plotly.newPlot(gd, data, layout);