<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
function makeTrace(i) {
return {
y: Array.apply(null, Array(10)).map(() => Math.random()),
line: {
shape: 'spline' ,
color: 'red'
},
visible: i === 0,
name: 'Data set ' + i,
};
}
Plotly.plot('graph', [0, 1, 2, 3].map(makeTrace), {
updatemenus: [{
y: 0.8,
yanchor: 'top',
buttons: [{
method: 'restyle',
args: ['line.color', 'red'],
label: 'red'
}, {
method: 'restyle',
args: ['line.color', 'blue'],
label: 'blue'
}, {
method: 'restyle',
args: ['line.color', 'green'],
label: 'green'
}]
}, {
y: 1,
yanchor: 'top',
buttons: [{
method: 'restyle',
args: ['visible', [true, false, false, false]],
label: 'Data set 0'
}, {
method: 'restyle',
args: ['visible', [false, true, false, false]],
label: 'Data set 1'
}, {
method: 'restyle',
args: ['visible', [false, false, true, false]],
label: 'Data set 2'
}, {
method: 'restyle',
args: ['visible', [false, false, false, true]],
label: 'Data set 3'
}]
}],
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.