What's the "correct" way to render a picture on a 2nd picture using javascript?

To display results from a test I need to display it on a grid with an X and Y axis.

I tried Charts, but that didn't work. So I am planning to use a image of the axis and I want to plot the marker on it.
I found the following javascript snippet that I hope to be able to use:

using CSS:

<img src="myImage.jpg" style="position:absolute; top:75px; left:100px;"/>

or javascript:

<img src="myImage.jpg" style="position:absolute;" id="img1"/>
<script type="text/javascript">
  var oImg = document.getElementById("img1");
  oImg.style.top = "75px";
  oImg.style.left = "100px";

I am planning to create a webblock containing the img of the grid and I want to place another image on the grid according to the values of two variables.

How can I enter the variables in a javascript code?
What this the right way to implement javascript code in Outsystems? In a expression on the page of the webblock with escape content "no"?

I hope someone can point me into the right direction!

Kind regards,

it's pretty easy.

do this
<div id="theGrid"><img src='yourPlot.png' style="top:75px;left:100px";></div>
where you have your grid as an background-image in the theGrid class

.theGrid {
   width: 400px;
  height: 400px;
position: relative;
background-image: url(/foobar/thegrid.png);

.theGrid img {
position: absolute;

not sure why you cannot do it with charts though...