-
-
Notifications
You must be signed in to change notification settings - Fork 372
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unexpected behaviour when dealing with multiple time series + null values #94
Comments
hey @CrashLaker i'm assuming no errors are thrown in the console? can you attach your dataset (or a subset that still triggers the issue) and paste your |
all the data is probably not necessary to trigger the issue. maybe start chopping 50% down until you get to a small size that still reproduces the issue, then do for your opts, please paste them into a code block in this issue, so i don't have to re-type everything from your screenshot. see here: https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks |
thank you. got it. {
"title":"Chart",
"width":1344,
"height":600,
"series":[
{
},
{
"label":"CPUUtilization",
"scale":"%",
"color":"blue"
},
{
"label":"CPUUtilization",
"scale":"%",
"color":"red"
},
{
"label":"CPUUtilization",
"scale":"%",
"color":"green"
},
{
"label":"CPUUtilization",
"scale":"%",
"color":"orange"
},
{
"label":"cpu|usage_average",
"scale":"%",
"color":"purple"
}
],
"axes":[
{
},
{
"scale":"%"
}
]
} |
here's my issue. https://codesandbox.io/s/friendly-lalande-4wxvi |
ok, thanks. i think this is a bug in the last commit (6941e05) where i refactored the clipping code. it looks like it's creating a clipping region if any data within in a single pixel is missing. if that's the problem, the fix should be easy. |
thank you rly. got another behaviour https://codesandbox.io/s/uplotbehaviourv2-3qrsw c. |
this should be fixed now. for your data i would recommend the opts below with const opts = {
title: "Chart",
width: 1344,
height: 600,
spanGaps: true,
series: [
{},
{
label:"CPU1",
color:"blue"
},
{
label:"CPU2",
color:"red"
},
{
label:"CPU3",
color:"green"
},
{
label:"CPU4",
color:"orange"
},
{
label:"CPU_AVG",
color:"purple"
}
],
}; you may also disable y auto-scaling, for a bit of extra performance (80ms -> 70ms for me): scales: {
y: {
auto: false,
range: [0, 100],
}
}, thanks for the report! |
Wow! It worked! I used your demos/missing-data.html as a starter. Now I just realized that was the only one I shouldn't pick since it was supposed to do that right? haha Anyways thanks a lot for all your help. made my first codesandbox ever!
got it. thank you for the performance notes. C. |
awesome. if you ever feel like contributing and learning more about uPlot, i could use some help finishing the docs up before tagging v1 :)
cool, though i prefer https://jsfiddle.net/ or https://flems.io/ or https://codepen.io/, since codesandbox is super heavy and slow, and not really necessary for minimal repros in my libs (which can just be included via script tags). e.g. see how fast this loads: https://jsfiddle.net/v4xuohk6/, codesandbox won't even finish booting. |
great! atm i feel i still need to build up some more knowledge so maybe one day i could be of any help ;) I tried to use jsfiddle like you suggested but I couldn't find a way to drag/upload the json file. thanks for the support. |
@CrashLaker, heads up, |
Got it thank you! Mind to ask you why? Actually I was sometimes having trouble trying to find a particular value in the chart because merging multiple different sources results on many NaN values so I just interpolated everything. One possible solution would be using voronoid http://bl.ocks.org/nbremer/65f03d1ebd1742196200 but i've no idea on how to implement that. |
another reason is because that function deals with gaps in canvas pixels (not css pixels). the series line width is also determined in canvas pixels, while chart width/height is in css pixels. it's more logical for the gap spanning to be near other options which deal in the same units.
yeah, that's why the intro says [1] it might be awkward to have non-alignable datasets :D however, since you implement your own legend already, it should not be too hard for you to find the closest datapoint in each series and display that (including multiple time values), and even draw your hover points at the proper positions.
|
Hi all.
I'm having some weird issues when dealing with many time series from multiple sources (meaning timestamps won't always match).
My guess it that when the dataset has many values separated by nulls some lines simply don't appear in the chart.
Example:
The figure above has data displayed as:
When I then try to merge it with another dataset all the other lines disappear as shown below:
I know the other points are there as highlighted in the black box.
Here's the final array struct:
Regards,
C.
The text was updated successfully, but these errors were encountered: