Position Image over Marker in Dynamic Line Chart - CanvasJS JavaScript Charts

Position Image over Marker in Dynamic Line Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

#image{
  pointer-events:none;
}

JavaScript

var dps = [];
var customMarkers= [];

var chart = new CanvasJS.Chart("chartContainer",{  
  title: {
    text: "Image as marker on dynamic charts"
  },
  theme: "theme2",
  data: [
    {
      type: "spline",
      markerImageUrl:  "https://i.imgur.com/gzn48eN.png",
      markerType: "none",
      dataPoints: dps
    }					
  ]
});

chart.render();

var xVal = dps.length + 1;
var yVal = 15;
var updateInterval = 1000;

var updateChart = function () {
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
  dps.push({ x: xVal,y: yVal });
  xVal++;
  if (dps.length > 10)
  {
    dps.shift();
  }
  chart.render();
  addMarkerImage(chart);
};

function addMarkerImage(chart) {
  var data = chart.options.data[0];
  for(var i = 0; i < data.dataPoints.length; i++) {
    customMarkers.push($("<img>").attr("src", data.markerImageUrl)
                       .css("display", "none")
                       .css("height", 20)
                       .css("width", 20)
                       .appendTo($("#chartContainer>.canvasjs-chart-container"))
                      );   
    positionMarkerImage(customMarkers[i], i);
  }            
}

function positionMarkerImage(customMarker, index){ 
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);

  customMarker.css({"position": "absolute", 
                    "display": "block",
                    "top": pixelY - customMarker.height()/2,
                    "left": pixelX - customMarker.width()/2
                   });
}

var updateId = setInterval(function () { updateChart();}, updateInterval);

$(window).resize(function() {
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){
    positionMarkerImage(customMarkers[i], i);
  }
});