Guide on setting an array as the data for counts in charts.js

Question

Guide on setting an array as the data for counts in charts.js

I am working with a chart.js graph and I need to assign an array to the data property.

Below is my current code snippet:

datasets: [
    {
      data:[40,56,345,2354],
      backgroundColor: "#007BA7",
      hoverBackgroundColor: "#00CC99"
    }
]

However, I want to use an array that contains a list of products. This is my attempt, but it is not working:

datasets: [
    {
      data: this.lastSeenDeviceCount.forEach(element => {
        element.length
      }),
      backgroundColor: "#007BA7",
      hoverBackgroundColor: "#00CC99"
    }
]

This is the information in the data source:

this.lastSeenDeviceCount.push(activeRecords,offlineRecords, pendingRecords);
// array contains this object
{
    "DeviceID": "52",
    "FriendlyName": "Net RC",
    "UserName": "UserNet",
    "LastSeen": "07/23/2020 23:18:05",
}

javascript angular typescript chart.js

Answer 1

Answer №1

Did you give this a shot?

this.lastSeenDeviceCount.map(element => element.length)

Answer 2

Did you give this a shot?

this.lastSeenDeviceCount.map(element => element.length)

Answer 3

Answer №2

Here's a simple breakdown of what's going on:

let devices = []; // an array to hold devices
this.lastSeenDeviceCount.forEach(element => {
  devices.push(element.length)
})

datasets: [
  {
    data: devices,
    backgroundColor: "#007BA7",
    hoverBackgroundColor: "#00CC99"
  }
]

Essentially:

You initialized an empty array
You added values to the array within a loop
Finally, you assigned this array to the chartJs data property to display on the chart

Answer 4

Here's a simple breakdown of what's going on:

let devices = []; // an array to hold devices
this.lastSeenDeviceCount.forEach(element => {
  devices.push(element.length)
})

datasets: [
  {
    data: devices,
    backgroundColor: "#007BA7",
    hoverBackgroundColor: "#00CC99"
  }
]

Essentially:

You initialized an empty array
You added values to the array within a loop
Finally, you assigned this array to the chartJs data property to display on the chart

Guide on setting an array as the data for counts in charts.js

Answer №1

Answer №2

Similar questions

Error message "e.nodename undefined when set to setTimeout" was encountered

Controlling ever-changing routes using AngularJS

Finding the Closest Element with jQuery's .closest() Method

Design Pattern of AngularJS/Bootstrap Application

IE8 is encountering a null JSON response from the HTTP handler, unlike IE10 and Chrome which are not experiencing this

Angular 2 wrap-up: How to seamlessly transfer filter data from Filter Component to App Component

React modal not closing when clicking outside the modal in Bootstrap

focusing on a specialized format using the serialize() method

MAJOR UPDATE: webpack versions before 5 previously contained polyfills for node.js specifically for 'timers-browserify'

What methods can I use to generate unique paths within a URL for a website, and how can I assign a distinct status to each path?

The error was thrown at line 883 in the cjs/loader.js file of the

Align the body of the table with the header after populating the table with values

Using JavaScript to access a button from a dropdown list in ASP.NET MVC

Track user engagement across multiple platforms

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions

Refining strings to enum keys in TypeScript

How to retrieve the correct instance of "this" from a callback function within an array of functions nested inside an object

Transforming varied JavaScript objects into a serial form

How can I furnish TSC with TypeScript definitions for URI imports in a comprehensive manner?

The JSON data response is not being properly displayed on the div element