I’m trying to add values to nodes of plotly graph but there is an issue.
Code:
JavaScript
x
107
107
1
<html>2
<head>3
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>4
<style>5
.graph-container {6
display: flex;7
justify-content: center;8
align-items: center;9
}10
11
.main-panel {12
width: 70%;13
float: left;14
}15
16
.side-panel {17
width: 30%;18
background-color: lightgray;19
min-height: 300px;20
overflow: auto;21
float: right;22
}23
</style>24
</head>25
<body>26
<div class="graph-container">27
<div id="myDiv" class="main-panel"></div>28
<div id="lineGraph" class="side-panel"></div>29
</div>30
<script>31
var nodes = [32
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },33
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },34
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },35
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },36
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }37
];38
39
var edges = [40
{ source: 0, target: 1 },41
{ source: 1, target: 2 },42
{ source: 2, target: 3 },43
{ source: 3, target: 4 }44
];45
46
var x = [];47
var y = [];48
var z = [];49
50
for (var i = 0; i < nodes.length; i++) {51
x.push(nodes[i].x);52
y.push(nodes[i].y);53
z.push(nodes[i].z);54
}55
56
var xS = [];57
var yS = [];58
var zS = [];59
var xT = [];60
var yT = [];61
var zT = [];62
63
for (var i = 0; i < edges.length; i++) {64
xS.push(nodes[edges[i].source].x);65
yS.push(nodes[edges[i].source].y);66
zS.push(nodes[edges[i].source].z);67
xT.push(nodes[edges[i].target].x);68
yT.push(nodes[edges[i].target].y);69
zT.push(nodes[edges[i].target].z);70
}71
72
var traceNodes = {73
x: x, y: y, z: z,74
mode: 'markers',75
marker: { size: 12, color: 'red' },76
type: 'scatter3d',77
text: [0, 1, 2, 3, 4],78
hoverinfo: 'text',79
hoverlabel: {80
bgcolor: 'white'81
},82
customdata: nodes.map(function(node) {83
if (node.value !== undefined)84
return node.value;85
}),86
type: 'scatter3d'87
};88
89
var layout = {90
margin: { l: 0, r: 0, b: 0, t: 0 }91
};92
93
Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });94
95
document.getElementById("myDiv").on("plotly_click", function(data){96
var nodeIndex = data.points[0].pointIndex;97
var values = nodes[nodeIndex].value;98
console.log(values);99
100
Plotly.newPlot('lineGraph', [{ x: [0, 1, 2], y: values, type: 'scatter3d'}], {101
margin: { t: 0 }102
});103
});104
</script>105
</body>106
</html>107
var values = nodes[nodeIndex].value; is not able to access the node values.
Suggestions on how to fix this will be really helpful.
EDIT0:
JavaScript
1
109
109
1
<html>2
<head>3
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>4
<style>5
.graph-container {6
display: flex;7
justify-content: center;8
align-items: center;9
}10
11
.main-panel {12
width: 70%;13
float: left;14
}15
16
.side-panel {17
width: 30%;18
background-color: lightgray;19
min-height: 300px;20
overflow: auto;21
float: right;22
}23
</style>24
</head>25
<body>26
<div class="graph-container">27
<div id="myDiv" class="main-panel"></div>28
<div id="lineGraph" class="side-panel"></div>29
</div>30
<script>31
var nodes = [32
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },33
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },34
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },35
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },36
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }37
];38
39
var edges = [40
{ source: 0, target: 1 },41
{ source: 1, target: 2 },42
{ source: 2, target: 3 },43
{ source: 3, target: 4 }44
];45
46
var x = [];47
var y = [];48
var z = [];49
50
for (var i = 0; i < nodes.length; i++) {51
x.push(nodes[i].x);52
y.push(nodes[i].y);53
z.push(nodes[i].z);54
}55
56
var xS = [];57
var yS = [];58
var zS = [];59
var xT = [];60
var yT = [];61
var zT = [];62
63
for (var i = 0; i < edges.length; i++) {64
xS.push(nodes[edges[i].source].x);65
yS.push(nodes[edges[i].source].y);66
zS.push(nodes[edges[i].source].z);67
xT.push(nodes[edges[i].target].x);68
yT.push(nodes[edges[i].target].y);69
zT.push(nodes[edges[i].target].z);70
}71
72
var traceNodes = {73
x: x, y: y, z: z,74
mode: 'markers',75
marker: { size: 12, color: 'red' },76
type: 'scatter3d',77
text: [0, 1, 2, 3, 4],78
hoverinfo: 'text',79
hoverlabel: {80
bgcolor: 'white'81
},82
customdata: nodes.map(function(node) {83
if (node.value !== undefined)84
return node.value;85
}),86
type: 'scatter3d'87
};88
89
var layout = {90
margin: { l: 0, r: 0, b: 0, t: 0 }91
};92
93
Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });94
const ymax = Math.max(nodes.map(n => n.value).flat());95
96
document.getElementById("myDiv").on("plotly_click", function(data){97
var nodeIndex = data.points[0].pointNumber;98
var values = nodes[nodeIndex].value;99
console.log(values);100
101
Plotly.newPlot('lineGraph', [{ x: [0, 1, 2], y: values, type: 'scatter3d'}], {102
margin: { t: 0 },103
yaxis: {autorange: false, range: [0, ymax + 1]}104
});105
});106
</script>107
</body>108
</html>109
I made the corrections suggested in the answer below but the I am still not able to see the line graph when nodes in the main panel are clicked.
Advertisement
Answer
Use pointNumber instead of pointIndex. You also need to fix the type of the second plot, for which I also suggest to set a fixed axis range (otherwise the axis will reset for each selected point) :
JavaScript
1
18
18
1
// max y value for the line plot2
const ymax = Math.max(nodes.map(n => n.value).flat());3
4
document.getElementById('myDiv').on('plotly_click', function(data){5
var nodeIndex = data.points[0].pointNumber;6
var values = nodes[nodeIndex].value;7
8
Plotly.newPlot('lineGraph', [{9
type: 'scatter',10
mode: 'lines',11
x: [0, 1, 2],12
y: values13
}], {14
margin: { t: 0 },15
yaxis: {autorange: false, range: [0, ymax + 1]}16
});17
});18
For reference, here is the event data structure for 3d plots :
JavaScript
1
17
17
1
{2
points: [{3
curveNumber: 2, // index in data of the trace associated with the selected point4
pointNumber: 2, // index of the selected point5
x: 5, // x value6
y: 600, // y value7
z: 12, // z value8
data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point9
fullData: {/* */}, // ref to the trace including all of the default attributes10
xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point11
yaxis: {/* */} // ref to y-axis object " "12
zaxis: {/* */} // ref to z-axis object " "13
}, {14
/* similarly for other selected points */15
}]16
}17
One last thing, don’t use plotly-latest.js or its minified version anymore. While still referenced here and there in the documentation, they are stuck at version 1.58.5.
Please note that as of v2 the “plotly-latest” outputs will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.
Here is the complete code :
JavaScript
1
115
115
1
<html>2
<head>3
<script src="https://cdn.plot.ly/plotly-2.18.1.min.js"></script>4
<style>5
.graph-container {6
display: flex;7
justify-content: center;8
align-items: center;9
}10
11
.main-panel {12
width: 70%;13
float: left;14
}15
16
.side-panel {17
width: 30%;18
background-color: lightgray;19
min-height: 300px;20
overflow: auto;21
float: right;22
}23
</style>24
</head>25
<body>26
<div class="graph-container">27
<div id="myDiv" class="main-panel"></div>28
<div id="lineGraph" class="side-panel"></div>29
</div>30
<script>31
var nodes = [32
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },33
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },34
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },35
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },36
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }37
];38
39
var edges = [40
{ source: 0, target: 1 },41
{ source: 1, target: 2 },42
{ source: 2, target: 3 },43
{ source: 3, target: 4 }44
];45
46
var x = [];47
var y = [];48
var z = [];49
50
for (var i = 0; i < nodes.length; i++) {51
x.push(nodes[i].x);52
y.push(nodes[i].y);53
z.push(nodes[i].z);54
}55
56
var xS = [];57
var yS = [];58
var zS = [];59
var xT = [];60
var yT = [];61
var zT = [];62
63
for (var i = 0; i < edges.length; i++) {64
xS.push(nodes[edges[i].source].x);65
yS.push(nodes[edges[i].source].y);66
zS.push(nodes[edges[i].source].z);67
xT.push(nodes[edges[i].target].x);68
yT.push(nodes[edges[i].target].y);69
zT.push(nodes[edges[i].target].z);70
}71
72
var traceNodes = {73
x: x, y: y, z: z,74
mode: 'markers',75
marker: { size: 12, color: 'red' },76
type: 'scatter3d',77
text: [0, 1, 2, 3, 4],78
hoverinfo: 'text',79
hoverlabel: {80
bgcolor: 'white'81
},82
customdata: nodes.map(function(node) {83
if (node.value !== undefined)84
return node.value;85
}),86
type: 'scatter3d'87
};88
89
var layout = {90
margin: { l: 0, r: 0, b: 0, t: 0 }91
};92
93
Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });94
95
// max y value for the line plot96
const ymax = Math.max(nodes.map(n => n.value).flat());97
98
document.getElementById('myDiv').on('plotly_click', function(data){99
var nodeIndex = data.points[0].pointNumber;100
var values = nodes[nodeIndex].value;101
102
Plotly.newPlot('lineGraph', [{103
type: 'scatter',104
mode: 'lines',105
x: [0, 1, 2],106
y: values107
}], {108
margin: { t: 0 },109
yaxis: {autorange: false, range: [0, ymax + 1]}110
});111
});112
</script>113
</body>114
</html>115