Creating Dynamic Graphs using Angular and Chart.js with Array Values

Question

Creating Dynamic Graphs using Angular and Chart.js with Array Values

I have implemented ChartJS-2 to visualize a graph displaying an array of user activities, but it appears distorted:

import { Component, OnInit, Input } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
import { Label } from 'ng2-charts';
import { IblinkPoint } from 'src/app/iblink-point';
import { OpenWebService } from 'src/app/blinking/open-web.service';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss']
})
export class GraphComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartType: ChartType = 'bar';
  public chartColors: Array<any> = [
    {
      backgroundColor: 'rgb(77, 0, 77, 1)',
      borderColor: 'rgba(77, 0, 77, 1)',
      borderWidth: 2,
    }
  ];

  public barChartData: ChartDataSets[];
  public barChartLabels: Label[];

  @Input() blinks: IblinkPoint[];
  constructor(private openWebService: OpenWebService) { }

  ngOnInit() {
    let arrBlinks = this.openWebService.getBlinkData();
    let startDateArry: any[] = [];
    let endDateArry: any[] = [];
    let blinkArry: any[] = [];
    arrBlinks.forEach(element => {
    blinkArry.push(element.blinkCounter).toString;
    startDateArry.push(element.startDate.getMinutes().toString());
   // console.log(startDateArry);
    // endDateArry.push(element.endDate.getHours());
    });
    this.barChartLabels = [startDateArry];
    this.barChartData = [{ data: blinkArry, label: 'blinks'}];
  //  console.log(this.barChartData);
  //  console.log(this.barChartLabels);
  }

}

<div style="display: block">
  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [chartType]="barChartType"
    [colors]="chartColors">
  </canvas>
</div>

Instead of the expected graph, all barChartLabels are stacked on top of each other and only one barChartData is displayed. I attempted to debug my code without success.

angular typescript charts chart.js2 ng2-charts

Answer 1

Answer №1

The root of the problem lies in this particular line

this.barChartLabels = [startDateArry];

At this point, you are essentially inserting the array startDateArry as the first item within the array this.barChartLabels; instead, you should simply do:

this.barChartLabels = startDateArry;

relevant HTML:

<div style="display: block;">
  <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

relevant TS:

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];
  public barChartData: ChartDataSets[];

  constructor() {
  }

  ngOnInit() {
    let startDateArry: any[] = [];
    let blinkArry: any[] = [];

    for (var i = 0; i < 7; i++) {
      blinkArry.push(Math.round(Math.random() * 100));
      startDateArry.push(Math.round(Math.random() * 100));
    }

    this.barChartData = [{ data: blinkArry, label: 'blinks' }];

    this.barChartLabels = [startDateArry];
    console.log('this is where the issue lies!', this.barChartLabels);

    /* SOLUTION */
    this.barChartLabels = startDateArry;
    console.log('this is how to fix it!', this.barChartLabels);
  }
}

You can observe the distinction between these two statements in the linked functioning stackblitz as well.

Answer 2

The root of the problem lies in this particular line

this.barChartLabels = [startDateArry];

At this point, you are essentially inserting the array startDateArry as the first item within the array this.barChartLabels; instead, you should simply do:

this.barChartLabels = startDateArry;

relevant HTML:

<div style="display: block;">
  <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

relevant TS:

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public barChartOptions: ChartOptions = {
    responsive: true,
    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };
  public barChartLabels: Label[];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartPlugins = [];
  public barChartData: ChartDataSets[];

  constructor() {
  }

  ngOnInit() {
    let startDateArry: any[] = [];
    let blinkArry: any[] = [];

    for (var i = 0; i < 7; i++) {
      blinkArry.push(Math.round(Math.random() * 100));
      startDateArry.push(Math.round(Math.random() * 100));
    }

    this.barChartData = [{ data: blinkArry, label: 'blinks' }];

    this.barChartLabels = [startDateArry];
    console.log('this is where the issue lies!', this.barChartLabels);

    /* SOLUTION */
    this.barChartLabels = startDateArry;
    console.log('this is how to fix it!', this.barChartLabels);
  }
}

You can observe the distinction between these two statements in the linked functioning stackblitz as well.

Creating Dynamic Graphs using Angular and Chart.js with Array Values

Answer №1

Similar questions

Is it necessary to separate Lodash orderby functions to ensure they function correctly?

Angular 5 failing to navigate to new page upon successful login

Identifying a shift in data model within a component

What is the reason for the inclusion of information in the error log by the `ng

Tips for obtaining the "inner type" of a particular "instance" in TypeScript's generics

Error 404 encountered when updating packages in Angular2 tutorial: platform-browser-dynamic.umd.js

Keyhole Markup Language (KML) - a specialized layer for mapping

Writing TypeScript, Vue, and playing around with experimental decorators

Setting up APIGateway for CORS with the CDK: A Step-by-Step Guide

How to troubleshoot the issue of "Error: (SystemJS) module is not defined" in Angular 2?

Using Angular's filter pipe to search within a nested array

Exploring the world of typed props in Vue.js 3 using TypeScript

Encountering difficulties in generating a personalized Angular Element

BehaviorSubject Observable continuously notifies unsubscribed Subscription

Introduce a specialized hierarchical data structure known as a nested Record type, which progressively ref

Guide on Retrieving an Array from an Observable

Encounter a net::ERR_EMPTY_RESPONSE error while trying to deploy an Angular application on a production server

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

Incorporate a visual element into an Angular Library Component Template using an image asset

Angular - Detecting Scroll Events on Page Scrolling Only