diff --git a/_posts/plotly_js/financial/bullet/2015-12-20-bullet-charts_plotly_js_index.html b/_posts/plotly_js/financial/bullet/2015-12-20-bullet-charts_plotly_js_index.html new file mode 100755 index 000000000000..216ac89b26cc --- /dev/null +++ b/_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 %} + diff --git a/_posts/plotly_js/financial/bullet/2019-07-30-advance-bullet.html b/_posts/plotly_js/financial/bullet/2019-07-30-advance-bullet.html new file mode 100644 index 000000000000..0352f06b07ab --- /dev/null +++ b/_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 :"Profit"}, + 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); diff --git a/_posts/plotly_js/financial/bullet/2019-07-30-basic-bullet.html b/_posts/plotly_js/financial/bullet/2019-07-30-basic-bullet.html new file mode 100644 index 000000000000..73a8d6ca2f7d --- /dev/null +++ b/_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); \ No newline at end of file diff --git a/_posts/plotly_js/financial/bullet/2019-07-30-custom-bullet.html b/_posts/plotly_js/financial/bullet/2019-07-30-custom-bullet.html new file mode 100644 index 000000000000..5759ac75748f --- /dev/null +++ b/_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 :"Profit
U.S. $", + 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); \ No newline at end of file diff --git a/_posts/plotly_js/financial/bullet/2019-07-30-multi-bullet.html b/_posts/plotly_js/financial/bullet/2019-07-30-multi-bullet.html new file mode 100644 index 000000000000..b3e15d35b846 --- /dev/null +++ b/_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); +