Change mysql x-axes date to day in chart.js

Question

So I have this code which shows up my Mysql data in chart.js.

Basically everything works but i just want to change the date into days

This is what I have Current Chart And this is what I want to achieve My goal Whatever i try i get never the result i want to get. Here is all of my code:

chart.php

<?php
header('Content-Type: application/json');
require 'config/db.php';
$query = sprintf("SELECT * FROM (SELECT pageid, pagehits, pagedate FROM pagehits ORDER BY pagedate DESC LIMIT 7) sub ORDER BY pagedate ASC");

$result = $conn->query($query);
$data = array();
foreach ($result as $page_row) {
    $data[] = $page_row;
}

$result->close();
$conn->close();

print json_encode($data);

chart.html

<!DOCTYPE html>
<html>
<head>
    <title>ChartJS - LineGraph</title>
    <style>
        .chart-container {
            width: 640px;
            height: auto;
        }
    </style>
</head>
<body>
<div class="chart-container">
    <canvas id="mycanvas"></canvas>
</div>

<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="chart.js"></script>
</body>
</html>

chart.js

$(document).ready(function(){
    $.ajax({
        url : "chart.php",
        type : "GET",
        success : function(data){
            console.log(data);

            var pagedate = [];
            var pagehits = [];
            for(var i in data) {
                pagedate.push( data[i].pagedate);
                pagehits.push(data[i].pagehits);
            }

            var chartdata = {
                labels: pagedate,
                datasets: [
                    {
                        label: "pagehits",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(59, 89, 152, 0.75)",
                        borderColor: "rgba(59, 89, 152, 1)",
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        data: pagehits
                    },
                ]
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error : function(data) {

        }
    });
});

Any idea to fix my problem?? I would appreciate any answer! Thanks!!

Nick · Accepted Answer · 2020-12-31T14:50:31.907

1

You can convert the date into a day of the week inside your PHP code using DateTime objects:

foreach ($result as $page_row) {
    $page_row['pagedate'] = (new DateTime($page_row['pagedate']))->format('l');
    $data[] = $page_row;
}

edited Dec 31 '20 at 14:50

answered Dec 30 '20 at 23:40

Nick

138,499
22
57
95

so i tried out what you said but whatever for a reason my chart did not change at all. It got just one more value called "undefinied" – ProgramFreak Dec 31 '20 at 08:54
1

@CuzImFortnite sorry, I wasn't paying enough attention to the code. I've corrected it. – Nick Dec 31 '20 at 14:50
+1 Did work out perfectly, thank you so much! Just a question do you know how to translate it to another language? Would help me out too but thanks so much! – ProgramFreak Dec 31 '20 at 21:54
1

@CuzImFortnite great - I'm glad it worked, sorry about the stuff-up to begin with. [This question](https://stackoverflow.com/questions/13845554/php-date-get-name-of-the-months-in-local-language) might help you with different languages – Nick Dec 31 '20 at 21:59

score 0 · Answer 2 · answered Dec 30 '20 at 23:38

0

Seems like the issue is within chart.js under chartdata (labels: pagedate). You could write a separate function to convert the date to its corresponding named day according to this post.

Day Name from Date in JS

Then just change it to labels: myFunction(pagedate)

answered Dec 30 '20 at 23:38

mjlitz

148
10

i dont get it `function date(pagedate){ var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var d = new Date(pagedate); var dayName = days[d.getDay()]; } labels: date,` What do i do wrong? – ProgramFreak Dec 31 '20 at 09:29
1. Return the dayName within your function date 2. Change labels: date to date(pagedate) – mjlitz Dec 31 '20 at 16:35

Change mysql x-axes date to day in chart.js

2 Answers2