Image as marker - CanvasJS JavaScript Charts

Image as marker - 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>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{  
	title: {
  	text: "Image as marker"
  },
	theme: "theme2",
  animationEnabled: true,
  data: [
    {
      type: "stepLine",
      markerType: "none",
      dataPoints: [
        { x: 10, y: 71, markerImageUrl: "http://i.imgur.com/TUmQf5n.png" },
        { x: 20, y: 55, markerImageUrl: "http://i.imgur.com/rx4VPtF.png" },
        { x: 30, y: 50, markerImageUrl: "http://i.imgur.com/qrqIve0.png" },
        { x: 40, y: 70, markerImageUrl: "http://i.imgur.com/TUmQf5n.png" },
      ]
    }					
  ]
});

chart.render();

var customMarkers= [];

addMarkerImages(chart);

function addMarkerImages(chart){
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){

    customMarkers.push($("<img>").attr("src", chart.data[0].dataPoints[i].markerImageUrl)
                       .css("display", "none")
                       .css("height", 30)
                       .css("width", 30)
                       .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
                   });
}

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