Skip to content

Commit 7d5b2ff

Browse files
michaelbabynmichaelbabyn
authored
Merge pull request #1141 from plotly/buttons-javascript
update javascript page on buttons to use updatemenus buttons
2 parents 23be12a + b79e36b commit 7d5b2ff

7 files changed

+807
-34
lines changed

‎_posts/plotly_js/controls/callbacks-buttons/2015-04-09-button-bind.html

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

‎_posts/plotly_js/controls/callbacks-buttons/2018-10-16-button-animate.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
name: Animate Button
3+
language: plotly_js
4+
suite: button-events
5+
sitemap: false
6+
order: 5
7+
arrangement: horizontal
8+
markdown_content: |
9+
Refer to our animation docs: [https://plot.ly/javascript/#animations](https://plot.ly/javascript/#animations) for examples on how to use the animate method with Plotly buttons.
10+
---

‎_posts/plotly_js/controls/callbacks-buttons/2018-10-16-button-relayout.html

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
name: Relayout Button
3+
plot_url: https://codepen.io/plotly/embed/mzXQPQ/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: button-events
6+
sitemap: false
7+
order: 3
8+
arrangement: horizontal
9+
markdown_content: |
10+
The `relayout` method should be used when modifying the layout attributes of the graph.
11+
**Update One Layout Attribute**
12+
This example demonstrates how to update a layout attribute: chart type with the `relayout` method.
13+
---
14+
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/normal-clusters.csv', function(err, rows){
15+
function unpack(rows, key) {
16+
return rows.map(function(row) { return parseFloat(row[key]); });
17+
}
18+
19+
var button_layer_height = 1.2
20+
var x0 = unpack(rows,'x0')
21+
var x1 = unpack(rows,'x1')
22+
var x2 = unpack(rows,'x2')
23+
var y0 = unpack(rows,'y0')
24+
var y1 = unpack(rows,'y1')
25+
var y2 = unpack(rows,'y2')
26+
27+
var data = [{
28+
x: x0,
29+
y: y0,
30+
mode: 'markers',
31+
marker: {color: '#835AF1'}
32+
},
33+
{
34+
x: x1,
35+
y: y1,
36+
mode: 'markers',
37+
marker: {color: '#7FA6EE'}
38+
},
39+
{
40+
x: x2,
41+
y: y2,
42+
mode: 'markers',
43+
marker: {color: '#B8F7D4'}
44+
},
45+
46+
]
47+
48+
var cluster0 = {type: 'circle',
49+
xref: 'x', yref: 'y',
50+
x0: Math.min(...x0), y0: Math.min(...y0),
51+
x1: Math.max(...x0), y1: Math.max(...y0),
52+
opacity: 0.25,
53+
line: {color: '#835AF1'},
54+
fillcolor: '#835AF1'}
55+
56+
var cluster1 = {type: 'circle',
57+
xref: 'x', yref: 'y',
58+
x0: Math.min(...x1), y0: Math.min(...y1),
59+
x1: Math.max(...x1), y1: Math.max(...y1),
60+
opacity: 0.25,
61+
line: {color: '#7FA6EE'},
62+
fillcolor: '#7FA6EE'}
63+
64+
var cluster2 = {type: 'circle',
65+
xref: 'x', yref: 'y',
66+
x0: Math.min(...x2), y0: Math.min(...y2),
67+
x1: Math.max(...x2), y1: Math.max(...y2),
68+
opacity: 0.25,
69+
line: {color: '#B8F7D4'},
70+
fillcolor: '#B8F7D4'}
71+
72+
var updatemenus=[
73+
{
74+
buttons: [
75+
{
76+
args: ['shapes', []],
77+
label: 'None',
78+
method: 'relayout'
79+
},
80+
{
81+
args: ['shapes', [cluster0]],
82+
label: 'Cluster 0',
83+
method: 'relayout'
84+
},
85+
{
86+
args: ['shapes', [cluster1]],
87+
label: 'Cluster 1',
88+
method: 'relayout'
89+
},
90+
{
91+
args: ['shapes', [cluster2]],
92+
label: 'Cluster 2',
93+
method: 'relayout'
94+
},
95+
{
96+
args: ['shapes', [cluster0, cluster1, cluster2]],
97+
label: 'All',
98+
method: 'relayout'
99+
},
100+
],
101+
direction: 'left',
102+
pad: {'r': 10, 't': 10},
103+
showactive: true,
104+
type: 'buttons',
105+
x: 0.1,
106+
xanchor: 'left',
107+
y: button_layer_height,
108+
yanchor: 'top'
109+
},
110+
111+
]
112+
113+
var layout = {
114+
updatemenus: updatemenus,
115+
showlegend: false
116+
}
117+
118+
119+
Plotly.plot("myDiv", data, layout);
120+
121+
});

‎_posts/plotly_js/controls/callbacks-buttons/2018-10-16-button-restyle-multiple.html

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
---
2+
name: Restyle Button Multiple Attributes
3+
plot_url: https://codepen.io/plotly/embed/oaEymG/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: button-events
6+
sitemap: false
7+
order: 2
8+
arrangement: horizontal
9+
markdown_content: |
10+
This example demonstrates how to use a restyle button to update single attributes by passing a two element array
11+
to a button's `args` attribute or update multiple attributes at the same time by passing an array containing an object.
12+
---
13+
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
14+
function unpack(rows, key) {
15+
return rows.map(function(row) { return row[key]; });
16+
}
17+
18+
var button_layer_1_height = 1.12
19+
var button_layer_2_height = 1.0
20+
var annotation_offset = 0.04
21+
22+
var z_data=[ ]
23+
for(i=0;i<24;i++)
24+
{
25+
z_data.push(unpack(rows,i));
26+
}
27+
28+
var data = [{
29+
z: z_data,
30+
type:'surface',
31+
colorscale:'Viridis'
32+
}]
33+
34+
var updatemenus=[
35+
{
36+
buttons: [
37+
{
38+
args: ['type', 'surface'],
39+
label: '3D Surface',
40+
method: 'restyle'
41+
},
42+
{
43+
args: ['type', 'heatmap'],
44+
label:'Heatmap',
45+
method:'restyle'
46+
},
47+
{
48+
args: ['type', 'contour'],
49+
label:'Contour',
50+
method:'restyle'
51+
}
52+
],
53+
direction: 'left',
54+
pad: {'r': 10, 't': 10},
55+
showactive: true,
56+
type: 'buttons',
57+
x: 0.15,
58+
xanchor: 'left',
59+
y: button_layer_2_height,
60+
yanchor: 'top'
61+
},
62+
{
63+
buttons: [
64+
{
65+
args: ['reversescale', true],
66+
label: 'Reverse',
67+
method: 'restyle'
68+
},
69+
{
70+
args: ['reversescale', false],
71+
label:'Undo Reverse',
72+
method:'restyle'
73+
}
74+
],
75+
direction: 'down',
76+
pad: {'r': 10, 't': 10},
77+
showactive: true,
78+
type: 'dropdown',
79+
x: 0.56,
80+
xanchor: 'left',
81+
y: button_layer_2_height,
82+
yanchor: 'top'
83+
},
84+
{
85+
buttons: [
86+
{
87+
args: [{'contours.showlines':false, 'type':'contour'}],
88+
label: 'Hide lines',
89+
method: 'restyle'
90+
},
91+
{
92+
args: [{'contours.showlines':true, 'type':'contour'}],
93+
label:'Show lines',
94+
method:'restyle'
95+
}
96+
],
97+
direction: 'down',
98+
pad: {'r': 10, 't': 10},
99+
showactive: true,
100+
type: 'dropdown',
101+
x: 0.78,
102+
xanchor: 'left',
103+
y: button_layer_2_height,
104+
yanchor: 'top'
105+
},
106+
{
107+
buttons: [
108+
{
109+
args: ['colorscale', 'Viridis'],
110+
label: 'Viridis',
111+
method: 'restyle'
112+
},
113+
{
114+
args: ['colorscale', 'Electric'],
115+
label:'Electric',
116+
method:'restyle'
117+
},
118+
{
119+
args: ['colorscale', 'Earth'],
120+
label:'Earth',
121+
method:'restyle'
122+
},
123+
{
124+
args: ['colorscale', 'Hot'],
125+
label:'Hot',
126+
method:'restyle'
127+
},
128+
{
129+
args: ['colorscale', 'Jet'],
130+
label:'Jet',
131+
method:'restyle'
132+
},
133+
{
134+
args: ['colorscale', 'Portland'],
135+
label:'Portland',
136+
method:'restyle'
137+
},
138+
{
139+
args: ['colorscale', 'Rainbow'],
140+
label:'Rainbow',
141+
method:'restyle'
142+
},
143+
{
144+
args: ['colorscale', 'Blackbody'],
145+
label:'Blackbody',
146+
method:'restyle'
147+
},
148+
149+
{
150+
args: ['colorscale', 'Cividis'],
151+
label:'Cividis',
152+
method:'restyle'
153+
}
154+
],
155+
direction: 'left',
156+
pad: {'r': 10, 't': 10},
157+
showactive: true,
158+
type: 'buttons',
159+
x: 0.15,
160+
xanchor: 'left',
161+
y: button_layer_1_height,
162+
yanchor: 'top'
163+
},
164+
]
165+
166+
var annotations = [
167+
{
168+
text: 'Trace type:',
169+
x: 0,
170+
y: button_layer_2_height - annotation_offset,
171+
yref: 'paper',
172+
align: 'left',
173+
showarrow: false
174+
},
175+
{
176+
text: 'Colorscale:',
177+
x: 0,
178+
y: button_layer_1_height - annotation_offset,
179+
yref: 'paper',
180+
align: 'left',
181+
showarrow: false
182+
},
183+
]
184+
185+
var layout = {
186+
margin: {t: 0, b: 0, l: 0, r: 0},
187+
updatemenus: updatemenus,
188+
annotations: annotations,
189+
scene: {
190+
xaxis:{
191+
gridcolor: 'rgb(255, 255, 255)',
192+
zerolinecolor: 'rgb(255, 255, 255)',
193+
showbackground: true,
194+
backgroundcolor:'rgb(230, 230,230)'
195+
},
196+
yaxis: {
197+
gridcolor: 'rgb(255, 255, 255)',
198+
zerolinecolor: 'rgb(255, 255, 255)',
199+
showbackground: true,
200+
backgroundcolor: 'rgb(230, 230, 230)'
201+
},
202+
zaxis: {
203+
gridcolor: 'rgb(255, 255, 255)',
204+
zerolinecolor: 'rgb(255, 255, 255)',
205+
showbackground: true,
206+
backgroundcolor: 'rgb(230, 230,230)'
207+
},
208+
aspectratio: {x: 1, y: 1, z: 0.7},
209+
aspectmode: 'manual'
210+
}
211+
}
212+
213+
214+
Plotly.plot("myDiv", data, layout);
215+
216+
});

0 commit comments

Comments
 (0)