From 3acf275a7464cb966f743a77b6860497f672347a Mon Sep 17 00:00:00 2001 From: mahdis-z Date: Tue, 6 Aug 2019 23:37:47 -0400 Subject: [PATCH 1/2] bullet charts --- ...5-12-20-bullet-charts_plotly_js_index.html | 17 +++++++++ .../bullet/2019-07-30-advance-bullet.html | 24 ++++++++++++ .../bullet/2019-07-30-basic-bullet.html | 20 ++++++++++ .../bullet/2019-07-30-custom-bullet.html | 25 ++++++++++++ .../bullet/2019-07-30-multi-bullet.html | 38 +++++++++++++++++++ 5 files changed, 124 insertions(+) create mode 100755 _posts/plotly_js/financial/bullet/2015-12-20-bullet-charts_plotly_js_index.html create mode 100644 _posts/plotly_js/financial/bullet/2019-07-30-advance-bullet.html create mode 100644 _posts/plotly_js/financial/bullet/2019-07-30-basic-bullet.html create mode 100644 _posts/plotly_js/financial/bullet/2019-07-30-custom-bullet.html create mode 100644 _posts/plotly_js/financial/bullet/2019-07-30-multi-bullet.html 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..c4f0ead61c65 --- /dev/null +++ b/_posts/plotly_js/financial/bullet/2015-12-20-bullet-charts_plotly_js_index.html @@ -0,0 +1,17 @@ +--- +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 +page_type: example_index +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..3ee51ad2ddf3 --- /dev/null +++ b/_posts/plotly_js/financial/bullet/2019-07-30-basic-bullet.html @@ -0,0 +1,20 @@ +--- +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 is 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); + From caa46c3c6c073d667bb46285a14c8e8707fe11d7 Mon Sep 17 00:00:00 2001 From: mahdis-z Date: Tue, 13 Aug 2019 15:05:48 -0400 Subject: [PATCH 2/2] bullet charts were added to index page --- .../bullet/2015-12-20-bullet-charts_plotly_js_index.html | 1 - _posts/plotly_js/financial/bullet/2019-07-30-basic-bullet.html | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index c4f0ead61c65..216ac89b26cc 100755 --- 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 @@ -6,7 +6,6 @@ layout: user-guide thumbnail: thumbnail/bullet.png language: plotly_js -page_type: example_index has_thumbnail: true display_as: financial order: 8 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 index 3ee51ad2ddf3..73a8d6ca2f7d 100644 --- a/_posts/plotly_js/financial/bullet/2019-07-30-basic-bullet.html +++ b/_posts/plotly_js/financial/bullet/2019-07-30-basic-bullet.html @@ -1,4 +1,5 @@ --- +--- name: Basic Bullet Charts plot_url: https://codepen.io/plotly/embed/EqZBWg/?height=600&theme-id=15263&default-tab=result language: plotly_js @@ -9,7 +10,7 @@ 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 is 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. + 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"},