doesn't work zooming Xscale with static range

[kitty7c6]

Hello, I find strange behavior of zooming X scale. When X scale из without range (auto) - it zooms, but if it has range[ x1, x2] zoom on X doesn't work. Zooming by mouse. But! on Y scale zoom works in both situations. What I do wrong? or is this normal behavior og is it bug?

I have two uPlots with syncro on X, uPlot options:

const prepareChartOpts = (id, series) => {
  return {
    id,
    width: document.getElementById("chart1").offsetWidth,
    height: document.getElementById("chart1").offsetHeight,
    hooks: {
      setSeries: [
        (u, seriesIdx) => {
          u.series.forEach((s, i) => {
            s.width = i == seriesIdx ? 2 : 1;
          });
        }
      ],
    },
    legend: {
      show: false 
    },
    focus: {
      alpha: 1.1,
    },
    cursor: {
      points: {
        show: false,
      },
      drag: {
        x: true,
        y: true,
        dist: 2,
        uni: 2
      },
      sync: {
        key: "moo",
        scales: ["x"]
      }
    },
    select: {
      over: false,
    },
    scales: {
      x: {
        time: false,
        range: [0, 5]   <- with  this string  X zoom doesn't work
      },
      y: {
       range: [-2, 4]
      }
    },
    series: [
      {
        label: "x",
      },
      ...series,
    ],
  }
}

[leeoniya]

range defined with a static array is designed to be static (not zoomable). if it does zoom then it is a bug :)

btw, you can define the scale range as a callback, which gives you full control over what happens.

what behavior are you trying to achieve? an initial range? a max range? can you make a jsfiddle that demonstrates this? e.g. https://jsfiddle.net/esdpugqx/

[kitty7c6]

Hello! What do I want to achieve: finally I want to have two charts with x-sync and a specified scale, and scroll. By scroll I want to move data into the window like in "Dynamic data update / streaming" - Fixed length / sliding data slices. I thought, that range can be that specified scale (but it not)). Than I tried to work with function setScale(), and found that setScale(x) calls resetYseries (and libs code it confirmed). Is it possible to use setScale to x and y in one function: setScale(x{ , }, y{ , })?

Now I think about:

1. Get array1(arrays1()) with all data (getting data from com-port)
2. get array2(arrays2()) with data to draw on charts
3. by scroll "move" "ranges" = change data to draw in array2 and set autorange on Xaxis

Or

1. Get only array1(arrays1()) with all data (getting data from com-port)
2. Use only setScale and prohibit reset scales by doubleClick (if it possible)
3. get callback to setScale (hook? if it possible) to change scrolls parameters
4. And by scroll - use setScale too

[leeoniya]

please make a jsfiddle with your two charts and simulate data streaming (1Hz). then i will help you with zooming / scaling.

Is it possible to use setScale to x and y in one function: setScale(x{ , }, y{ , })?

setScale() is batched, you can set both at same time with 2 calls.

[kitty7c6]

https://jsfiddle.net/Napster7c6/egLd24sv/6/ without scroll, but I can to add it (scroll is another div with resizeble div inside)

[leeoniya]

thanks.

your demo looks like example 2 (only push), but you said "Fixed length / sliding data slices". which is example 1.

https://leeoniya.github.io/uPlot/demos/stream-data.html

is your demo the correct type?

without scroll, but I can to add it (scroll is another div with resizeble div inside)

let's get it working without scroll first :)

[kitty7c6]

my bad, I updated renderer.js. It has data_chart() for all data (for saving) and data_view() for data on charts