Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4760b8d

Browse files
author
Joseph Damiba
committed
merging master
2 parents fa4c8b1 + 5f06da5 commit 4760b8d

16 files changed

+325
-83
lines changed

‎404.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
<h3>Plot twist!</h3>
8080
<br />
8181
<h5>There's nothing here...</h5><br />
82-
<h5> <a href="http://help.plot.ly">Back to Plotly Help</a></h5>
82+
<h5> <a href="https://plot.ly/graphing-libraries">Back to Graphing Libraries documentation</a></h5>
8383
</div>
8484
</div>
8585

‎_data/plotschema.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_posts/2015-07-26-index.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -168,15 +168,16 @@ <h2>Plotly Dash Open Source Graphing Library</h2>
168168
</ul>
169169
</div>
170170
</section>
171-
</div>
172-
</main>
171+
</div>
172+
</main>
173173

174-
{% include _new/_page-components/_footer-main.html %}
174+
{% include _new/_page-components/_footer-main.html %}
175175

176-
<script src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/js/libraries.min.js"></script>
177-
<script src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/js/jquery.parallax.js"></script>
178-
<script>
179-
$(document).ready(function() {
176+
177+
<script src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/js/libraries.min.js"></script>
178+
<script src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/js/jquery.parallax.js"></script>
179+
<script>
180+
$(document).ready(function () {
180181
// jQuery Selections
181182
var scene = $(".hero-bg");
182183

‎_posts/plotly_js/basic/gauge/2015-12-20-basic-gauge.html

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎_posts/plotly_js/basic/gauge/2015-12-20-gauge-chart_plotly_js_index.html renamed to ‎_posts/plotly_js/financial/gauge/2015-12-20-gauge-charts_plotly_js_index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
title: JavaScript Graphing Library D3.js-based Gauge Charts| Examples | Plotly
33
name: Gauge Charts
44
permalink: javascript/gauge-charts/
5-
description: How to make a D3.js-based circular gauge chart in javascript.
5+
description: How to make a D3.js-based gauge chart in javascript.
66
layout: user-guide
77
thumbnail: thumbnail/gauge.jpg
88
language: plotly_js
9+
page_type: example_index
910
has_thumbnail: true
10-
display_as: basic
11-
order: 12
12-
redirect_from: javascript-graphing-library/gauge-charts/
11+
display_as: financial
12+
order: 4
13+
redirect_from: javascript-graphing-library/gauge-charts
1314
---
1415
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","gauge-charts" | sort: "order" %}
1516
{% include auto_examples.html examples=examples %}

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

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

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
name: Basic Gauge
3+
plot_url: https://codepen.io/plotly/embed/aeWOEx/?height=600&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: gauge-charts
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
A radial gauge chart has a circular arc, which displays a single value to estimate progress toward a goal.
12+
The bar shows the target value, and the shading represents the progress toward that goal. Gauge charts, known as
13+
speedometer charts as well. This chart type is usually used to illustrate key business indicators.
14+
15+
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.
16+
---
17+
var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 270, title: {text: "Speed"},
18+
type: "indicator", mode: "gauge+number"}];
19+
20+
var layout = {width: 500, height: 500, margin: {t: 0, b: 0}};
21+
Plotly.newPlot(gd,data,layout);

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
name: Custom Gauge Chart
3+
plot_url: https://codepen.io/plotly/embed/zgZYmZ/?height=600&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: gauge-charts
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
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).
12+
---
13+
var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 420, title: {text: "Speed",
14+
font: {size: 24}}, type: "indicator", mode: "gauge+number+delta",
15+
delta: {reference: 400, increasing: {color: "RebeccaPurple"}},
16+
gauge: {axis: {range: [null, 500], tickwidth: 1, tickcolor: "darkblue"},
17+
bar: {color: "darkblue"}, bgcolor: "white", borderwidth: 2, bordercolor: "gray",
18+
steps: [{range: [0, 250], color: 'cyan'}, {range: [250, 400], color: 'royalblue'
19+
}], threshold: {line: {color: "red", width: 4}, thickness: 0.75, value: 490}}}];
20+
21+
var layout = {width: 500, height: 400, margin: {t: 25, r: 25, l: 25, b: 25},
22+
paper_bgcolor: "lavender", font: {color: "darkblue", family: "Arial"}};
23+
24+
Plotly.newPlot(gd,data,layout);

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
name: Multi Gauge
3+
plot_url: https://codepen.io/plotly/embed/bXBVZp/?height=600&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: gauge-charts
6+
order: 4
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
Gauge charts are useful for comparing values between a small number of variables by using multiple gauges.
12+
13+
---
14+
var data = [
15+
{
16+
domain: {x: [0, 0.5], y: [0.5, 1]}, value: 350, title: {text: "Speed"},
17+
type: "indicator", mode: "gauge+number", delta: {reference: 400}, gauge: {axis:
18+
{range: [null, 500]}, bar:{color:"darkblue"}, steps: [{range: [0, 250],
19+
color: "cyan"}, {range: [250, 400], color: "royalblue"}], threshold: {line:
20+
{color: "red", width: 4}, thickness: 0.8, value: 490}}},
21+
{
22+
domain: {x: [0.6, 1], y: [0.5, 0.8]}, value: 300, type: "indicator",
23+
title: {text: "Speed<br><span style='font-size:0.8em;color:gray'>Time</span>"},
24+
delta: {reference: 400}, gauge: {axis: {range: [null, 500]},
25+
bar:{color:"darkblue"}, bgcolor: "white", steps: [{range: [0, 250],
26+
color: "cyan"}, {range: [250, 400], color: "royalblue"}], mode: "gauge+delta",
27+
threshold: {line: {color: "red", width: 4}, thickness: 0.75, value: 490}}},
28+
{
29+
domain: {x: [0, 1], y: [0, 0.4]}, value: 240, title: {"text": "Speed"},
30+
type: "indicator", mode: "gauge+number+delta", delta: {"reference": 400},
31+
gauge: {bar: {color: "darkblue"}, axis: {range: [null, 500]}, steps: [{range: [0, 250],
32+
color: "cyan"}, {range: [250, 400], color: "royalblue"}],
33+
threshold: {line: {color: "red", width: 4}, thickness: 0.75, value: 490}}}];
34+
35+
var layout = {width: 500, height: 500, margin: {t: 25, r: 25, l: 25, b: 25},
36+
shapes: [{type: "rect", x0: -0.03, x1: 0.56, y0: 0.55, y1: 1,
37+
line: {color: "gray", width: 1}}]};
38+
39+
Plotly.newPlot(gd,data,layout);

‎_posts/plotly_js/financial/indicator1/2015-12-20-indicator_plotly_js_index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: JavaScript Graphing Library D3.js-based Indicator| Examples | Plotly
3+
name: Indicators
4+
permalink: javascript/indicator/
5+
description: How to make a D3.js-based gauge chart in javascript.
6+
layout: user-guide
7+
thumbnail: thumbnail/indicator.jpg
8+
language: plotly_js
9+
page_type: example_index
10+
has_thumbnail: true
11+
display_as: financial
12+
order: 4
13+
---
14+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","indicator" | sort: "order" %}
15+
{% include auto_examples.html examples=examples %}

‎_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
name: Overview
3+
plot_url: https://codepen.io/plotly/embed/ymVYPV/?height=600&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: indicator
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
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.
12+
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.
13+
Top-level attributes are:
14+
- value: the value to visualize
15+
- mode: which visual elements to draw
16+
- align: how to align number and delta (left, center, right)
17+
- domain: the extent of the figure
18+
19+
Then we can configure the 3 different visual elements via their respective container:
20+
- number is simply a representation of the number in text. It has attributes:
21+
- valueformat: to format the number
22+
- prefix: a string before the number
23+
- suffix: a string after the number
24+
- font.(family|size): to control the font
25+
26+
"delta" simply displays the difference between the value with respect to a reference. It has attributes:
27+
- reference: the number to compare the value with
28+
- relative: whether that difference is absolute or relative
29+
- valueformat: to format the delta
30+
- (increasing|decreasing).color: color to be used for positive or decreasing delta
31+
- (increasing|decreasing).symbol: symbol displayed on the left of the delta
32+
- font.(family|size): to control the font
33+
- position: position relative to `number` (either top, left, bottom, right)
34+
35+
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.
36+
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:
37+
38+
---
39+
var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 450, title: {text: "Speed"},
40+
type: "indicator", mode: "gauge+number"}];
41+
42+
var layout = {width: 600, height: 400};
43+
Plotly.newPlot(gd,data,layout);

‎_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template2.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: Bullet Gauge
3+
plot_url: https://codepen.io/plotly/embed/EqZBWg/?height=600&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: indicator
6+
order: 2
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
The equivalent of above "angular gauge":
12+
13+
---
14+
var data = [{domain: {x: [0.20, 1], y: [0.25, 0.92]},
15+
title: {text: "Avg order size"},
16+
type: "indicator", mode: "number+gauge", gauge: {shape: "bullet"}, value: 220}];
17+
18+
var layout = {width: 500, height: 250, shapes: [{type: "rect", x0: 0.20, x1: 1, y0: 0.25, y1: 0.92}]};
19+
20+
Plotly.newPlot(gd,data,layout);

‎_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template3.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: Showing Information Above Your Chart
3+
plot_url: https://codepen.io/plotly/embed/OKpLYv/?height=600&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: indicator
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
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:
12+
---
13+
var data = [{domain: {y: [0, 1], x: [0.25, 0.75]}, title: {"text": "Users online"},
14+
type: "indicator", mode: "number+delta", delta: {"reference": 512, "valueformat": ".0f"},
15+
ticker: {showticker: true}, vmax: 500, value: 492}, {name: "Users online",
16+
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]}];
17+
18+
var layout = {width: 500, height: 500, xaxis: {range: [0, 62]}};
19+
20+
Plotly.newPlot(gd,data,layout);

‎_posts/plotly_js/financial/indicator1/2019-07-29-indicator_grid_template4.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
name: Data Cards
3+
plot_url: https://codepen.io/plotly/embed/VopPLb/?height=600&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: indicator
6+
order: 4
7+
sitemap: false
8+
arrangement: horizontal
9+
markdown_content: |
10+
11+
Data card helps to display more contextual information about the data.
12+
---
13+
var data = [
14+
{domain: {x: [0, 0.5], y: [0, 0.5]}, type: "indicator",
15+
mode: "number", value: 3000},
16+
{domain: {x: [0, 0.5], y: [0.5, 1.0]}, type: "indicator",
17+
mode: "number+delta", value: 200, delta: {position: "bottom",
18+
reference: 20}},
19+
{domain: {x: [0.5, 1.0], y: [0, 0.5]}, type: "indicator",
20+
mode: "number", number: {suffix: " km/h"}, value: 40},
21+
{domain: {x: [0.5, 1.0], y: [0.5, 1.0]}, type: "indicator",
22+
mode: "number+delta", number: {prefix: "$"},
23+
value: 400, delta: {position: "top", reference: 320}}];
24+
25+
var layout = {paper_bgcolor: "lightgray", width: 600, height: 200,
26+
margin: {"t": 0, "b": 0, "l": 0, "r": 0}, shapes: [
27+
{type: "rect", x0: 0, x1: 0.5, y0: 0.5, y1: 1, line: {
28+
color: "white", width: 1 }},
29+
{type: "rect", x0: 0, x1: 0.5, y0: 0, y1: 0.5, line: {
30+
color: "white", width: 1 }},
31+
{type: "rect", x0: 0.5, x1: 1.0, y0: 0.5, y1: 1, line: {
32+
color: "white", width: 1}},
33+
{type: "rect", x0: 0.5, x1: 1.0, y0: 0, y1: 0.5,
34+
line: {color: "white", width: 1}}]}
35+
36+
Plotly.newPlot(gd,data,layout);
37+

0 commit comments

Comments
 (0)