question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drag zoom loosing data points

See original GitHub issue

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:

screen shot 2016-11-01 at 4 56 34 pm 2

Result:

screen shot 2016-11-01 at 4 56 40 pm

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:15 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
marco-silva0000commented, Jun 30, 2017

any progress on this?

1reaction
chriser-commented, Feb 28, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Data point drag tool does not work correctly on zoomed charts
The point dragging does not respect the range of the displayed axes. The point can be dragged outside the chart and the axis...
Read more >
D3 behave weird when I do a drag act which also trigger ...
Transitioning on zooming: The "expected" zoom behavior is that the point under the mouse pointer stays static while everything around the pointer zooms...
Read more >
How can I zoom out past the default axis limits? - MathWorks
Zooming past the default axes has shown hidden data on previous Matlab versions, ... plot as usual; click the drag icon; then quickly...
Read more >
Zoom in on the iPhone screen - Apple Support
Move the Zoom lens: (Window Zoom) Drag the handle at the bottom of the Zoom lens. Pan to another area: (Full Screen Zoom)...
Read more >
Zooming into a time Interval on the time graphs
Drag the handles on the zoom controller to modify the time range. As you drag, the area between the drag points becomes shaded....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found