Tips for planning a successful outing using chart js

I created a graph using NextJs and ChartJs to display the COVID-19 statistics over the past 30 days. I retrieved this data from an API that provides information such as dates and stats:

timeline: {
  cases: {
   '5/13/21': 5902343,
   '...' : ...
  },
}

The graph is working, but I want to display the date for each stat on the X-axis of my chart.

This is the code I used (lineData represents my API request):

labels: [Object.keys(lineData.timeline.cases)],

However, it's showing all the dates as a single object.

Currently, my label looks like this:

        labels: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "27",
          "28",
          "29",
          "30",
        ],

My goal is to replace these numerical values with the actual dates provided by the API.

Answer №1

When you use Object.keys, it returns an array rather than an array of arrays in the current context:

labels: [ ['5/13/21'] ]

To simplify, you can modify it to:

labels: Object.keys(lineData.timeline.cases) // labels: ['5/13/21']

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

acquire an array in javascript from an object

Currently, I am in the process of building a google authentication chat website and everything has been going quite smoothly. In fact, most of the work is already complete, except for one final task - retrieving messages from a JSON database. While I am ab ...

Conflicting jQuery slide effects and jQuery UI positioning causing issues

As you hover over an element, the position function adjusts its left attribute to the correct value. However, when you move the mouse away, it resets back to 0, causing the element to appear below the first one in the list. This issue is noticeable when y ...

"Creating a Popup Function with JavaScript and jQuery for Continuous Iteration and

As someone new to programming, I greatly appreciate the insights and guidance from contributors on platforms like Stack Overflow. Thank you for all your help. I'm facing a challenge with a jQuery popup function that is triggered by an events.register ...

Troubleshooting Timeout Issue with Keycloak NextAuth on Cloud Run and GCE

I have set up a website with Keycloak authentication. The frontend is hosted on Google Cloud Run, while the Keycloak server runs in a container on a Google Compute Engine instance. Nextjs is used to build the frontend, and authentication is configured thro ...

Tips for sending data from an HTML page to an Angular custom element

I have successfully created an angular custom element from an angular component that I would like to call from a standard HTML page. The custom element requires a parameter, which functions properly when called as a component within an angular project. Ho ...

creating a blank object using getStaticProps and typescript

I've been struggling to retrieve data using getStaticProps, but when I log the props inside my component, it returns an empty object. Any insights on why this might be happening? If you have any ideas, please share them with me. Below is my _app.tsx ...

Slowdown in functionality

My current project involves creating a user interface for an Oven configuration application using CSS, Java Script, Jquery & Json. While the interface performs actions within milliseconds on browsers and simulators, my client has noticed that it takes seco ...

Transferring data between modules using Ajax or services in React.js

I have a React application where I need to pass data received in one component to another. After receiving the data successfully, I set the state and then try to pass this data as a property to the next component. However, when I try to access this passed ...

Oops! Looks like there was an error. The text strings need to be displayed within a <Text> component in the BottomTabBar. This occurred at line 132 in the

My app includes a bottomTab Navigation feature, but I encountered an error: Error: Text strings must be rendered within a <Text> component. This error is located at: in BottomTabBar (at SceneView.tsx:132) in StaticContainer in StaticCont ...

Display the information from a JSON array using an alert box

Similar Question: How can I access a specific value in a nested data structure or JSON? I am trying to display data from a JSON array using the following code, but it is not working: var Content = [{ "01":[{"text":"blablablablabla","foo":"abeille ...

Insert a zero in front of any single digit hour

What is the best way to add a leading zero before single digit numbers in time format? For example, how can we convert "0:3:25" (hh:mm:ss) to "00:03:25"? ...

The issue is that AngularJS deferred.reject function is not functioning properly, while the $q

I'm struggling to understand the difference between Angular JS deferred and $q. I recently came across this SO Question that delves into the variance between $q.defer() and $q. According to the post: $q.reject serves as a quick way to create a defe ...

Parsing error encountered in JQuery getJSON AJAX request

I've been attempting to extract information from a JSON response using both JQuery's getJSON and ajax functions: [{"iId":"1","heading":"Management Services","body":"<h1>Program Overview</h1><h1>January 29, 2009</h1>"}] I ...

{ Node.js and Express - Preventing Duplicate Requests } How to fix the issue of sending client-side requests twice

I'm currently diving into nodejs but this frustrating bug is driving me crazy!! Every time I try to make a POST request on my website, it ends up sending two requests instead of one. Initially, I suspected it was an issue with my connection to mongodb ...

Error in Cannon JS: Position Vector NaN occurs when initializing a body with certain properties

While working with Cannon.js and following online examples, I encountered an issue where setting certain properties in the constructor resulted in NaN values for the position and angular velocity (x, y, z). For instance, when initializing a body without s ...

Retrieving an image from an array

I attempted to design a slider for displaying my projects by creating an array to fetch information and insert it into HTML. However, I encountered difficulty in getting the images to change as only the text and heading were updating. Despite seeking assis ...

Unable to showcase Mysql search outcomes in a distinct div section

I have been working on a project to showcase MySQL results by utilizing three different sections/divisions. In Division 1, there are radio buttons that allow for selecting and viewing the results based on different criteria. Division 2 contains text indica ...

The value proposition of Ant Design's Input component doesn't display data

I am facing an issue with my Ant Design form where data fetched from an API is not showing up in the input field. I have set the value prop in the <Input/> field like this: <Input value = {value.project_name}/>, but the field remains empty. Th ...

The Ajax data was not displayed in the console log, instead an error message was returned stating "http://localhost/IFICSV3/public/sla/sla/getbranch/180 not found"

I am attempting to make a dropdown option dependent on another using ajax. I want to view the data in the console to see if it is successful or not. I expect the data to be displayed in the console log, but instead, an error is being given. http://local ...

Transform the MongoDB aggregation output by using variable keys

Here is a sample document from the Collection: { "_id" : ObjectId("5fec3b978b34e8b047b7ae14"), "duration" : 20.0, "createdOn" : ISODate("2020-12-16T22:28:44.000Z"), "ClockInTime" : ISODate ...