diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html b/_posts/plotly_js/financial/indicator1/2019-07-29-above-other-traces.html
similarity index 62%
rename from _posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html
rename to _posts/plotly_js/financial/indicator1/2019-07-29-above-other-traces.html
index 9ca3895cbc7e..2b7d034c65e6 100644
--- a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-above-other-traces.html
@@ -1,20 +1,23 @@
---
-name: Showing Information Above Your Chart
+name: Showing Information above Your Chart
plot_url: https://codepen.io/plotly/embed/OKpLYv/?height=600&theme-id=15263&default-tab=result
language: plotly_js
suite: indicator
-order: 3
+order: 4
sitemap: false
arrangement: horizontal
markdown_content: |
Another interesting feature is that indicator trace sits above the other traces (even the 3d ones). This way, it can be easily used as an overlay as demonstrated below:
---
-var data = [{domain: {y: [0, 1], x: [0.25, 0.75]}, title: {"text": "Users online"},
- type: "indicator", mode: "number+delta", delta: {"reference": 512, "valueformat": ".0f"},
- ticker: {showticker: true}, vmax: 500, value: 492}, {name: "Users online",
- y: [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]}];
+var data = [
+ {
+ type: "indicator", mode: "number+delta", value: 492,
+ delta: {"reference": 512, "valueformat": ".0f"}, title: {"text": "Users online"},
+ ticker: {showticker: true}, vmax: 500, domain: {y: [0, 1], x: [0.25, 0.75]}
+ },{
+ y: [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]
+ }];
-var layout = {width: 500, height: 500, xaxis: {range: [0, 62]}};
-
-Plotly.newPlot(gd,data,layout);
+var layout = {width: 600, height: 450, xaxis: {range: [0, 62]}};
+Plotly.newPlot(gd,data,layout);
\ No newline at end of file
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-angular-gauge.html b/_posts/plotly_js/financial/indicator1/2019-07-29-angular-gauge.html
new file mode 100644
index 000000000000..7cc40839cc8a
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-angular-gauge.html
@@ -0,0 +1,17 @@
+---
+name: A Single Angular Gauge Chart
+plot_url: https://codepen.io/plotly/embed/xvgeVj/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+---
+Plotly.newPlot(gd,data,layout);
+
+var data = [type: "indicator", mode: "gauge+number"}, value: 450,
+ title: {text: "Speed"}, {domain: {x: [0, 1], y: [0, 1]}];
+
+var layout = {width: 600, height: 400};
+Plotly.newPlot(gd,data,layout);
\ No newline at end of file
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-basic-data-card.html b/_posts/plotly_js/financial/indicator1/2019-07-29-basic-data-card.html
new file mode 100644
index 000000000000..420661ccd008
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-basic-data-card.html
@@ -0,0 +1,20 @@
+---
+name: Data Cards / Big Numbers
+plot_url: https://codepen.io/plotly/embed/bXabjP/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 4.1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Data card helps to display more contextual information about the data. Sometimes one number is all you want to see in a report, such as total sales, annual revenue, etc. This example shows how to visualize these big numbers:
+---
+var data = [
+ {type: "indicator", mode: "number+delta", value: 400, number: {prefix: "$"},
+ delta: {position: "top", reference: 320}, domain: {x: [0, 1], y: [0, 1]}}];
+
+var layout = {paper_bgcolor: "lightgray", width: 600, height: 200,
+ margin: {"t": 0, "b": 0, "l": 0, "r": 0}}
+
+Plotly.newPlot(gd,data,layout);
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template2.html b/_posts/plotly_js/financial/indicator1/2019-07-29-bullet.html
similarity index 50%
rename from _posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template2.html
rename to _posts/plotly_js/financial/indicator1/2019-07-29-bullet.html
index 7806b57d1d6b..fdc670d7b2a1 100644
--- a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template2.html
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-bullet.html
@@ -3,7 +3,7 @@
plot_url: https://codepen.io/plotly/embed/EqZBWg/?height=600&theme-id=15263&default-tab=result
language: plotly_js
suite: indicator
-order: 2
+order: 3
sitemap: false
arrangement: horizontal
markdown_content: |
@@ -11,10 +11,9 @@
The equivalent of above "angular gauge":
---
-var data = [{domain: {x: [0.20, 1], y: [0.25, 0.92]},
- title: {text: "Avg order size"},
- type: "indicator", mode: "number+gauge", gauge: {shape: "bullet"}, value: 220}];
-
-var layout = {width: 500, height: 250, shapes: [{type: "rect", x0: 0.20, x1: 1, y0: 0.25, y1: 0.92}]};
+var data = [
+ type: "indicator", mode: "number+gauge", gauge: {shape: "bullet"},
+ value: 220}, {domain: {x: [0, 1], y: [0, 1]}, title: {text: "Avg order size"}];
+var layout = {width: 600, height: 100};
Plotly.newPlot(gd,data,layout);
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template.html b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template.html
deleted file mode 100644
index ec449472274f..000000000000
--- a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template.html
+++ /dev/null
@@ -1,43 +0,0 @@
----
-name: Overview
-plot_url: https://codepen.io/plotly/embed/ymVYPV/?height=600&theme-id=15263&default-tab=result
-language: plotly_js
-suite: indicator
-order: 1
-sitemap: false
-arrangement: horizontal
-markdown_content: |
-
- In this tutorial we introduce a new trace named "Indicator". The purpose of "indicator" is to visualize a single value specified by the "value" attribute.
- Three distinct visual elements are available to represent that value: number, delta and gauge. Any combination of them can be specified via the "mode" attribute.
- Top-level attributes are:
- - value: the value to visualize
- - mode: which visual elements to draw
- - align: how to align number and delta (left, center, right)
- - domain: the extent of the figure
-
- Then we can configure the 3 different visual elements via their respective container:
- - number is simply a representation of the number in text. It has attributes:
- - valueformat: to format the number
- - prefix: a string before the number
- - suffix: a string after the number
- - font.(family|size): to control the font
-
- "delta" simply displays the difference between the value with respect to a reference. It has attributes:
- - reference: the number to compare the value with
- - relative: whether that difference is absolute or relative
- - valueformat: to format the delta
- - (increasing|decreasing).color: color to be used for positive or decreasing delta
- - (increasing|decreasing).symbol: symbol displayed on the left of the delta
- - font.(family|size): to control the font
- - position: position relative to `number` (either top, left, bottom, right)
-
- Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right.
- There are two gauge types: [angular](https://plot.ly/javascript/gauge-charts/) and [bullet](https://plot.ly/javascript/bullet-charts/). Let's fist look at one "angular gauge" example:
-
----
-var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 450, title: {text: "Speed"},
- type: "indicator", mode: "gauge+number"}];
-
-var layout = {width: 600, height: 400};
-Plotly.newPlot(gd,data,layout);
\ No newline at end of file
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template4.html b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template4.html
deleted file mode 100644
index 65c4ce7d1b22..000000000000
--- a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template4.html
+++ /dev/null
@@ -1,37 +0,0 @@
----
-name: Data Cards
-plot_url: https://codepen.io/plotly/embed/VopPLb/?height=600&theme-id=15263&default-tab=result
-language: plotly_js
-suite: indicator
-order: 4
-sitemap: false
-arrangement: horizontal
-markdown_content: |
-
- Data card helps to display more contextual information about the data.
----
-var data = [
- {domain: {x: [0, 0.5], y: [0, 0.5]}, type: "indicator",
- mode: "number", value: 3000},
- {domain: {x: [0, 0.5], y: [0.5, 1.0]}, type: "indicator",
- mode: "number+delta", value: 200, delta: {position: "bottom",
- reference: 20}},
- {domain: {x: [0.5, 1.0], y: [0, 0.5]}, type: "indicator",
- mode: "number", number: {suffix: " km/h"}, value: 40},
- {domain: {x: [0.5, 1.0], y: [0.5, 1.0]}, type: "indicator",
- mode: "number+delta", number: {prefix: "$"},
- value: 400, delta: {position: "top", reference: 320}}];
-
-var layout = {paper_bgcolor: "lightgray", width: 600, height: 200,
- margin: {"t": 0, "b": 0, "l": 0, "r": 0}, shapes: [
- {type: "rect", x0: 0, x1: 0.5, y0: 0.5, y1: 1, line: {
- color: "white", width: 1 }},
- {type: "rect", x0: 0, x1: 0.5, y0: 0, y1: 0.5, line: {
- color: "white", width: 1 }},
- {type: "rect", x0: 0.5, x1: 1.0, y0: 0.5, y1: 1, line: {
- color: "white", width: 1}},
- {type: "rect", x0: 0.5, x1: 1.0, y0: 0, y1: 0.5,
- line: {color: "white", width: 1}}]}
-
-Plotly.newPlot(gd,data,layout);
-
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template5.html b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template5.html
deleted file mode 100644
index 3c79747bc9d1..000000000000
--- a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template5.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
-name: Big Numbers
-plot_url: https://codepen.io/plotly/embed/PMppGM/?height=600&theme-id=15263&default-tab=result
-language: plotly_js
-suite: indicator
-order: 5
-sitemap: false
-arrangement: horizontal
-markdown_content: |
-
- Sometimes one number is all you want to see in a report, such as total sales, annual revenue, etc. This example shows how to visualize these big numbers:
----
-var data = [{domain: {x: [0, 0.33], y: [0, 0.33]},
- type: "indicator", mode: "number+delta", delta: {increasing: {
- color: "darkblue", symbol: "+"}, valueformat: ".1%", reference: 400,
- relative: true}, gauge: {bgcolor: "darkblue"}, value: 450},
- {domain: {x: [0, 0.33], y: [0.33, 0.66]}, type: "indicator", mode: "delta",
- delta: {reference: 400, relative: true}, value: 350},
- {domain: {x: [0, 0.33], y: [0.66, 1.0]}, type: "indicator", mode: "number",
- delta: {reference: 400, relative: true}, value: 430},
- {domain: {x: [0.33, 0.66], y: [0, 0.66]}, title: {"text": "Accounts"},
- type: "indicator", mode: "number+delta",
- delta: {reference: 400, relative: true, position: "top"}, value: 200},
- {domain: {x: [0.33, 0.66], y: [0.66, 1.0]}, value: 350, type: "indicator",
- mode: "number+delta", delta: {reference: 400, relative: true}},
- {domain: {x: [0.66, 1], y: [0, 1]}, type: "indicator", mode: "number+delta",
- title: {"text": "Accounts
Subtitle
Subsubtitle"},
- delta: {reference: 400, relative: true}, value: 450}];
-
-var layout = {width: 600, height: 400, "margin": {t: 25, r: 25, l: 25, b: 25},
- shapes: [{type: "rect", x0: 0, x1: 0.33, y0: 0.66, y1: 1,
- line: {color: "darkblue", width: 1}},
- {type: "rect", x0: 0, x1: 0.33, y0: 0.33, y1: 0.66,
- line: {color: "darkblue", width: 1}},
- {type: "rect", x0: 0, x1: 0.33, y0: 0, y1: 0.33,
- line: {color: "darkblue", width: 1}},
- {type: "rect", x0: 0.33, x1: 0.66, y0: 0.66, y1: 1,
- line: {color: "darkblue", width: 1}},
- {type: "rect", x0: 0.33, x1: 0.66, y0: 0, y1: 0.66,
- line: {color: "darkblue", width: 1}},
- {type: "rect", x0: 0.66, x1: 1.0, y0: 0, y1: 1,
- line: {color: "darkblue", width: 1}}]};
-
-Plotly.newPlot(gd,data,layout);
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template6.html b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template6.html
deleted file mode 100644
index bf7a308fb425..000000000000
--- a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template6.html
+++ /dev/null
@@ -1,26 +0,0 @@
----
-name: Big Numbers
-plot_url: https://codepen.io/plotly/embed/ymMWRR/?height=600&theme-id=15263&default-tab=result
-language: plotly_js
-suite: indicator
-order: 6
-sitemap: false
-arrangement: horizontal
-markdown_content: |
-
- We can also show a combination of both shapes (angular, bullet), and different modes (guage, delta, and value) in one chart.
----
-var data = [
- {type: "indicator", value: 200, delta: {reference: 160},
- gauge: {axis: {visible: false, range: [0, 200]}}, domain: {row: 0, column: 0}},
- {type: "indicator", value: 120, gauge: {shape: "bullet", axis: {visible: false, range: [-200, 200]}},
- domain: {x: [0.05, 0.5], y: [0.15, 0.35]}},
- {type: "indicator", mode: "number+delta", value: 300, domain: {row: 0, column: 1}},
- {type: "indicator", mode: "delta", value: 40, domain: {row: 1, column: 1}}];
-
-var layout = {width: 600, height: 400, margin: {"t": 25, "b": 25, "l": 25, "r": 25},
- grid: {rows: 2, columns: 2, pattern: "independent"}, template: {
- data: {indicator: [{title: {text: "Speed"}, mode: "number+delta+gauge",
- delta: {reference: 90}}]}}};
-
-Plotly.newPlot(gd,data,layout);
\ No newline at end of file
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-overview.html b/_posts/plotly_js/financial/indicator1/2019-07-29-overview.html
new file mode 100644
index 000000000000..f74a694fd0a3
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-overview.html
@@ -0,0 +1,49 @@
+---
+name: Overview
+plot_url: https://codepen.io/plotly/embed/ymMWRR/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ In this tutorial we introduce a new trace named "Indicator". The purpose of "indicator" is to visualize a single value specified by the "value" attribute.
+ Three distinct visual elements are available to represent that value: number, delta and gauge. Any combination of them can be specified via the "mode" attribute.
+ Top-level attributes are:
+ * value: the value to visualize
+ * mode: which visual elements to draw
+ * align: how to align number and delta (left, center, right)
+ * domain: the extent of the figure
+
+ Then we can configure the 3 different visual elements via their respective container:
+ * number is simply a representation of the number in text. It has attributes:
+ * valueformat: to format the number
+ * prefix: a string before the number
+ * suffix: a string after the number
+ * font.(family|size): to control the font
+
+ "delta" simply displays the difference between the value with respect to a reference. It has attributes:
+ * reference: the number to compare the value with
+ * relative: whether that difference is absolute or relative
+ * valueformat: to format the delta
+ * (increasing|decreasing).color: color to be used for positive or decreasing delta
+ * (increasing|decreasing).symbol: symbol displayed on the left of the delta
+ * font.(family|size): to control the font
+ * position: position relative to `number` (either top, left, bottom, right)
+
+ Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right.
+ There are two gauge types: [angular](https://plot.ly/javascript/gauge-charts/) and [bullet](https://plot.ly/javascript/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (guage, delta, and value):
+---
+var data = [
+ {type: "indicator", value: 200, delta: {reference: 160},
+ gauge: {axis: {visible: false, range: [0, 200]}}, domain: {row: 0, column: 0}},
+ {type: "indicator", value: 120, gauge: {shape: "bullet", axis: {visible: false,
+ range: [-200, 200]}}, domain: {x: [0.05, 0.5], y: [0.15, 0.35]}},
+ {type: "indicator", mode: "number+delta", value: 300, domain: {row: 0, column: 1}},
+ {type: "indicator", mode: "delta", value: 40, domain: {row: 1, column: 1}}];
+
+var layout = {width: 600, height: 400, margin: {t: 25, b: 25, l: 25, r: 25},
+ grid: {rows: 2, columns: 2, pattern: "independent"}, template: {
+ data: {indicator: [{title: {text: "Speed"}, mode: "number+delta+gauge",
+ delta: {reference: 90}}]}}};
\ No newline at end of file
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-several-big-numbers.html b/_posts/plotly_js/financial/indicator1/2019-07-29-several-big-numbers.html
new file mode 100644
index 000000000000..1adce3f49d62
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-several-big-numbers.html
@@ -0,0 +1,28 @@
+---
+name:
+plot_url: https://codepen.io/plotly/embed/PMppGM/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 7
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ It's possible to display several numbers
+---
+var data = [
+ {
+ type: "indicator", mode: "number+delta", value: 200, domain: {x: [0, 0.5],
+ y: [0, 0.5]}, delta: {reference: 400, relative: true, position: "top"}},
+ {
+ type: "indicator", mode: "number+delta", value: 350,
+ delta: {reference: 400, relative: true}, domain: {x: [0, 0.5], y: [0.5, 1]}},
+ {
+ type: "indicator", mode: "number+delta", value: 450,
+ title: {"text": "Accounts
Subtitle
Subsubtitle"},
+ delta: {reference: 400, relative: true}, domain: {x: [0.6, 1], y: [0, 1]}}];
+
+var layout = {width: 600, height: 400, margin: {t: 25, r: 25, l: 25, b: 25}};
+
+Plotly.newPlot(gd,data,layout);
+