Set Axis Max To Image Size

Use case: I have an image that I want to show markers on. To do this I'm using a scatter graph widget, where I use plotBackgroundImage to set an image to the background.

In my dataset I have a set of items with x and y coordinates. However I don't have the dimensions of the image itself in the dataset.

Solution: I read the current axis limits, create a scaling multiplier, and then change the x and y coordinates of the dataset to scale correctly within the given limits.

To tackle the reading of the image dimensions, instead of trying to wait for the image to load, I let the widget load as normal, then do a widget.redraw() as soon as the dimensions are available.

Code snippet is below:

let refresh = true;

const setDimensions = (url) => {
  return new Promise((resolve, reject) => {
    var img = new Image();
    img.src = url;
    img.onload = () => {
      const scale = {
        x: (widget.style.xAxis.max - widget.style.xAxis.min) / img.naturalWidth,
        y: (widget.style.yAxis.max - widget.style.yAxis.min) / img.naturalHeight
      };
      widget.rawQueryResult.values.forEach((item) => {
        item[0].data = item[0].data * scale.x + widget.style.xAxis.min;
        item[0].text = item[0].data.toString();
        item[1].data = item[1].data * scale.y + widget.style.yAxis.min;
        item[1].text = item[1].data.toString();
      });
      widget.redraw();
      resolve();
    };
  });
};

widget.on("queryend", (scope, result) => {
  refresh = result.reason != "widgetredraw";
});

widget.on("beforeviewloaded", (scope, args) => {
  args.options.chart.plotBackgroundImage = URL_TO_IMAGE;
  if (refresh) {
    setDimensions(URL_TO_IMAGE);
  }
});

Updated 03-02-2023

Developers: Plugins and scripts