JSFiddle - React, Tailwind, and code Playground

by nrwcdeep

HTML

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 700px; width: 100%;"></div>
</body>
</html>

JavaScript

window.onload = function() {
    function prepareDate(daysToAdd) {
        let mydate = new Date();
        mydate.setDate(mydate.getDate() + daysToAdd);
        let dd = mydate.getDate();
        let mm = mydate.getMonth() + 1;
        let yyyy = mydate.getFullYear();
        let preparedDate = yyyy + "-" + mm + "-" + dd;

        preparedDate = new Date(preparedDate);

        return preparedDate.valueOf();
    }

    function prepareDateForCanvas(daysToAdd) {
        let mydate = new Date();
        mydate.setDate(mydate.getDate() + daysToAdd);
        let dd = mydate.getDate();
        let mm = mydate.getMonth() + 1;
        let yyyy = mydate.getFullYear();
        let preparedDateForVanvas = yyyy + "," + mm + "," + dd;
        return preparedDateForVanvas;
    }

    function plotDataPoints() {
        const dps = [];
        const todayDate = prepareDate(0);
        const warningDate = prepareDate(2);
        dps.push({x: new Date(prepareDateForCanvas(0))});
        $.ajax({
            url: 'ajaxfile.php',
            type: 'get',
            dataType: 'JSON',
            success: function (response) {
                const len = response.length;
                for (let i = 0; i < len; i++) {
                    const matter_num = parseInt(response[i].matter_num);
                    const matter_name = parseInt(response[i].matter_name);
                    const matter_name_for_label = response[i].matter_name;
                    let matter_coolingoff_date = new Date(response[i].matter_coolingoff_date);
                    let dd = matter_coolingoff_date.getDate();
                    let mm = matter_coolingoff_date.getMonth() + 1;
                    let yyyy = matter_coolingoff_date.getFullYear();
                    matter_coolingoff_date = yyyy + "-" + mm + "-" + dd;
                    matter_coolingoff_date = new Date(matter_coolingoff_date).valueOf();

                    let matter_coolingoff_date_canvas = response[i].matter_coolingoff_date;

   ...