CODEWITHSUNDEEP
vue.jsplotechartsquasardecimation
NikoProg
NikoProg

Reputation: 1

Handling Zoom and Decimation in ECharts with Vue.js and Backend Data Constraints

Enhanced Version with Formatting

Problem Description

I'm using ECharts with Vue.js + Quasar, along with a backend server that manages data decimation (e.g., keeping only 1 point out of n to return a maximum of 1000 points). This is necessary because I have a dataset with over 1,000,000 points.

The Issue

When I zoom in (e.g., from 10% to 90% of the dataset), the frontend sends the zoom range to the backend, which then returns 1000 points for that range. However, these 1000 points now become the new "global" dataset, making it impossible to zoom back out.

Additionally, if I zoom further within this subset (e.g., zooming 10–90% of the new range), nothing changes because the backend interprets these percentages relative to the original full dataset.

Questions

Thanks in advance!

Ideas I've Considered (but am unsure about):

  1. Adjust percentages dynamically:

    • When zooming in, calculate the current zoom percentage and combine it with the new zoom level.
    • When zooming out, calculate the inverse to adjust the exact percentage range for the original dataset.
    • For panning (moving left or right), dynamically adjust the range by adding/subtracting percentages (e.g., if the zoom is between 40% and 50%, moving left might shift the range to 35%–45%).

  2. Backend-based solution using octrees:

    • The backend could use an octree-like structure to manage zoomed data efficiently, but I’d prefer something simpler if possible.

Upvotes: -1

Views: 95

Answers (1)

Matthias Mertens
Matthias Mertens

Reputation: 2551

Can you not just set min/max of your axes and everything is fine? Alternatively, see this post for a similar question.

Example:

const data = [
  [1, 4862.4], [2, 5294.7], [3, 5934.5], [4, 7171.0], [5, 8964.4], [6, 10202.2],
  [7, 11962.5], [8, 14928.3], [9, 16909.2], [10, 18547.9], [11, 21617.8], [12, 26638.1],
  [13, 34634.4], [14, 46759.4], [15, 58478.1], [16, 67884.6], [17, 74462.6], [18, 79395.7]
];
const xRange = 18;

option = {
  dataset: [{ source: data }],
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    realtime: false
  }],
  xAxis: {min: 0, max: 18},
  yAxis: {},
  series: [{ type: 'scatter' }]
};


myChart.on('dataZoom', function (params) {
  const startPercentage = params.start;
  const endPercantage = params.end;
  const lowerBound = xRange * startPercentage * 0.01;
  const upperBound = xRange * endPercantage * 0.01;
  const newData = data.filter((point) => point[0] >= lowerBound && point[0] <= upperBound);
  myChart.setOption({
    dataset: [{
      source: newData
    }]
  });
});

Upvotes: 0

Related Questions