[Chartjs]-Create a heatmap/punchcard Using Chart.js

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
                    }
                }]
            }
        }
    });