Merge pull request plotly#1422 from plotly/indicator

Mahdis-z · web-flow · commit ce813d4a6873 · 2019-08-02T17:13:35.000-04:00
indicator js tutorial
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
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
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
@@ -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
@@ -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);
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
@@ -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
@@ -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
@@ -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
@@ -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<br><span style='font-size:0.8em;color:gray'>Subtitle</span><br><span style='font-size:0.8em;color:gray'>Subsubtitle</span>"},
+     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
@@ -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);
