search

huww98 / TimeChart

An chart library specialized for large-scale time-series data, built on WebGL.
https://huww98.github.io/TimeChart
MIT License
365 stars 31 forks source link

Problem of tooltip points offset like #60 #74

Closed alvins7 closed 8 months ago

alvins7 commented 9 months ago

When I use tooltip the generated points are offset compared to the folded points, I read the question in #60 and understand that it's a GPU precision issue, I'd like to ask if it's possible to offset the points generated by the tooltip as well image

huww98 commented 9 months ago

That offset is random, it can change if you pan X direction. Does the baseTime option solve your problems?

alvins7 commented 9 months ago

I tried baseTime but got nothing, maybe my usage is wrong, here is my code and data demo `<!DOCTYPE html>

TimeChart Demo (Large data range)

Test if we have precision issue with very large X

`
alvins7 commented 9 months ago

The data X-axis usually has 4 decimal places

huww98 commented 9 months ago

set baseTime to 9600, then substract 9600 from each x in your dataset before sending it to chart. e.g. the first x should be -0.154

huww98 commented 9 months ago

The smaller the absolute value, the higher the accuracy

alvins7 commented 9 months ago

It works a bit, but my x-axis data volumes are usually in the millions or more

alvins7 commented 9 months ago

Would it be better to draw a point with WebGL

huww98 commented 9 months ago

When we hit the precision limit, panning is not smooth in WebGL. So, what is the min and max X value in your data? You can also limit the zoom-in to limit the artifact. see minDomainExtent.

alvins7 commented 9 months ago

min:9000 max:90000 step: about 0.02 I've already tried minDomainExtent but he doesn't fit my scenario, I'll try another solution.

huww98 commented 9 months ago

Please try #75 , and provide your feedback, thanks.

alvins7 commented 9 months ago

Thanks, it seems to be working But,My time step is 0.032, if I set xStep to 0.032, it's around 80% correct, if I set xStep to 0.1, it's 95% correct,and if I don`t set xStep, it's 80% correct. 1705911998767 6d36daf545af9bb2c48f46a6dff013b

huww98 commented 9 months ago

That's strange. I expect no visible precision loss with this patch. Can you post the code you use for testing?

alvins7 commented 9 months ago

OK,I'll post the code tomorrow.

alvins7 commented 9 months ago

My test code and test data is here . code: demo/large_data_range_xstep0.1.html and demo/large_data_range_xstep0.032.html. data: demo/data.js. And When I tested it, the error usually occurs around x=14985 and zoom-in to minDomain. the error rate is higher when the x value is larger.

huww98 commented 9 months ago

OK, I've checked your data. There are 2 issue:

  1. Your xStep should be 0.0032
  2. This optimization in #75 is based on the assumption that X values are mostly evenly distributed. Can you split your data into multiple series? I got perfect accuracy with this patch based on your branch: 
    diff --git a/demo/large_data_range_xstep0.032.html b/demo/large_data_range_xstep0.032.html
index 8ffccab..5db7f43 100644
--- a/demo/large_data_range_xstep0.032.html
+++ b/demo/large_data_range_xstep0.032.html
@@ -26,12 +26,22 @@
 <script src="./data.js"></script>
 <script>
     const el = document.getElementById('chart');
+        let curSeries = null;
+        const series = [];
+        let lastX = -Infinity;
+        for (const d of data) {
+            if (d.x - lastX > 10) {
+                if (curSeries) {
+                    series.push(curSeries);
+                }
+                curSeries = { name: `Run ${series.length}`, data: [], xStep: 0.0032 };
+            }
+            curSeries.data.push(d);
+            lastX = d.x;
+        }
     const chart = new TimeChart(el, {
         baseTime: 9599,
-            series: [
-                // { name: 'Line 1', data: data1, color: 'blue' },
-                { name: 'Line 1', data: data, color: 'blue', xStep: 0.032, xStepCorrection: true },
-            ],
+            series,
         zoom: { x: { autoRange: true, minDomainExtent: 0.1, } },
         tooltip: {
             enabled: true,
alvins7 commented 9 months ago

About xstep, It`s my fault, I'll make sure to set it to 0.0032. Now.

About multiple series, I can use it, but I've noticed that if I do, my tooltip will display values for multiple series and highlight multiple points. I'm not sure if there's a way to handle this later based on some property like type, or if I should try to solve it myself. I can use multiple series, but I need the tooltip to behave the same way as with single series.(PS: Maybe we should also consider not affecting the functionality of genuine multiple series)

huww98 commented 9 months ago

Hi, I've fixed the tooltip to hide the out-of-range series instead of showing the stall highlight state. I also fixed an issue of inaccurate zoom origin calculation. You may try that by merging the latest master and predict-x branches.

alvins7 commented 9 months ago

Thanks, I`ve try the latest master and found some issues. Perhaps the problem isn`t hide the out-of-range series, but in needing tooltip and legend for only one series when the main series is split into multiple series.

There are two pic, the first one is the current one and the second one is what I need. 1.image

2.image

And I've simply addressed the tooltip and legend at My branch(PS. It’s already been merged from both the master and predict-x branches.) , but I'm not sure if there are any other plugins with the same issue.