CODEWITHSUNDEEP
javascriptgoogle-cloud-firestorechart.js
Akbarali Otakhanov
Akbarali Otakhanov

Reputation: 51

Firestore orderBy("Date", "desc") is not working properly in the chart.js graph

Our Firestore dataset includes data that show date and time. I have used ...orderBy("Date", "desc"); I have tried this with tables and it is working well with tables, but it is not working with chart.js line graph.

So far, I did in the following procedures:

$(document).ready(function(){

        firebase.initializeApp(firebaseConfig);
        var db = firebase.firestore();


        var timeOptions = {hourCycle: 'h23', hour: '2-digit', minute:'2-digit'};
        var dateOptions = { day: 'numeric', month: 'numeric' };
    
    
        var docRef = db.collection('Users').doc('000').collection('Data').orderBy("Date", "desc").limit(100);


       docRef.get().then((querySnapshot) => {
          querySnapshot.forEach((doc)=>{
            var one = doc.data();

            var date = one.Date.toDate().toLocaleDateString('en-CA', dateOptions) + " " +  one.Date.toDate().toLocaleTimeString( [],  timeOptions);
            labelsDateArray.push(date);
});


var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labelsDateArray,
            datasets: [{
                label: 'Kefa-Firestore-Dataset',
                fill: false,
                showLine: true,
                lineTension: 0.2,
                backgroundColor: "rgba (75, 192, 192,0.4)",
                borderColor: "rgba(139, 0, 0, 1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(139, 0, 0, 0.5)",
                pointBackgroundColor: "red",
                pointBorderWidth: 2,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(0, 0, 0, 1)",
                pointHoverBorderColor: "rgba(0, 0, 0, 1)",
                pointHoverBorderWidth: 5,
                pointRadius: 3,
                pointHitRadius: 10,
            }]
        },
    
        }); 
        
    }).catch((error) => {
        console.log("Error getting document:", error);
    }); 
});

Output is like this: enter image description here

So, How I can order date and time properly in this case, anyone could help?!

Date format in the Firestore like in the following: enter image description here

Upvotes: 1

Views: 59

Answers (1)

Chris F Carroll
Chris F Carroll

Reputation: 12370

In 2023, Javascript in the major browsers has picked up bug 16399 introduced during 2022 into the Unicode Common Locale Data Repository. The bug has set en-CA numeric date format to American date format instead of the Canadian standard YYYY-MM-DD format.

A workaround until unicode and the browsers are fixed is to use "fr-CA" date format instead.

Upvotes: 1

Related Questions