line chart with ChartJS

by sazakharov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" height="400" width="600"></canvas>
<hr /> Image by Everaldo Coelho and YellowIcon; [LGPL (http://www.gnu.org/licenses/lgpl.html)], via Wikimedia Commons

CSS

body {
  font-family: Verdana;
  font-size: 10px;
}

JavaScript

var img = new Image();
img.onload = function() {
  var size = 48;
  Chart.types.Line.extend({
    name: "LineAlt",
    draw: function() {
      Chart.types.Line.prototype.draw.apply(this, arguments);

      var scale = this.scale;
      [
      	{ x: 1.5, 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
  });
}

img.src =...