Utilizing Chart.js to plot a line graph by passing an array of "dates" as data points

When sending 3 datasets from the database to the frontend Angular via Rest-API, everything functions correctly.

If you open the browser console, you will see all three datasets retrieved through node.js via Rest-API: View in Browser Console

The data displayed in the browser console is structured as follows:

0:
device_id: 2885679
list: Array(1)
0:
dt: 1596608643
main:
humidity: 10 
pressure: 7.86 
temp: 120.052 
temp_max: 40.052 
temp_min: 20.052 
__proto__: Object 
__proto__: Object 
length: 1 
__proto__: Array(0)
message: "1" 
__v: 0 
_id: "5f2a63857ce17d64d49465a4"

The TypeScript code within the xy.component.ts component is structured like this:

export class ContactsComponent {...}

The issue arises when trying to log deviceData. It only shows the last value of the iteration instead of displaying all values needed to draw a graph based on 3 timestamps. The aim is to include all data points for plotting (refer to screenshots of the browser console).

Upon visualizing the graph in the browser, it only portrays one point, reflecting the single value logged by console.log(deviceData): Graph Image

What could be causing this issue and how can it be rectified?

Thank you, Eden

Answer №1

It appears that each object stored in the variable res contains a list with just one element.
(The length of res[i]['list'] is always 1).

You can try this approach:
(it gathers all values from each object and combines them into a single list)

let allvalues = [];
for (const item of res) {
  for (const measurement of item.list) {
    allvalues.push(measurement)
  }
}

console.log(allvalues);

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

The CLI feature is not compatible with NextJS Drizzle-Kit

I'm currently utilizing the drizzle auth template and attempting to customize it for Role Based Authentication. I've made adjustments in the db.ts file to incorporate roles. import { drizzle } from 'drizzle-orm/postgres-js'; import { pg ...

Is there a peak finding algorithm in 2D with a worst-case time complexity of O(n)?

Engaging in a course on algorithms from MIT was quite an enlightening experience. During the initial lecture, the professor introduced a fascinating problem to ponder upon: In a 2D array, a peak is defined as a value surrounded by its four neighbors, all ...

Directives causing disruption to one another

Two directives are at the same level in my code: function signUpForm(djangoAuth, Validate){ return{ restrict:'A', controller:["$rootScope","$scope",function($rootScope, $scope){ $scope.submitFunction = function(formData){ ...

TS7017: utilizing implicit any type for type inference

Below is the shortened code snippet causing an error: export default function formatSql(this: EscapeFunctions, sqlQuery: string, values: QueryParams) { if (isPlainObject(values)) { console.log(values[p]); // <-- Element implicitly has an & ...

In Go programming language, modifying the second item in a list will have a direct impact

If you're stuck on what to say, take a closer look at the code and its resulting output. Here's the code snippet: package main import ( "encoding/json" "fmt" ) type Human struct { N string `json:"n"` ...

Ways to utilize gridster by accessing the nativeElement of ElementRef

This issue is specific to the Firefox browser and does not occur in Chrome. My goal is to access the nativeElement for the gridster element. The version of angular-gridster2 being used is v17.0.0. In the HTML code: <gridster [options]="opt ...

Tips for evaluating attributes

I am currently working on a code that generates output in arrays. I need to figure out how to find matching arrays between $pesara and $ahli, where the condition is that CURRENT_ID_NO should be equal to ic_no. $sql = "SELECT CURRENT_ID_NO, NAME, MOBILE_NO ...

Testing NextJS App Router API routes with Jest: A comprehensive guide

Looking to test a basic API route: File ./src/app/api/name import { NextResponse } from 'next/server'; export async function GET() { const name = process.env.NAME; return NextResponse.json({ name, }); } Attempting to test ...

Design the parent element according to the child elements

I'm currently working on a timeline project and I am facing an issue with combining different border styles for specific event times. The main challenge is to have a solid border for most of the timeline events, except for a few instances that share a ...

javascript unusual comparison between strings

I am working on an ajax function that is responsible for sending emails and receiving responses from the server in a JSON format with type being either success or error. $("#submit_btn").click(function(event) { event.preventDefault(); var post_d ...

Ways to display a price near a whole number without using decimal points

Currently, I am working on an ecommerce project where the regular price of an item is $549. With a discount of 12.96% applied, the sale price comes down to $477.8496. However, I want the sale price to be displayed as either $477 or $478 for simplicity. Yo ...

Leveraging JavaScript to Invoke C++ Code in Internet Explorer

While BHO extensions allow JavaScript to call functions in a C++ BHO, I am exploring a different scenario. Imagine that instead of using a BHO, I have a C++ console application that creates an IE COM object like this: HRESULT hr = CoCreateInstance( ...

What is the best way to utilize distinct arrays for various days of the week?

Managing school bell schedules can be challenging, especially when there are different schedules for different days. In this case, we have two arrays containing sets of dates and times for a school bell schedule. The challenge is to pull the array for We ...

I'm having trouble getting my app to function properly on mobile devices. It works perfectly on my PC, including in mobile test mode, but for some reason, it's not

I am currently developing a Web App using Angular, Bootstrap, and derived from the Ace Admin Responsiveness template. Everything functions well on PC browsers such as Chrome and FireFox. When we resize the window or use Responsive Design Review, the side ...

{ 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 ...

The function in a Laravel controller cannot be called directly from JavaScript

I am attempting to utilize jQuery datatables to generate a table by fetching members from a database. Below is my HTML and JavaScript code: <table id="workerTable" class="table-bordered table-hover" width="80%" cellspacing="0"> <thead> ...

Encountering an issue with Angular where all parameters for NgZone cannot be resolved

Currently, I am in the process of learning Angular and experimenting with the Firebase Authentication services. However, every time I try to load the component that utilizes this service, I encounter an error. Error: Can't resolve all parameters for N ...

Extending a Svelte component with a P5JS class: A step-by-step guide

As a newcomer to SO, I haven't asked many questions before, so please bear with me if I don't entirely follow the guidelines. I'll do my best to explain the issue at hand. In my project, I am utilizing Sveltekit (create-svelte) and P5JS (p5 ...

What is the quickest way to implement an instant search feature for WordPress posts?

Today, I have a new challenge to tackle on my website. I am determined to implement an INSTANT SEARCH feature that will search through all of my posts. One great example to draw inspiration from is found here: Another impressive implementation can be se ...

Measuring JSON data with PHP through asynchronous requests

Looking to retrieve a specific count from a json dataset. Here is an example json format: { "tickets": [ { "url": "https://asd.zendesk.com/api/v2/tickets/1.json", "id": 1, "external_id": null, "via": { "channel": "sa ...