Pie Chart with Logo (image) at bottom left - CanvasJS JavaScript Charts

Pie Chart with Logo (image) at bottom left - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var name = " KIND ";
var dataPoints = [];
var chart;

$.getJSON("https://api.myjson.com/bins/66xs3", function(data) {
  $.each(data, function(key, value){
    dataPoints.push({label: value[0], y: parseInt(value[1]), indexLabel: value[1].toString()});
  });
  chart = new CanvasJS.Chart("chartContainer",{
    animationEnabled: true,
    //animationDuration: 2000,
    zoomEnabled:true,
    exportEnabled: true,
    creditText: "BAMWX.COM",
    creditHref: "https://bamwx.com",
    title:{
      text:"7 Day Forecast for ",
      fontSize: 28,
    },
    subtitles:[
      {
        text: name,
        fontColor: "red",
        fontSize: 24
      }
    ],
    axisY:{
      title: "Degrees F",
      titleFontSize: 18,
      interlacedColor: "#F8F1E4",
      tickLength: 10,
      labelFontSize: 12
    },
    axisX: {
      titleFontSize: 18,
      labelAngle: -30,
      labelWrap: true,
      labelFontSize: 10,
      labelMaxWidth: 50
    },
    data: [{
      markerColor: "blue",
      color: "gray",
      fillOpacity: .3,
      lineColor:"red", 
      indexLabelFontSize: 18,
      indexLabelFontColor: "red",
      indexLabelFontWeight: "bold",
      type: "splineArea",
      dataPoints : dataPoints,
    }]
  });
  chart.render();  
});

setTimeout(function() {
  chart.render();
  var canvas = document.getElementsByClassName("canvasjs-chart-canvas")[0];
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  imageObj.crossOrigin = "anonymous";//https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

  imageObj.onload = function() {
    context.drawImage(imageObj, 5, 5);
  }
  imageObj.src = 'http://i.imgur.com/qWTEOfN.jpg';
},2000);