diff --git a/_posts/plotly_js/basic/gauge/2015-12-20-basic-gauge.html b/_posts/plotly_js/basic/gauge/2015-12-20-basic-gauge.html
deleted file mode 100644
index 864c97e01833..000000000000
--- a/_posts/plotly_js/basic/gauge/2015-12-20-basic-gauge.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-name: Circular Gauge Chart
-plot_url: https://codepen.io/plotly/embed/rxeZME/?height=600&theme-id=15263&default-tab=result
-language: plotly_js
-suite: gauge-charts
-order: 1
-sitemap: false
-arrangement: horizontal
----
-// Enter a speed between 0 and 180
-var level = 175;
-
-// Trig to calc meter point
-var degrees = 180 - level,
- radius = .5;
-var radians = degrees * Math.PI / 180;
-var x = radius * Math.cos(radians);
-var y = radius * Math.sin(radians);
-
-// Path: may have to change to create a better triangle
-var mainPath = 'M -.0 -0.025 L .0 0.025 L ',
- pathX = String(x),
- space = ' ',
- pathY = String(y),
- pathEnd = ' Z';
-var path = mainPath.concat(pathX,space,pathY,pathEnd);
-
-var data = [{ type: 'scatter',
- x: [0], y:[0],
- marker: {size: 28, color:'850000'},
- showlegend: false,
- name: 'speed',
- text: level,
- hoverinfo: 'text+name'},
- { values: [50/6, 50/6, 50/6, 50/6, 50/6, 50/6, 50],
- rotation: 90,
- text: ['TOO FAST!', 'Pretty Fast', 'Fast', 'Average',
- 'Slow', 'Super Slow', ''],
- textinfo: 'text',
- textposition:'inside',
- marker: {colors:['rgba(14, 127, 0, .5)', 'rgba(110, 154, 22, .5)',
- 'rgba(170, 202, 42, .5)', 'rgba(202, 209, 95, .5)',
- 'rgba(210, 206, 145, .5)', 'rgba(232, 226, 202, .5)',
- 'rgba(255, 255, 255, 0)']},
- labels: ['151-180', '121-150', '91-120', '61-90', '31-60', '0-30', ''],
- hoverinfo: 'label',
- hole: .5,
- type: 'pie',
- showlegend: false
-}];
-
-var layout = {
- shapes:[{
- type: 'path',
- path: path,
- fillcolor: '850000',
- line: {
- color: '850000'
- }
- }],
- title: 'Gauge
Speed 0-100',
- height: 1000,
- width: 1000,
- xaxis: {zeroline:false, showticklabels:false,
- showgrid: false, range: [-1, 1]},
- yaxis: {zeroline:false, showticklabels:false,
- showgrid: false, range: [-1, 1]}
-};
-
-Plotly.newPlot('myDiv', data, layout);
diff --git a/_posts/plotly_js/basic/gauge/2015-12-20-gauge-chart_plotly_js_index.html b/_posts/plotly_js/basic/gauge/2015-12-20-gauge-chart_plotly_js_index.html
deleted file mode 100755
index 7c0f017d09a6..000000000000
--- a/_posts/plotly_js/basic/gauge/2015-12-20-gauge-chart_plotly_js_index.html
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: JavaScript Graphing Library D3.js-based Gauge Charts| Examples | Plotly
-name: Gauge Charts
-permalink: javascript/gauge-charts/
-description: How to make a D3.js-based circular gauge chart in javascript.
-layout: user-guide
-thumbnail: thumbnail/gauge.jpg
-language: plotly_js
-has_thumbnail: true
-display_as: basic
-order: 12
-redirect_from: javascript-graphing-library/gauge-charts/
----
-{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","gauge-charts" | sort: "order" %}
-{% include auto_examples.html examples=examples %}
diff --git a/_posts/plotly_js/financial/indicator1/2015-12-20-indicator_plotly_js_index.html b/_posts/plotly_js/financial/indicator1/2015-12-20-indicator_plotly_js_index.html
new file mode 100755
index 000000000000..f4326ff2f439
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2015-12-20-indicator_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+title: JavaScript Graphing Library D3.js-based Indicator| Examples | Plotly
+name: Indicators
+permalink: javascript/indicator/
+description: How to make a D3.js-based gauge chart in javascript.
+layout: user-guide
+thumbnail: thumbnail/indicator.jpg
+language: plotly_js
+page_type: example_index
+has_thumbnail: true
+display_as: financial
+order: 4
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","indicator" | sort: "order" %}
+{% include auto_examples.html examples=examples %}
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
new file mode 100644
index 000000000000..ec449472274f
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template.html
@@ -0,0 +1,43 @@
+---
+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_template2.html b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template2.html
new file mode 100644
index 000000000000..7806b57d1d6b
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template2.html
@@ -0,0 +1,20 @@
+---
+name: Bullet Gauge
+plot_url: https://codepen.io/plotly/embed/EqZBWg/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: indicator
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ 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}]};
+
+Plotly.newPlot(gd,data,layout);
diff --git a/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html
new file mode 100644
index 000000000000..9ca3895cbc7e
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html
@@ -0,0 +1,20 @@
+---
+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
+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 layout = {width: 500, height: 500, xaxis: {range: [0, 62]}};
+
+Plotly.newPlot(gd,data,layout);
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
new file mode 100644
index 000000000000..65c4ce7d1b22
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template4.html
@@ -0,0 +1,37 @@
+---
+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
new file mode 100644
index 000000000000..3c79747bc9d1
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template5.html
@@ -0,0 +1,44 @@
+---
+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
new file mode 100644
index 000000000000..bf7a308fb425
--- /dev/null
+++ b/_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template6.html
@@ -0,0 +1,26 @@
+---
+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