How can I display the date in a CanvasJs chart in the x axix

I would like to obtain the date and the loan balance from contol_data table and display the data in a chart with date on the x axix and loan balance in the y axix. I am able to display loan amounts but not date details

            <?php

            // load database credentials
            require_once realpath(__DIR__. "/vendor/autoload.php");
            use Dotenv\Dotenv;

            $dotenv = Dotenv::createImmutable(__DIR__);
            $dotenv ->load();
            $db_username    = $_ENV['DB_USERNAME'];
            $db_password    = $_ENV['DB_PASSWORD'];
            $db_host        = $_ENV['DB_HOST'];

            $mysqli = new mysqli($db_host, $db_username, $db_password,'pawn_db') or die(mysqli_error($mysqli));

            // obtain data
            $result = $mysqli->query("SELECT * FROM control_data WHERE BRANCH_ID = '1' AND DataDate >= '2021-01-01' AND  DataDate <= '2021-01-31' AND Loan <>0") or die($mysqli->error);

            echo mysqli_num_rows($result);  
            // data to an array
    
            $dataPoints = array();
            if(mysqli_num_rows($result) > 0){

                // create an arry with results
                    
                while($row = mysqli_fetch_array($result))
                {    
                    //$currentDate =date(strtotime($row['DataDate'] ));  
                    $date = ($row['DataDate']);
                
                    $point = array("x" => date('d-m',strtotime($date)) , "y" => $row['Loan']);
                    
                    array_push($dataPoints, $point);        
                }
                }


            ?>
            <!DOCTYPE HTML>
            <html>
            <head>  
            <script>
            window.onload = function () {

            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1", // "light1", "light2", "dark1", "dark2"
                title:{
                    text: "Simple Column Chart with Index Labels"
                },
                axisY:{
                    includeZero: true
                },
                data: [{
                    type: "column", //change type to bar, line, area, pie, etc
                    //indexLabel: "{y}", //Shows y value on all Data Points
                    indexLabelFontColor: "#5A5757",
                    indexLabelPlacement: "outside",   
                    dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
            
            }
            </script>
            </head>
            <body>
            <div id="chartContainer" style="height: 370px; width: 100%;"></div>
            <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
            </body>
            </html>

I expected a bar chart with dates on the x axix. But nothing shows. Howener, if I conver data to strtotime the chart can be dispayed. But I want the date to dispay istead of strtotime data.

Solution

To display chart with time axis, you need to convert PHP timestamp strtotime($date) to javascript timestamp by multiplying PHP timestamp with 1000. Also, you need to set xValueType to dateTime as you are passing timestamp to datapoints. If you want to display the axis labels in the format "d-m", set the valueFormatString for axisX to DD-MM.