Drag zoom loosing data points

[jordanpapaleo]

Hi

I am working on an implementation of the zoom plugin using the drag feature. I am following the samples/zoom-time.html example. When i drag a zoom area, the resulting line chart looses data points. This happens in both my chart and the example chart.

Drag:

Result:

As you can see the first data point is gone and the resulting chart is off too. The result in mine is even more extreme with more of a flattening line. It kind of looks like the chart data is averaged instead of zoomed.

Here is the zoom config I am using:

zoom: {
  enabled: true,
  drag: true,
  mode: 'x',
  limits: {
    max: 10,
    min: 0.5
  }
}

limits was in the example but I do not see in in chart.zoom.js

I'd love some help here :)

Thanks,

Jordan

[etimberg]

I think the flattening is coming from how the bezier control points are calculated. We'll need to do some investigation to figure out why the points are lost. My likely theory is that the zoom is incorrectly calculated and the first point is now outside the new axis minimum

[marco-silva0000]

hey. You have any progress on this? is there somewhere you may need help? My team has this bug as well and if we could we would like to help it be solved asap

[etimberg]

Hey, i haven't looked into this more yet. Do you have an example that reproduces for debugging?

[marco-silva0000]

I think the original post was made with an example from the demo, still, if you want I can provide a new one

…

On Fri, 6 Jan 2017, 13:09 Evert Timberg, ***@***.***> wrote: Hey, i haven't looked into this more yet. Do you have an example that reproduces for debugging? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADlMQ7qA9rCx5akFRa1Wxwppc9dB4Bl-ks5rPj0hgaJpZM4KmudQ> .

[marco-silva0000]

do you need any help moving this forward?

[marco-silva0000]

any progress on this?

[ghost]

Same issue here.

[CalvinChhour]

Noticing this issue as well.

[jonathanface]

I have put together a fiddle to illustrate this issue: https://jsfiddle.net/opr9rgo6/

In my case it occurs within a time chart - not sure if the issue is specific to time or not, but I see the first cited example is also a time chart.

To see the issue dragover a section which includes the first 2 data points like so:

You will see the zoomed content does not include the first data point:

Also, for this fiddle I used chart bundle 2.5, since zoom doesn't work at all with more recent versions.

[Skuhoo]

Any progress on this? I tried looking into it awhile back but had no luck.

[benmccann]

Have you tried again with the latest version 0.6.2 which has many fixes included?

[Skuhoo]

@benmccann Just tried the latest version and the issue is still there, unchanged.

The issue is that the zoomed scale it calculates from the selection is incorrect unless the center of the selection is at the center of the chart. The farther away the center of the selection is from the center of the chart, the more inaccurate the zoomed scale becomes.

[benmccann]

Ok. I've been trying to merge PRs with fixes, but there's no one actively fixing bugs in this library. So really anyone who wants this fixed will have to send a PR

[chriser-]

The usage of the zoom functions when using the drag selection is pretty stupid, there is already a good function to get the value at a pixel. I refactored the mouse up handler, and it works perfectly now with a time graph. I haven't tested it with non-time graphs, but it should work exactly the same.

     chartInstance.zoom._mouseUpHandler = function(event){
        if (chartInstance.zoom._dragZoomStart) {
          helpers.each(chartInstance.scales, function(scale, id) {
            if(scale.isHorizontal()) {
              var beginPoint = chartInstance.zoom._dragZoomStart;
              var offsetX = beginPoint.target.getBoundingClientRect().left;
              var startX = Math.min(beginPoint.clientX, event.clientX) - offsetX;
              var endX = Math.max(beginPoint.clientX, event.clientX) - offsetX;
              var limitObject = scale.options.type == 'time' ? scale.options.time : scale.options.ticks;
              limitObject.min = scale.getValueForPixel(startX);
              limitObject.max = scale.getValueForPixel(endX);
            }
          });
          chartInstance.zoom._dragZoomStart = null;
          chartInstance.zoom._dragZoomEnd = null;
        }
      };

If someone wants to submit a PR or fix it better, feel free to do so.

[JoshAudibert]

I'm only using time graphs for drag-zoom, and @chriser-'s solution works great!