I need help with a javascript/ node js program. I'm using MongoDB for my database, node js, chart js for the charts, and javascript. I am making a weekly stacked bar chart (made up of activities), the x-axis has the days of the week, and the y-axis has the number of hours spent on the activities on that day. You should be able to click a button below to go to the next week and it should display the date like (Oct. 1-6). I need the program to display data in my MongoDB database to this weekly chart so it can update. I have the html code (weekly.ejs) , the code to talk to the database (weekly.js), a picture of how I want to have my chart, and I will add that below. If anything is needed please ask.

//weekly.js

const express = require('express');

const router = express.Router();

const mongoose = require('mongoose');

const User = require('../models/user')

router.get('/', (req, res) => {

console.log("Loading weekly page");

res.render('weekly.ejs');

});

module.exports = router;

//weekly.ejs (html)

Life Log

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

crossorigin="anonymous">

integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ=="

crossorigin="anonymous" referrerpolicy="no-referrer">

$(document).ready(function () {

$('#sidebarCollapse').on('click', function () {

$('#sidebar').toggleClass('active');

$(this).toggleClass('active');

});

});

Life Log

Log

Statistics

Yearly Summary

Weekly Summary

Weekly Summary

Goals

var userSessionData = ;

var activities = ;

var displayedWeek = ;

displayweeklyChart(userSessionData, activities, displayedWeek);

//weeklyChart.js

var weeklyChart;

var user_data;

var user_activities;

var user_week;

var weekStart;

var weekEnd;

var firstDayNextWeek;

let week = new Array(7);

week[0] = "Monday";

week[1] = "Tuesday";

week[2] = "Wednesday";

week[3] = "Thursday";

week[4] = "Friday";

week[5] = "Saturday";

week[6] = "Sunday";

$(document).ready(function () {

$('#Leftweek').on('click', function () {

user_week.setweek(user_week.getWeek() - 1);

updateSessionweek(user_week);

})

$('#RightWEek').on('click', function () {

user_week.setweek(user_week.getWeeek() + 1);

updateSessionweek(user_week);

})

});

function updateSessionweek(week) {

weeklyChart.destroy();

displayWeeklychart( user_data, user_activities, user_week);

$.ajax({url: '/weekly/UpdateWeek',type: 'post', data: {week},

});

}//getDate return value 0--6 or staurday-sunday

Date.prototype.getDayOfWeek = function () {

return this.getDate() - 1;

}

function getWeekText() {

return week[weekStart.getWeek()];

}//getting data from the database

function displayWeeklyChart(userSessionData, userActivities, week) {

user_data = userSessionData;

user_activities = userActivities;

setWeek(week); //need to know the ranges of the month, starting & end to display data within

let dataSets = initializeDataSets(userActivities);

if (userSessionData.length > 0)

dataSets = populateActivityData(dataSets, userActivities, userSessionData);

var ctx = document.getElementById("weeklyChart").getContext('2d');

weeklyChart = new Chart(ctx, {

type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea

data: { labels: getAllDays(), datasets: dataSets