Creating an Array in Angular 4

My goal is to populate an array with dynamic data.

export class Test implements OnInit {
 private lineChart: Array<any>;
 }

As I work on the code, I am dynamically generating some data and pushing it into the empty lineChart array. While this process works, the data is not formatted as required. Any suggestions on how to achieve the desired result below?

The expected output should look like this:

private lineChart: Array<any> = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'toto' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'tata' },
    { data: [81, 56, 55, 48, 40, 19, 34], label: 'titi' },
  ]

I am utilizing the JavaScript library mentioned here: https://alligator.io/angular/chartjs-ng2-charts/

import { Component } from '@angular/core';

@Component({ ... })
export class AppComponent {
  chartOptions = {
    responsive: true
  };

  chartData = [
    { data: [330, 600, 260, 700], label: 'Account A' },
    { data: [120, 455, 100, 340], label: 'Account B' },
    { data: [45, 67, 800, 500], label: 'Account C' }
  ];

  chartLabels = ['January', 'February', 'Mars', 'April'];

  onChartClick(event) {
    console.log(event);
  }
}

In the end, I aim to obtain the array stored in 'chartData' by dynamically generated data.

Answer №1

It needs to be like this

const lineChartData: Array<{
        values: number[],
        title: string,
    }> = [
        { values: [45, 32, 76, 91, 48, 75, 63], title: 'apple' },
        { values: [14, 60, 35, 74, 88, 22, 47], title: 'banana' },
        { values: [92, 27, 58, 39, 86, 43, 29], title: 'orange' },
    ];

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

Refresh your webpage automatically using Typescript and Angular

Currently facing an issue and seeking assistance. My query is regarding reloading a website after 5 minutes in a Typescript/Angular application. Can anyone help with this? ...

I'm having trouble with my code not working for get, set, and post requests. What could be causing this issue and how can I

Here are the TypeScript codes I've written to retrieve product details and delete them. import { Component, OnInit } from '@angular/core'; import {FormGroup,FormBuilder, FormControl, Validators} from "@angular/forms" // other impor ...

React Native: Javascript library with typings not recognized as a module

I am currently facing a challenge of integrating the Microsoft Playfab Javascript Library into my React Native app following the recommendations provided here. The library comes with typings and is structured as illustrated here. In my file playfabWrapper. ...

Using the typeof operator to test a Typescript array being passed as an object

I have a puzzling query about this particular code snippet. It goes like this: export function parseSomething(someList: string[]): string[] { someList.forEach((someField: string) => { console.log(typeof someField) }) Despite passing a s ...

What is the best way to eliminate the Mat-form-field-wrapper element from a Mat-form-field component

I have implemented Angular mat-form-field and styled it to appear like a mat-chip. Now, I am looking to remove the outer box (mat-form-field-wrapper). https://i.sstatic.net/QkfC1.png <div class="flex"> <div class="etc"> ...

Utilizing Protractor, TypeScript, and Jasmine for Automated Testing

Just landed a new job at a company that uses protractor, jasmine, and Type Script for automation testing. While I have experience with selenium and Java, I'm unfamiliar with protractor. Can someone guide me on how to start protractor testing? Is there ...

Develop a component library for Angular 2 without incorporating inline styles

I recently came across an interesting article about developing an Angular 2 component library that utilizes inline styles. Is there a method to create a library in Angular 2 without relying on inline styles? I also stumbled upon another resource, but it d ...

Communication between Angular services and the issue of 'circular dependency detected' alerts

I am encountering a circular dependency issue with my AuthenticationService and UserService. The UserService is included within the AuthenticationService, but when I try to use AuthenticationService in UserService as shown below: constructor(private authS ...

Validation of form fields in Angular 2 using custom data attributes

Currently, I am working on implementing form validation in Angular 2 for an add product form. The form allows users to add a product to a specific store's inventory. One of the requirements is to validate that the price of the product is higher than t ...

Is it possible for me to reinstall npm in an Angular project as a solution?

I recently started working on an Angular 9 project and installed various libraries. However, I encountered some issues with ngx-gallery and Renderer2 which led me to make edits in files like core.d.ts within the node_module/angular/core directory. As a new ...

Angular 5/6: Issue detected - mat-form-field must have a MatFormFieldControl inside

I'm experiencing an issue while trying to open an OpenDialog window from a table list. The error message I encountered is as follows: ERROR Error: mat-form-field must contain a MatFormFieldControl. Below is the HTML code for the openDialog: <h2 m ...

Relationship between Angular Components - Understanding the Connection

I am facing a challenge with two components, one located in the shared folder and the other in the components folder. The component in the components folder contains a button that, when clicked, triggers a function from my globalFilterService in the serv ...

How to Import External Libraries into Angular 2

I am attempting to import a 3rd party library called synaptic. This library is written in JavaScript and I have a .d.ts file for it. Here are the steps I have taken: npm install synaptic --save npm install @types/synaptic --save I have also added the fol ...

Strategies for resolving a mix of different data types within a single parameter

Here, I am setting up the options params to accept a value that can either be a single string or another object like options?: string[] | IServiceDetail[] | IServiceAccordion[]; However, when attempting to map these objects, an error is encountered: Prope ...

What is causing the subscriber to receive the error message "Cannot access 'variable' before initialization" while referencing itself?

Within my Angular 8 project, I have a component that is dependent on a service for data loading. It waits for a notification from the service signaling that it has finished loading in the following manner: constructor(public contentService: ContractServic ...

Error: The property `orderRow` in `_this.Order` is not defined

Currently, I am having some issues while working with classes: The error message displayed is: TypeError: _this.Order.orderRow is undefined The error occurs when attempting to add a new row to the orderRow array. Here is the code snippet: Order Class ...

What is the best way to reset the testing subject between test cases using Jest and TypeScript?

I'm currently utilizing typescript alongside jest for unit testing. My goal is to create a simple unit test, but it consistently fails no matter what I try. Below is the snippet of code in question: // initialize.ts let initialized = false; let secre ...

The ngModel in Angular 6 did not update the value within the app component

Currently, I am honing my skills in Angular and TypeScript but have encountered a minor issue. Below is the code snippet from my component.html <div> <input [(ngModel)]="mynumber"> N is now {{N}} // some content I want to do with ...

What is the best way to include the parameter set in the interceptor when making a post request?

-> Initially, I attempt to handle this scenario in the axios request interceptor; if the parameter is uber, then utilize a token. If the parameter is not uber, then do not use a token. -> Afterward, how can I specify uber as a parameter in the custo ...

Pause before sending each request

How can we optimize the Async Validator so that it only sends a request to JSON once, instead of every time a letter is typed in the Email form? isEmailExist(): AsyncValidatorFn { return (control: AbstractControl): Observable<any> => { ...