ChartJS Heatmap

by zachpainter77

HTML

<script src="https://csdrsolutions.com/scripts/chart.js"></script>
<script src="https://csdrsolutions.com/scripts/CSDR_Chart_HeatMap.js"></script>
<script src="https://csdrsolutions.com/scripts/CSDR_Chart_Test.js"></script>
<div style="position: absolute; width: 100%; height: 100%;">
<div style="position: relative; width: 100%; height: 100%;">
<canvas id='someCanvas' ></canvas>
</div>
</div>

CSS

.chartWrapper {
          position: relative;
        }
        
        .chartWrapper > canvas {
          position: absolute;
          left: 0;
          top: 0;
          pointer-events: none;
        }
        
        .chartAreaWrapper {
          width: 600px;
          overflow-x: scroll;
          overflow-y: scroll;
        }

JavaScript

try {
var getColorForPercentage = function (pct, minVal, maxVal, colorGradiant) {
    var finalColorPercent = pct;
    
    if(pct == 0)
     return "rgb(255, 255, 255)";
    else if(pct == 1)
    	return "rgb(235, 235, 116)";
    else if(pct == 2)
     return "rgb(225, 148, 93)"
    else if(pct >= 3)
     return "rgb(214, 60, 69)"
}
  // Register my legend
  var mySeries = [
            {
                label: '2021',
                data: [1,5,3,1,3,2,1,3,1,3,2,2]
            },
            {
               label: '2020',
               data: [2,2,1,3,1,3,2,5,2,5,1,1]
            },
            {
                label: '2019',
                data: [4,5,4,0,5,5,1,1,3,4,1,4]
            },
            {
                label: '2018',
                data: [5,2,2,4,2,4,3,5,3,4,2,3]
            },
            {
                label: '2017',
                data: [5,5,2,4,3,4,2,1,2,1,1,4]
            },
            {
                label: '2016',
                data: [1,1,5,2,4,2,2,1,3,1,2,5]
            }
        ];
  myChartLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
  myChartData = {
    labels: myChartLabels,
    datasets: mySeries
};
  var MyLegend = Chart.Legend.extend({
      colorFunction: function(value, minVal, maxVal, colorScheme) {
        return getColorForPercentage(value, minVal, maxVal, colorScheme);
      },
      update: function(maxWidth, maxHeight) {
        this.width = 30;
        this.height = maxHeight;

        // Need to return minimum size
        return {
          width: this.width,
          height: this.height,
        }
      },
      //in some sample code I see the update which calls the update element.  I'm 
      //thinking that perhaps (after you read below) I should move some of the draw 
      //for some of the different color elements into the update element section?
      //I'm not sure how the draw and update relate but I'm guessing the update 
      //gets called before...