Merge pull request #1427 from plotly/gauge

gauge charts

Author: Mahdis-z

_posts/plotly_js/financial/gauge/2015-12-20-gauge-charts_plotly_js_index.html

@@ -0,0 +1,16 @@
+---
+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 gauge chart in javascript.
+layout: user-guide
+thumbnail: thumbnail/gauge.jpg
+language: plotly_js
+page_type: example_index
+has_thumbnail: true
+display_as: financial
+order: 4
+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 %}

_posts/plotly_js/financial/gauge/2019-07-30-advance-gauge.html

@@ -0,0 +1,21 @@
+---
+name: Add Steps, Threshold, and Delta
+plot_url: https://codepen.io/plotly/embed/zgwrMW/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: gauge-charts
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  The following examples include "steps" attribute shown as shading inside the radial arc, "delta" which is the
+  difference of the value and goal (reference - value), and "threshold" to determine boundaries that visually alert you if the value cross a defined threshold.
+---
+var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 450, title: {text: "Speed"},
+    type: "indicator", mode: "gauge+number+delta", delta: {reference: 380}, gauge:
+    {axis: {range: [null, 500]}, steps: [{range: [0, 250], color: "lightgray"},
+    {range: [250, 400], color: "gray"}], threshold: {line: {color: "red", width: 4},
+    thickness: 0.75, value: 490}}}];
+
+var layout = {width: 600, height: 500, margin: {t: 0, b: 0}};
+Plotly.newPlot(gd,data,layout);

_posts/plotly_js/financial/gauge/2019-07-30-basic-gauge.html

@@ -0,0 +1,21 @@
+---
+name: Basic Gauge
+plot_url: https://codepen.io/plotly/embed/aeWOEx/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: gauge-charts
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  A radial gauge chart has a circular arc, which displays a single value to estimate progress toward a goal.
+  The bar shows the target value, and the shading represents the progress toward that goal. Gauge charts, known as
+  speedometer charts as well. This chart type is usually used to illustrate key business indicators.
+
+  The example below displays a basic gauge chart with default attributes. For more information about different added attributes check [indicator](https://plot.ly/javascript/indicator/) tutorial.
+---
+var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 270, title: {text: "Speed"},
+    type: "indicator", mode: "gauge+number"}];
+
+var layout = {width: 500, height: 500, margin: {t: 0, b: 0}};
+Plotly.newPlot(gd,data,layout);

_posts/plotly_js/financial/gauge/2019-07-30-custom-gauge.html

@@ -0,0 +1,24 @@
+---
+name: Custom Gauge Chart
+plot_url: https://codepen.io/plotly/embed/zgZYmZ/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: gauge-charts
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  The following example shows how to style your gauge charts. For more information about all possible options check our [reference page](https://plot.ly/javascript/reference/#indicator).
+---
+var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 420, title: {text: "Speed",
+    font: {size: 24}}, type: "indicator", mode: "gauge+number+delta",
+    delta: {reference: 400, increasing: {color: "RebeccaPurple"}},
+    gauge: {axis: {range: [null, 500], tickwidth: 1, tickcolor: "darkblue"},
+    bar: {color: "darkblue"}, bgcolor: "white", borderwidth: 2, bordercolor: "gray",
+    steps: [{range: [0, 250], color: 'cyan'}, {range: [250, 400], color: 'royalblue'
+    }], threshold: {line: {color: "red", width: 4}, thickness: 0.75, value: 490}}}];
+
+var layout = {width: 500, height: 400, margin: {t: 25, r: 25, l: 25, b: 25},
+    paper_bgcolor: "lavender", font: {color: "darkblue", family: "Arial"}};
+
+Plotly.newPlot(gd,data,layout);

_posts/plotly_js/financial/gauge/2019-07-30-multi-gauge.html

@@ -0,0 +1,39 @@
+---
+name: Multi Gauge
+plot_url: https://codepen.io/plotly/embed/bXBVZp/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: gauge-charts
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  Gauge charts are useful for comparing values between a small number of variables by using multiple gauges.
+
+---
+var data = [
+  {
+  domain: {x: [0, 0.5], y: [0.5, 1]}, value: 350, title: {text: "Speed"},
+  type: "indicator", mode: "gauge+number", delta: {reference: 400}, gauge: {axis:
+  {range: [null, 500]}, bar:{color:"darkblue"}, steps: [{range: [0, 250],
+  color: "cyan"}, {range: [250, 400], color: "royalblue"}], threshold: {line:
+  {color: "red", width: 4}, thickness: 0.8, value: 490}}},
+  {
+  domain: {x: [0.6, 1], y: [0.5, 0.8]}, value: 300, type: "indicator",
+  title: {text: "Speed<br><span style='font-size:0.8em;color:gray'>Time</span>"},
+  delta: {reference: 400}, gauge: {axis: {range: [null, 500]},
+  bar:{color:"darkblue"}, bgcolor: "white", steps: [{range: [0, 250],
+  color: "cyan"}, {range: [250, 400], color: "royalblue"}], mode: "gauge+delta",
+  threshold: {line: {color: "red", width: 4}, thickness: 0.75, value: 490}}},
+  {
+  domain: {x: [0, 1], y: [0, 0.4]}, value: 240, title: {"text": "Speed"},
+  type: "indicator", mode: "gauge+number+delta", delta: {"reference": 400},
+  gauge: {bar: {color: "darkblue"}, axis: {range: [null, 500]}, steps: [{range: [0, 250],
+  color: "cyan"}, {range: [250, 400], color: "royalblue"}],
+  threshold: {line: {color: "red", width: 4}, thickness: 0.75, value: 490}}}];
+
+var layout = {width: 500, height: 500, margin: {t: 25, r: 25, l: 25, b: 25},
+    shapes: [{type: "rect", x0: -0.03, x1: 0.56, y0: 0.55, y1: 1,
+    line: {color: "gray", width: 1}}]};
+
+Plotly.newPlot(gd,data,layout);