Merge pull request #1444 from plotly/bullet

bullet charts

Author: Mahdis-z

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

@@ -0,0 +1,16 @@
+---
+title: JavaScript Graphing Library D3.js-based Bullet Charts| Examples | Plotly
+name: Bullet Charts
+permalink: javascript/bullet-charts/
+description: How to make a D3.js-based bullet chart in javascript.
+layout: user-guide
+thumbnail: thumbnail/bullet.png
+language: plotly_js
+has_thumbnail: true
+display_as: financial
+order: 8
+redirect_from: javascript-graphing-library/bullet-charts
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","bullet-charts" | sort: "order" %}
+{% include auto_examples.html examples=examples %}
+

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

@@ -0,0 +1,24 @@
+---
+name: Add Steps, and Threshold
+plot_url: https://codepen.io/plotly/embed/gVvazV/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: bullet-charts
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  Below is the same example using "steps" attribute, which is shown as shading, and "threshold" to determine boundaries that visually alert you if the value cross a defined threshold.
+---
+var data = [{
+  type: "indicator", mode: "number+gauge+delta", value: 220,
+  domain: {x: [0, 1], y: [0, 1]}, title: {text :"<b>Profit</b>"},
+  delta: {reference: 200}, gauge: {shape: "bullet", axis: {range: [null, 300]},
+  threshold: {line: {color: "red", width: 2}, thickness: 0.75, value: 280},
+  steps: [{range: [0, 150], color: "lightgray"}, {range: [150, 250], color: "gray"}]}
+}];
+
+var layout = {width: 600, height: 250};
+var config = {responsive: true};
+
+Plotly.newPlot(gd,data,layout,config);

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

@@ -0,0 +1,21 @@
+---
+---
+name: Basic Bullet Charts
+plot_url: https://codepen.io/plotly/embed/EqZBWg/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: bullet-charts
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  Stephen Few's Bullet Chart was invented to replace dashboard [gauges](https://plot.ly/javascript/gauge-charts/) and meters, combining both types of charts into simple bar charts with qualitative bars (steps), quantitative bar (bar) and performance line (threshold); all into one simple layout.
+  Steps typically are broken into several values, which are defined with an array. The bar represent the actual value that a particular variable reached, and the threshold usually indicate a goal point relative to the value achieved by the bar. See [indicator page](https://plot.ly/javascript/gauge-charts/) for more detail.
+---
+var data = [{
+  type: "indicator", mode: "number+gauge+delta", gauge: {shape: "bullet"},
+  delta: {reference: 300}, value: 220, domain: {x: [0, 1], y: [0, 1]},
+  title: {text: "Profit"}}];
+
+var layout = {width: 600, height: 250};
+Plotly.newPlot(gd,data,layout);

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

@@ -0,0 +1,25 @@
+---
+name: Custom Bullet Chart
+plot_url: https://codepen.io/plotly/embed/OKQVjE/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: bullet-charts
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  The following example shows how to customize your charts. For more information about all possible options check our [reference page](https://plot.ly/javascript/reference/#indicator).
+---
+var data = [{
+  type: "indicator", mode: "number+gauge+delta", value: 220,
+  domain: {x: [0, 1], y: [0, 1]}, delta: {reference: 280, position: "top"},
+  title: {text :"<b>Profit</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>",
+  font: {"size": 14}}, gauge: {shape: "bullet", axis: {range: [null, 300]},
+  threshold: {line: {color: "red", width: 2}, thickness: 0.75, value: 270}, bgcolor: "white",
+  steps: [{range: [0, 150], color: "cyan"}, {range: [150, 250], color: "royalblue"}],
+  bar: {color: "darkblue"}}}];
+
+var layout = {width: 600, height: 230};
+var config = {responsive: true};
+
+Plotly.newPlot(gd,data,layout,config);

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

@@ -0,0 +1,38 @@
+---
+name: Multi Bullet
+plot_url: https://codepen.io/plotly/embed/xvYGyq/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: bullet-charts
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+  Bullet charts can be stacked for comparing several values at once as illustrated below:
+---
+var data = [{
+    type: "indicator", mode: "number+gauge+delta", value: 180,
+    delta: {reference: 200}, domain: {x: [0.25, 1], y: [0.08, 0.25]},
+    title: {text: "Revenue"}, gauge: {shape: "bullet", axis: {range: [null, 300]},
+    threshold: {line: {color: "black", width: 2}, thickness: 0.75, value: 170},
+    steps: [{range: [0, 150], color: "gray"}, {range: [150, 250],
+    color: "lightgray"}], bar: {color: "black"}}
+    },{
+    type: "indicator", mode: "number+gauge+delta", value: 35,
+    delta: {reference: 200}, domain: {x: [0.25, 1], y: [0.4, 0.6]},
+    title: {text: "Profit"}, gauge: {shape: "bullet", axis: {range: [null, 100]},
+    threshold: {line: {color: "black", width: 2}, thickness: 0.75, value: 50},
+    steps: [{range: [0, 25], color: "gray"}, {range: [25, 75], color: "lightgray"}],
+    bar: {color: "black"}}
+    }, {
+    type: "indicator", mode: "number+gauge+delta", value: 220,
+    delta: {reference: 200}, domain: {x: [0.25, 1], y: [0.7, 0.9]},
+    title: {text :"Satisfaction"}, gauge: {shape: "bullet", axis: {range: [null, 300]},
+    threshold: {line: {color: "black", width: 2}, thickness: 0.75, value: 210},
+    steps: [{range: [0, 150], color: "gray"}, {range: [150, 250], color: "lightgray"}],
+    bar: {color: "black"}}
+  }];
+
+var layout = {width: 600, height: 250, margin: {t: 10, "r": 25, "l": 25, "b": 10}};
+Plotly.newPlot(gd,data,layout);
+