Filtering data in a table or graph based on the most recent 3 months dynamically

Currently, I am manually filtering the last 3 months using labels: ["JAN", "FEB", "MAR"],

I want to dynamically filter the last 3 months every month. How can I achieve this?

Here is my TypeScript code

HTML

<div>
<canvas id="myChart" width="400" height="300"></canvas>
</div>

TS

  this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');
    let myChart = new Chart(this.ctx, {
      type: 'bar',
      //type: 'doughnut',
      data: {
        // labels: ["Sold", "Booked", "Unsold"],
        // labels: this.barchartLables,
        labels: ["JAN", "FEB", "MAR"],
        datasets: [{
          label: 'Total Expenditure.',
          //data: this.barchartdata,
          data: [2517453, 2617453, 3917453],
          //backgroundColor: ["red", , , , , , , , "blue"],
          backgroundColor: [
            '#ec6666',
            '#78d1dd',
            '#147ad6'
          ],
          borderWidth: 1
        }]
      },
      options: {
        legend: {
          display: false
        },
        responsive: false,
        display: true
      }

    });

Answer №1

Utilize the moment js library to achieve this task

For example, you can employ the moment subtract method to retrieve data from previous months

moment().subtract(1, 'month')//for last month
moment().subtract(2, 'month') // for second last month
moment().subtract(3, 'month') // for the third one

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble importing the "@angular/material" module

I'm completely new to working with the MEAN stack and currently running into issues with Angular's material module. I am attempting to bring in the "@angular/material" module into my code, but encountering an error each time I try to import it. T ...

Problem with updating Cypress e2e tests following recent package upgrades

My current project involved updating all the packages to their latest versions. Prior to the update, all end-to-end tests were functioning correctly without any issues. After completing the update, the product itself compiles and runs as expected without ...

Using Three.js with Webpack 5 and FBXLoader inline integration

I am currently working with Webpack 5 and attempting to provide a direct file path to my FBXLoader using the latest Webpack asset modules: const loader = new FBXLoader() loader.load('../assets/models/myModel.fbx', (object) => { ... }) // encou ...

What is the method for emphasizing links in the navigation bar with Bootstrap 3?

I am currently working on applying custom CSS styles to the Bootstrap navbar in order to have the link text underlined when hovered over, with a fade-in effect as well. To see what I have accomplished so far, you can view it here: https://jsfiddle.net/xfd ...

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

Disabling a button following a POST request

Is there a way to prevent multiple clicks on a button after a post request is made? I want the button to be disabled as soon as it is clicked, before the post request is executed. Below is an example of my code where the button is supposed to be disabled w ...

Unable to assign attribute following discovery

Can the attribute of an anchor element that is found using find() be set? I attempted this: $(this).children('a').setAttribute("href","a link"); Although it does locate the anchor element, why am I receiving an error when trying to use setAttr ...

Encountered a MongoNetworkError while attempting to establish a connection with the server at localhost:27017. The initial connection failed due to an ECONNREFUSED error at 127.0.0.1:

Encountered a MongoNetworkError: failed to connect to server [localhost:27017] on first connect [Error: connect ECONNREFUSED 127.0.0.1:27017 If I reinstall MongoDB, the code works fine. However, I am looking for a permanent solution. [error:MongoNetworkE ...

Deactivate the button when submitting the form

Is there a way to disable a button on a form submission in order to prevent users from submitting multiple times? I attempted to disable the button with JavaScript using onclick, but encountered an issue where the button remained disabled if client side v ...

Retrieving the caret's position in TinyMCE 4

Is there a way to retrieve the caret position in pixels (x & y dimensions) in TinyMCE 4 without obtaining row/column numbers? It should be relative to anything and achieved without adding any extra tags like bookmarks. Anyone know if TinyMCE has a method f ...

add to array object if it does not already exist

I am currently working with the following model in JavaScript and utilizing AngularJS: $scope.data = { FocusOn: " ", Filters: [], Range: { From: "", To: "" } } Additi ...

Is there a way to exclude certain URLs from the service worker scope in a create react app, without the need to eject from the project?

Is there a way to remove certain URLs from a service worker scope in create-react-app without needing to eject? The service worker is automatically generated, and it seems impossible to modify this behavior without undergoing the ejection process. ...

The res.send() method in Restify was not triggered within the callback function of an event

Currently, I am utilizing restify 2.8.4, nodejs 0.10.36, and IBM MQ Light messaging for a RPC pattern. In this setup, when the receiver has the result ready, it emits an event. The below restify POST route is supposed to capture this event along with the ...

Wildcard GET requests in Express cause routing issues when navigating to a React application

My project is derived from the React-Webpack boilerplate repository found at this link: (https://github.com/wallacyyy/webpack-heroku/blob/master/server.js). Initially, everything was working fine but now I want to add routing within my React application. T ...

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...

Having Difficulty Positioning Tooltip Beside Input/Label Field

I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning ...

Retrieve products associated with a specific user using a mongoose query

Learning node, express, and mongoose is a new adventure for me. I am currently developing my first study app to gain the knowledge needed to create a fully functional node.js application. Within my application, I have a Products model (mongoose) set up l ...

Instead of just displaying a count after updating in the database, the updated object will be

Updating an entry in a food truck database requires some adjustments. Here is the model function for handling updates: function updateTruckInfo(changes, id) { return db('trucks') .where({ id }) .update(changes) .then( ...

Issue with CSS: Hover effect causing unexpected additional white space

My main goal is to implement a hover effect that covers an entire section, but I'm facing some challenges. When I hover over my products, it doesn't behave as expected and adds extra white space below while not covering the section properly. Thi ...

Error in Node.js: Unhandled promise rejection due to undefined value

We're currently facing an issue with the create user controller in Node.js Express. The problem arises when attempting to sign up on the front end, resulting in an error message: "Unhandled promise rejection error value is not defined." Although it ap ...