cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
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);
  }
});
Rate this article:
Version history
Last update:
‎03-02-2023 09:26 AM
Updated by:
Contributors