Create a heatmap/punchcard Using Chart.js

Question

I have multiple charts on page, one of them is HeatMap. I am using chartjs to create my charts. I am unable to create a heatmap using chartjs. Also is it possible to get look like github punchcard with chartJS

punchcard example

Answer 1

Use bubble chart to draw chart. Below is the image for the same.

[Sample-code]

var ctx = document.getElementById("myChart");
    var data = {
        datasets: [
            {
                label : "Monday",
                data: [
                    {
                        x: 2,
                        y: 5,
                        r: 12
                    },
                    {
                        x: 6,
                        y: 5,
                        r: 8
                    },
                    {
                        x: 10,
                        y: 5,
                        r: 8
                    },
                    {
                        x: 14,
                        y: 5,
                        r: 6
                    },
                    {
                        x: 18,
                        y: 5,
                        r: 6
                    },
                    {
                        x: 22,
                        y: 5,
                        r: 2
                    },
                    {
                        x: 26,
                        y: 5,
                        r: 2
                    },
                    {
                        x: 30,
                        y: 5,
                        r: 6
                    },
                    {
                        x: 34,
                        y: 5,
                        r: 8
                    },
                    {
                        x: 38,
                        y: 5,
                        r: 12
                    },
                    {
                        x: 42,
                        y: 5,
                        r: 12
                    },
                    {
                        x: 46,
                        y: 5,
                        r: 10
                    },
                    {
                        x: 50,
                        y: 5,
                        r: 12
                    },
                    {
                        x: 54,
                        y: 5,
                        r: 8
                    },
                    {
                        x: 58,
                        y: 5,
                        r: 8
                    }

                ],
                backgroundColor:"#444",
                hoverBackgroundColor: "#FF6384",
            },
            {
                label : "Tuesday",
                data: [
                    {
                        x: 2,
                        y: 15,
                        r: 12
                    },
                    {
                        x: 6,
                        y: 15,
                        r: 8
                    },
                    {
                        x: 10,
                        y: 15,
                        r: 8
                    },
                    {
                        x: 14,
                        y: 15,
                        r: 6
                    },
                    {
                        x: 18,
                        y: 15,
                        r: 6
                    },
                    {
                        x: 22,
                        y: 15,
                        r: 2
                    },
                    {
                        x: 26,
                        y: 15,
                        r: 2
                    },
                    {
                        x: 30,
                        y: 15,
                        r: 6
                    },
                    {
                        x: 34,
                        y: 15,
                        r: 8
                    },
                    {
                        x: 38,
                        y: 15,
                        r: 12
                    },
                    {
                        x: 42,
                        y: 15,
                        r: 12
                    },
                    {
                        x: 46,
                        y: 15,
                        r: 10
                    },
                    {
                        x: 50,
                        y: 15,
                        r: 12
                    },
                    {
                        x: 54,
                        y: 15,
                        r: 8
                    },
                    {
                        x: 58,
                        y: 15,
                        r: 8
                    }

                ],
                backgroundColor:"#444",

            },
            {
                label : "Wednesday",
                data: [
                    {
                        x: 2,
                        y: 25,
                        r: 12
                    },
                    {
                        x: 6,
                        y: 25,
                        r: 4
                    },
                    {
                        x: 10,
                        y: 25,
                        r: 4
                    },
                    {
                        x: 14,
                        y: 25,
                        r: 2
                    },
                    {
                        x: 18,
                        y: 25,
                        r: 6
                    },
                    {
                        x: 22,
                        y: 25,
                        r: 12
                    },
                    {
                        x: 26,
                        y: 25,
                        r: 12
                    },
                    {
                        x: 30,
                        y: 25,
                        r: 6
                    },
                    {
                        x: 34,
                        y: 25,
                        r: 8
                    },
                    {
                        x: 38,
                        y: 25,
                        r: 12
                    },
                    {
                        x: 42,
                        y: 25,
                        r: 12
                    },
                    {
                        x: 46,
                        y: 25,
                        r: 10
                    },
                    {
                        x: 50,
                        y: 25,
                        r: 12
                    },
                    {
                        x: 54,
                        y: 25,
                        r: 8
                    },
                    {
                        x: 58,
                        y: 25,
                        r: 8
                    }

                ],
                backgroundColor:"#444",

            }
        ]
    };
    var myBubbleChart = new Chart(ctx,{
        type: 'bubble',
        data: data,
        options: {
            scales : {
                xAxes : [{
                    display : false,
                    ticks : {
                        beginAtZero : true,
                        max : 70
                    }
                }],
                yAxes : [{

                    ticks: {
                        beginAtZero : true,
                        max : 40,
                        stepSize : 10
                    }
                }]
            }
        }
    });