CODEWITHSUNDEEP
javascriptchart.js2
Hellboy
Hellboy

Reputation: 21

Add gif images to the chart.js V2.0

I want to add gif images to the chart.js like the way it is done here a link!/ but in the latest version(2.0) of chart.js .

here is the code which works perfectly for .png images but not the .gif ones also it does not works with the V2.0 of chart.js. Please help

Thanks in advance :)

var img = new Image();

  var size = 48;

  Chart.types.Line.extend({
    name: "LineAlt",
    draw: function() {
      Chart.types.Line.prototype.draw.apply(this, arguments);

      var scale = this.scale;
      [
      	{ x: 2, y: 50 }, 
        { x: 4, y: 10 }
      ].forEach(function(p) {
        ctx.drawImage(img, scale.calculateX(p.x) - size / 2, scale.calculateY(p.y) - size / 2, size, size);
      })
    }
  });

  var data = {
    labels: ["Dec", "Jan", "Feb", "March", "April", "May", "June"],
    datasets: [{
      label: "My Second dataset",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: [28, 48, 40, 19, 86, 27, 90]
    }]
  };

  var ctx = document.getElementById("myChart").getContext("2d");
  var myLineChart = new Chart(ctx).LineAlt(data, {
    scaleBeginAtZero: true
  });

Upvotes: 1

Views: 435

Answers (1)

Hellboy
Hellboy

Reputation: 21

var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);

    var chart = this.chart;
    var ctx = chart.chart.ctx;

    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      var scale = this.scale;
      [
        { x: 2, y: 50 }, 
        { x: 4, y: 10 }
      ].forEach(function(p) {
        ctx.drawImage(img,xaxis.getPixelForValue(undefined, p.x) - size / 2, yaxis.getPixelForValue(p.y) - size / 2, size, size);
      })
    }
  }
});

Upvotes: 1

Related Questions