plotly.js
plotly.js copied to clipboard
plotly
Lines on scatter graph not showing up
I have been trying to figure out this issue without opening a ticket for the mean time and have followed all the guides on using plotly.js in typescript and for the most part the plugin works and works well however some of the functionality is just not working the biggest issue is certain lines are not showing up.
When I make a scatter graph all of the data and information is there mostly visible but when the trace mode is just mode: 'lines' the lines do not show up.
and when I change the mode to mode: 'markers'
witch is a decent work around for the problem but I also need to fill: 'tozeroy' that isn't working either.
Currently using;
"plotly.js": "^1.54.1"
Here is the code that is used to generate these graphs
let data: any[] = [{
x: this.plotData.z,
y: this.plotData.y,
type: 'scatter',
mode: 'markers',
fill: 'tozeroy',
fillcolor: '#A6CEE3',
marker: {
color: 'black',
size: 3
}
}];
let layout: any = {
title: `Standard Normal Distribution`,
showlegend: false,
xaxis: {
ticks: 'outside',
zeroline: false,
showgrid: false
},
yaxis: {
rangemode: 'tozero',
zeroline: true,
showline: false,
showticklabels: false,
showgrid: false
},
annotations: [
{
text: Math.round((100*this.Pval/2)*100)/100 + '%',
x: Math.abs(this.teststat),
y: 0,
xref: 'x',
yref: 'y',
xshift: 12,
yshift: -2,
ax: 2.5,
ay: 0.1,
axref: 'x',
ayref: 'y',
bordercolor: 'black',
showarrow: true
}
],
height: 200,
margin: {
l: 0,
r: 0,
b: 35,
t: 50,
pad: 0
},
displaylogo: false
};
if(this.mode == 'two') {
let index: PlotData;
index = await this.pullData(-Math.abs(this.teststat), '<=');
data.push({
x: index.z,
y: index.y,
type: 'scatter',
mode: 'markers',
fill: 'tozeroy',
fillcolor: '#1F78B4',
marker: {
color: '#1F78B4',
size: 3
},
name: 'P-value',
hoverinfo: 'name'
})
index = await this.pullData(Math.abs(this.teststat), '>=');
data.push({
x: index.z,
y: index.y,
type: 'scatter',
mode: 'markers',
fill: 'tozeroy',
fillcolor: '#1F78B4',
marker: {
color: '#1F78B4',
size: 3
},
name: 'P-value',
hoverinfo: 'name'
})
layout.annotations.push({
x: -Math.abs(this.teststat),
y: R.dnorm(this.teststat)/2,
xshift: -12,
yshift: -2,
text: Math.round((100*this.Pval/2) * 100)/100 + '%',
bordercolor: 'black',
xref: 'x',
yref: 'y',
showarrow: true,
arrowhead: 2,
ax: -2.5,
ay: 0.1,
axref: 'x',
ayref: 'y'
})
layout.annotations.push({
x: Math.abs(this.teststat),
y: R.dnorm(this.teststat)/2,
xshift: -12,
yshift: -2,
text: Math.round((100*this.Pval/2) * 100)/100 + '%',
bordercolor: 'black',
xref: 'x',
yref: 'y',
showarrow: true,
arrowhead: 2,
ax: -2.5,
ay: 0.1,
axref: 'x',
ayref: 'y'
})
}
if(this.mode == 'less') {
let index: PlotData;
index = await this.pullData(Math.abs(this.teststat), '<=');
data.push({
x: index.z,
y: index.y,
type: 'scatter',
mode: 'markers',
fill: 'tozeroy',
fillcolor: '#1F78B4',
marker: {
color: '#1F78B4',
size: 3
},
name: 'P-value',
hoverinfo: 'name'
})
layout.annotations.push({
x: Math.abs(this.teststat),
y: R.dnorm(this.teststat)/2,
xshift: -12,
yshift: -2,
text: Math.round((100*this.Pval) * 100)/100 + '%',
bordercolor: 'black',
xref: 'x',
yref: 'y',
showarrow: true,
arrowhead: 2,
ax: -2.5,
ay: 0.1,
axref: 'x',
ayref: 'y'
})
}
if(this.mode == 'great'){
let index: PlotData;
index = await this.pullData(Math.abs(this.teststat), '>=');
data.push({
x: index.z,
y: index.y,
type: 'scatter',
mode: 'markers',
fill: 'tozeroy',
fillcolor: '#1F78B4',
marker: {
color: '#1F78B4',
size: 3
},
name: 'P-value',
hoverinfo: 'name'
})
layout.annotations.push({
x: Math.abs(this.teststat),
y: R.dnorm(this.teststat)/2,
xshift: -12,
yshift: -2,
text: Math.round((100*this.Pval) * 100)/100 + '%',
bordercolor: 'black',
xref: 'x',
yref: 'y',
showarrow: true,
arrowhead: 2,
ax: -2.5,
ay: 0.1,
axref: 'x',
ayref: 'y'
})
}
Plotly.newPlot("distribution", data, layout);
@Lizard-King101 would you mind sharing the layout and (possibly minimal) data to help replicate it?
I am seeing the same thing. If I use mode lines or mode line+markers, I don't see the lines drawn. If I hover the mouse over a point, I do see the pop up for that point.
The number of points isn't large, but there are four traces on the same graph. I have tried various things. This is the latest variant. I have also tried different numbers of points.
function one_graph(horizontal_distance, path_distance, path_height_diff, path_angle, x_axis, u, x, y, z, x_distance) {
var trace1 = {
type: 'scatter',
x: x_axis,
y: x,
name: 'frez_u',
mode: 'lines+markers',
line: {
shape: 'spline',
color: 'yellow',
width: 2
}
};
var trace2 = {
type: 'scatter',
x: x_axis,
y: y,
name: 'signal',
mode: 'lines+markers',
line: {
color: 'blue',
width: 2
}
};
var trace3 = {
type: 'scatter',
x: x_axis,
y: z,
name: 'frez_l',
mode: 'lines+markers',
line: {
color: 'yellow',
width: 2
}
};
var trace4 = {
type: 'scatter',
x: x_axis,
y: u,
name: 'ground',
mode: 'lines+markers',
line: {
color: 'green',
width: 2
}
};
var layout = {
title: "Tower to Site: X Distance = " + round_p(horizontal_distance,0).toString() + "m Path_distance = " + round_p(path_distance,0).toString() + "m Path_height_diff = " + round_p(path_height_diff,1).toString() + "m Path_angle = " + round_p(path_angle,1).toString() + " deg",
xaxis: {
title: 'Distance',
showline: true
},
yaxis: {
title: 'Elevation',
showline: true
}
};
var data = [ trace1, trace2, trace3, trace4 ];
var graphDiv = document.getElementById('myDiv')
Plotly.newPlot(graphDiv, data, layout, { staticPlot: true, doubleClickDelay: 700 });
eg. in lines+markers mode, I get this
The cause looks to be bad data in my x_axis. There were points that were set to an empty string (ie. ""). If I set these correctly, then I do get lines.
e.g. with just lines, and fixing the missing x axis values
