4

So I have a site where I am doing some data modeling using plotly.js. I am plotting a large number of points (in the thousands). on my backend, I calculate regression equations for the points, and generate coordinates for each x value on the graph. When I plot the equation points in a plotly.js trace, I sometimes get extremely weird results such as enter image description here Which is supposed to be a polynomial curve where I get the points using the equation

    yPoints.push((quad[0] * (m*m)) + (quad[1] * m) + quad[2])

Where quad[0] quad[1] and quad[2] are the coeffecients that I got from determining the regression analysis.

I am not sure why I am getting such weird graph results for certain sets of coordinates. Does anybody have any idea why?

Alternatively does anybody know of any way to plot a function in a plotly.js graph using either plotly or a third party?

let me know if you need any more info. Thanks for the help!

Ricardo Gonzalez
  • 1,827
  • 1
  • 14
  • 25
wil moskal
  • 309
  • 1
  • 14
  • 3
    another note is that when I hover over the parts of the graph where it seems like the line is multiple values, plotly seems to think its only one point – wil moskal Dec 03 '19 at 18:12
  • 2
    Is it using svg? If so, the straight line you see are lines between the first and last point. I can show a snippet that reproduce this bug without plotly, and the fix is simple – NVRM Dec 03 '19 at 18:21
  • I am using scattergl which I think is svg, but not sure. The first and last point with regards to what? – wil moskal Dec 03 '19 at 18:25
  • 1
    That would be great Thank you – wil moskal Dec 03 '19 at 18:28
  • 1
    Is there anything else you need from me for the snippet that reproduces the bug? – wil moskal Dec 03 '19 at 18:41
  • 1
    If you can, yes, post your code here as a snippets (import the library from html) or something like codepen. Since then, do you think it can be related to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline and in particular the `fill` attribute? Also the `points` list must be well formated: x comma y space ... till the end . https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/points#polyline – NVRM Dec 03 '19 at 19:09
  • Just checked the html from the console on the graph. It is SVG, but there is no polyline element. Multiple rect elements are used. I am not sure that a reproducible example is feasible for my case. – wil moskal Dec 03 '19 at 19:22
  • 1
    The fill attribute apply to rect as well. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill Try to add `fill="none"` see what it does. I have no knowledge of plotly and can be misleading here. When i saw your pics i knew it was svg. Faced the issue already – NVRM Dec 03 '19 at 19:28
  • I am not sure if plotly has the ability to set the fill for items in the graph to none – wil moskal Dec 03 '19 at 19:43
  • Also within my site, I have the ability to scale down to the lowest or highest from a single day. If I do that, the weirdness goes away. So that leads me to believe that the amount of points that I have for the graph is confusing plotly – wil moskal Dec 03 '19 at 20:02

1 Answers1

1

Thanks for all of the comments NVRM. As it turns out it wasn't an SVG issue. It wasn't even a plotly issue. The issue was with my data. I have a database which I query for the data that I used to generate the trendline (the points on the graph). For some reason occasionally the y value of the points that I am generating was NULL. This was causing some oddities with the regression calculations, and there were some outliers generated when the value was NULL.

There is still a few oddities with the graph, but the main one is resolved by removing the values with NULL from the trendline consideration.

The moral of the story is always check your data kids.

wil moskal
  • 309
  • 1
  • 14