Skip to content

Commit 7eeaae8

Browse files
nicolaskruchtennicolaskruchten
authored
Merge pull request #1472 from plotly/mapbox-layers
mapbox layers
2 parents e4d75d7 + 10a5c25 commit 7eeaae8

22 files changed

+688
-156
lines changed

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

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,31 @@
1010

1111
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.
1212
---
13-
var data = [{
14-
type: "indicator", mode: "number+gauge+delta", value: 220,
15-
domain: {x: [0, 1], y: [0, 1]}, title: {text :"<b>Profit</b>"},
16-
delta: {reference: 200}, gauge: {shape: "bullet", axis: {range: [null, 300]},
17-
threshold: {line: {color: "red", width: 2}, thickness: 0.75, value: 280},
18-
steps: [{range: [0, 150], color: "lightgray"}, {range: [150, 250], color: "gray"}]}
19-
}];
13+
var data = [
14+
{
15+
type: "indicator",
16+
mode: "number+gauge+delta",
17+
value: 220,
18+
domain: { x: [0, 1], y: [0, 1] },
19+
title: { text: "<b>Profit</b>" },
20+
delta: { reference: 200 },
21+
gauge: {
22+
shape: "bullet",
23+
axis: { range: [null, 300] },
24+
threshold: {
25+
line: { color: "red", width: 2 },
26+
thickness: 0.75,
27+
value: 280
28+
},
29+
steps: [
30+
{ range: [0, 150], color: "lightgray" },
31+
{ range: [150, 250], color: "gray" }
32+
]
33+
}
34+
}
35+
];
2036

21-
var layout = {width: 600, height: 250};
22-
var config = {responsive: true};
37+
var layout = { width: 600, height: 250 };
38+
var config = { responsive: true };
2339

24-
Plotly.newPlot(gd,data,layout,config);
40+
Plotly.newPlot(gd, data, layout, config);

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
---
32
name: Basic Bullet Charts
43
plot_url: https://codepen.io/plotly/embed/EqZBWg/?height=600&theme-id=15263&default-tab=result
54
language: plotly_js
@@ -12,10 +11,17 @@
1211
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.
1312
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.
1413
---
15-
var data = [{
16-
type: "indicator", mode: "number+gauge+delta", gauge: {shape: "bullet"},
17-
delta: {reference: 300}, value: 220, domain: {x: [0, 1], y: [0, 1]},
18-
title: {text: "Profit"}}];
14+
var data = [
15+
{
16+
type: "indicator",
17+
mode: "number+gauge+delta",
18+
gauge: { shape: "bullet" },
19+
delta: { reference: 300 },
20+
value: 220,
21+
domain: { x: [0, 1], y: [0, 1] },
22+
title: { text: "Profit" }
23+
}
24+
];
1925

20-
var layout = {width: 600, height: 250};
21-
Plotly.newPlot(gd,data,layout);
26+
var layout = { width: 600, height: 250 };
27+
Plotly.newPlot(gd, data, layout);

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

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,34 @@
1010

1111
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).
1212
---
13-
var data = [{
14-
type: "indicator", mode: "number+gauge+delta", value: 220,
15-
domain: {x: [0, 1], y: [0, 1]}, delta: {reference: 280, position: "top"},
16-
title: {text :"<b>Profit</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>",
17-
font: {"size": 14}}, gauge: {shape: "bullet", axis: {range: [null, 300]},
18-
threshold: {line: {color: "red", width: 2}, thickness: 0.75, value: 270}, bgcolor: "white",
19-
steps: [{range: [0, 150], color: "cyan"}, {range: [150, 250], color: "royalblue"}],
20-
bar: {color: "darkblue"}}}];
13+
var data = [
14+
{
15+
type: "indicator",
16+
mode: "number+gauge+delta",
17+
value: 220,
18+
domain: { x: [0, 1], y: [0, 1] },
19+
delta: { reference: 280, position: "top" },
20+
title: {
21+
text:
22+
"<b>Profit</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>",
23+
font: { size: 14 }
24+
},
25+
gauge: {
26+
shape: "bullet",
27+
axis: { range: [null, 300] },
28+
threshold: {
29+
line: { color: "red", width: 2, gradient: { yanchor: "vertical" } },
30+
thickness: 0.75,
31+
value: 270
32+
},
33+
bgcolor: "white",
34+
steps: [{ range: [0, 150], color: "cyan" }],
35+
bar: { color: "darkblue" }
36+
}
37+
}
38+
];
2139

22-
var layout = {width: 600, height: 230};
23-
var config = {responsive: true};
40+
var layout = { width: 400, height: 230 };
41+
var config = { responsive: true };
2442

25-
Plotly.newPlot(gd,data,layout,config);
43+
Plotly.newPlot(gd, data, layout, config);

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

Lines changed: 76 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,80 @@
1010

1111
Bullet charts can be stacked for comparing several values at once as illustrated below:
1212
---
13-
var data = [{
14-
type: "indicator", mode: "number+gauge+delta", value: 180,
15-
delta: {reference: 200}, domain: {x: [0.25, 1], y: [0.08, 0.25]},
16-
title: {text: "Revenue"}, gauge: {shape: "bullet", axis: {range: [null, 300]},
17-
threshold: {line: {color: "black", width: 2}, thickness: 0.75, value: 170},
18-
steps: [{range: [0, 150], color: "gray"}, {range: [150, 250],
19-
color: "lightgray"}], bar: {color: "black"}}
20-
},{
21-
type: "indicator", mode: "number+gauge+delta", value: 35,
22-
delta: {reference: 200}, domain: {x: [0.25, 1], y: [0.4, 0.6]},
23-
title: {text: "Profit"}, gauge: {shape: "bullet", axis: {range: [null, 100]},
24-
threshold: {line: {color: "black", width: 2}, thickness: 0.75, value: 50},
25-
steps: [{range: [0, 25], color: "gray"}, {range: [25, 75], color: "lightgray"}],
26-
bar: {color: "black"}}
27-
}, {
28-
type: "indicator", mode: "number+gauge+delta", value: 220,
29-
delta: {reference: 200}, domain: {x: [0.25, 1], y: [0.7, 0.9]},
30-
title: {text :"Satisfaction"}, gauge: {shape: "bullet", axis: {range: [null, 300]},
31-
threshold: {line: {color: "black", width: 2}, thickness: 0.75, value: 210},
32-
steps: [{range: [0, 150], color: "gray"}, {range: [150, 250], color: "lightgray"}],
33-
bar: {color: "black"}}
34-
}];
35-
36-
var layout = {width: 600, height: 250, margin: {t: 10, "r": 25, "l": 25, "b": 10}};
37-
Plotly.newPlot(gd,data,layout);
13+
var data = [
14+
{
15+
type: "indicator",
16+
mode: "number+gauge+delta",
17+
value: 180,
18+
delta: { reference: 200 },
19+
domain: { x: [0.25, 1], y: [0.08, 0.25] },
20+
title: { text: "Revenue" },
21+
gauge: {
22+
shape: "bullet",
23+
axis: { range: [null, 300] },
24+
threshold: {
25+
line: { color: "black", width: 2 },
26+
thickness: 0.75,
27+
value: 170
28+
},
29+
steps: [
30+
{ range: [0, 150], color: "gray" },
31+
{
32+
range: [150, 250],
33+
color: "lightgray"
34+
}
35+
],
36+
bar: { color: "black" }
37+
}
38+
},
39+
{
40+
type: "indicator",
41+
mode: "number+gauge+delta",
42+
value: 35,
43+
delta: { reference: 200 },
44+
domain: { x: [0.25, 1], y: [0.4, 0.6] },
45+
title: { text: "Profit" },
46+
gauge: {
47+
shape: "bullet",
48+
axis: { range: [null, 100] },
49+
threshold: {
50+
line: { color: "black", width: 2 },
51+
thickness: 0.75,
52+
value: 50
53+
},
54+
steps: [
55+
{ range: [0, 25], color: "gray" },
56+
{ range: [25, 75], color: "lightgray" }
57+
],
58+
bar: { color: "black" }
59+
}
60+
},
61+
{
62+
type: "indicator",
63+
mode: "number+gauge+delta",
64+
value: 220,
65+
delta: { reference: 200 },
66+
domain: { x: [0.25, 1], y: [0.7, 0.9] },
67+
title: { text: "Satisfaction" },
68+
gauge: {
69+
shape: "bullet",
70+
axis: { range: [null, 300] },
71+
threshold: {
72+
line: { color: "black", width: 2 },
73+
thickness: 0.75,
74+
value: 210
75+
},
76+
steps: [
77+
{ range: [0, 150], color: "gray" },
78+
{ range: [150, 250], color: "lightgray" }
79+
],
80+
bar: { color: "black" }
81+
}
82+
}
83+
];
3884

85+
var layout = {
86+
width: 600, height: 250,
87+
margin: { t: 10, r: 25, l: 25, b: 10 }
88+
};
89+
Plotly.newPlot(gd, data, layout);

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

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,28 @@
1111
The following examples include "steps" attribute shown as shading inside the radial arc, "delta" which is the
1212
difference of the value and goal (reference - value), and "threshold" to determine boundaries that visually alert you if the value cross a defined threshold.
1313
---
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}}}];
14+
var data = [
15+
{
16+
domain: { x: [0, 1], y: [0, 1] },
17+
value: 450,
18+
title: { text: "Speed" },
19+
type: "indicator",
20+
mode: "gauge+number+delta",
21+
delta: { reference: 380 },
22+
gauge: {
23+
axis: { range: [null, 500] },
24+
steps: [
25+
{ range: [0, 250], color: "lightgray" },
26+
{ range: [250, 400], color: "gray" }
27+
],
28+
threshold: {
29+
line: { color: "red", width: 4 },
30+
thickness: 0.75,
31+
value: 490
32+
}
33+
}
34+
}
35+
];
1936

20-
var layout = {width: 600, height: 500, margin: {t: 0, b: 0}};
21-
Plotly.newPlot(gd,data,layout);
37+
var layout = { width: 600, height: 450, margin: { t: 0, b: 0 } };
38+
Plotly.newPlot(gd, data, layout);

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,15 @@
1414

1515
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.
1616
---
17-
var data = [{domain: {x: [0, 1], y: [0, 1]}, value: 270, title: {text: "Speed"},
18-
type: "indicator", mode: "gauge+number"}];
17+
var data = [
18+
{
19+
domain: { x: [0, 1], y: [0, 1] },
20+
value: 270,
21+
title: { text: "Speed" },
22+
type: "indicator",
23+
mode: "gauge+number"
24+
}
25+
];
1926

20-
var layout = {width: 500, height: 500, margin: {t: 0, b: 0}};
21-
Plotly.newPlot(gd,data,layout);
27+
var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
28+
Plotly.newPlot(gd, data, layout);

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

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,38 @@
1010

1111
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).
1212
---
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}}}];
13+
var data = [
14+
{
15+
type: "indicator",
16+
mode: "gauge+number+delta",
17+
value: 420,
18+
title: { text: "Speed", font: { size: 24 } },
19+
delta: { reference: 400, increasing: { color: "RebeccaPurple" } },
20+
gauge: {
21+
axis: { range: [null, 500], tickwidth: 1, tickcolor: "darkblue" },
22+
bar: { color: "darkblue" },
23+
bgcolor: "white",
24+
borderwidth: 2,
25+
bordercolor: "gray",
26+
steps: [
27+
{ range: [0, 250], color: "cyan" },
28+
{ range: [250, 400], color: "royalblue" }
29+
],
30+
threshold: {
31+
line: { color: "red", width: 4 },
32+
thickness: 0.75,
33+
value: 490
34+
}
35+
}
36+
}
37+
];
2038

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"}};
39+
var layout = {
40+
width: 500,
41+
height: 400,
42+
margin: { t: 25, r: 25, l: 25, b: 25 },
43+
paper_bgcolor: "lavender",
44+
font: { color: "darkblue", family: "Arial" }
45+
};
2346

24-
Plotly.newPlot(gd,data,layout);
47+
Plotly.newPlot(gd, data, layout);

0 commit comments

Comments
 (0)