如何利用flot.js生成月度出勤图表？

Question

如何利用flot.js创建出勤图？类似于链接的图像。attendance chart

日期轴显示完美。问题出在时间轴上！如何格式化时间，将其传递给flot？

    function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}

function gt(year, month, day, hour, minute){
return new Date(year, month - 1, day, hour, minute).getTime();
}
function init_attendace_chart(){

    if( typeof ($.plot) === 'undefined'){ return; }
    console.log('attendance plotting');
    var attendance_data = [
        [gd(2017, 3, 1), gt(2017, 3, 1, 8, 45)], [gd(2017, 3, 2), gt(2017, 3, 1, 7, 48)], [gd(2017, 3, 3), gt(2017, 3, 1, 7, 50)],
        [gd(2017, 3, 4), gt(2017, 3, 1, 7, 45)], [gd(2017, 3, 5), gt(2017, 3, 1, 7, 55)], [gd(2017, 3, 6), gt(2017, 3, 1, 7, 45)],
        [gd(2017, 3, 7), gt(2017, 3, 1, 7, 45)], [gd(2017, 3, 8), gt(2017, 3, 1, 7, 45)], [gd(2017, 3, 9), gt(2017, 3, 1, 7, 45)]

    ];

var attendance_chart_settings = {
    series: {
        curvedLines: {
            apply: true,
            active: true,
            monotonicFit: true
        },
        shadowSize: 5
    },

    xaxes: [{ //Edit this
        mode: "time",
        tickSize: [1, "day"]
    }],
    yaxes:[{
       mode:"time",
        tickSize: [1, "hour"]
    }],
    colors: ["#26B99A"],

    lines: { show: true },
    grid: {
        borderWidth: {
            top: 0,
            right: 0,
            bottom: 1,
            left: 1,
            hoverable: true
        },
        borderColor: {
            bottom: "#7F8790",
            left: "#7F8790"
        }
    }
};

if ($("#attendance_chart").length){


    $.plot($("#attendance_chart"), [{
        label: " Your Clock-In Times",
        data: attendance_data,
        lines: {
            fillColor: "rgba(150, 202, 89, 0.12)"
        },
        points: {
            fillColor: "#fff"
        }
    }], attendance_chart_settings);

    // $.plot($("#attendance_chart"), dataset, options);
    $("#attendance_chart").UseTooltip();
}
}