Chart is not printing while fetching the data from json file

Question

Actually i want to show the chart by using JSON data. I Need the Volume Sales data into an array.

JSON:

{
  "year1": {
    "volumeSales": "0.09",
    "valueSales": "1.23"
  },
  "year2": {
    "volumeSales": "0.11",
    "valueSales": "1.56"
  },
  "year3": {
    "volumeSales": "0.12",
    "valueSales": "1.69"
  },
  "year4": {
    "volumeSales": "0.12",
    "valueSales": "1.64"
  },
  "year5": {
    "volumeSales": "0.10",
    "valueSales": "1.41"
  },
  "total": {
    "volumeSales": "0.55",
    "valueSales": "7.53"
  }
}

I tried it by taking the volumesales into an array and assigned it to dataset in chart. But it is not working.

Ts File

import { Component, OnInit } from '@angular/core';
import {Chart} from 'chart.js';
import { DataService } from "src/app/data.service";

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
  BarChart = [];
  BarChart1 = []; 
  dataChart = [];
  volumeSales = [];
  i : number;
  constructor(private _emp: DataService) { 
    this._emp.getSales().subscribe(data => 
      {
        this.dataChart = data;
        this.dataChart = this.dataChart[0]
       // this.volumeSales.push(this.dataChart[`year${2}`]['volumeSales']);
       for(let i=1;i<=5;i++)
        {
          this.volumeSales.push(this.dataChart[`year${i}`]['volumeSales']);
        }
      });
  }
  ngOnInit() {
    this.BarChart = new Chart('barChart', {
      type: 'bar',
    data: {
     labels: ["Year1", "Year2", "Year3", "Year4", "Year5"],
     datasets: [{
         data: this.volumeSales,
     }]
   }
    });
} 
}

I need the volumeSales,valueSales data into an array. How can i do that?

Do you have a sample stackblitz to work with? – SiddAjmera Feb 12 '19 at 10:27 — SiddAjmera, Feb 12 '19 at 10:27
No Sample in stackblitz – Sai chaitanya Feb 12 '19 at 10:32 — Sai chaitanya, Feb 12 '19 at 10:32

Ganesh · Accepted Answer · 2019-02-13T09:46:24.353

@Sai_chaitanya, do some changes like below in your component.

we will use ngOnInit() not the constructor() to get the data from service api. check here for more differences between Constructor and ngOnInit

   constructor(private _emp: DataService) { }


   ngOnInit() {
      this.fetchChartData();
    }

   fetchChartData(){
      this._emp.getSales().subscribe(data =>  {
        this.dataChart = data;
        this.dataChart = this.dataChart[0]
         Object.keys(this.dataChart).map(data => {
           if (data.substring(0, 4) == 'year') {
             this.volumeSales.push(this.dataChart[data]['volumeSales']);
           }
         })
       this.calChart();     // call the Chart when data is available 
      });
    }

  callChart(){
     this.BarChart = new Chart('barChart', {
        type: 'bar',
        data: {
         labels: ["Year1", "Year2", "Year3", "Year4", "Year5"],
         datasets: [{
             data: this.volumeSales,
         }]
       }
     });
  }

how to find dynamically the volumesales array by using length property. Here i just used i<=5. But how to get by using length property. — Sai chaitanya, Feb 12 '19 at 10:54

score 0 · Answer 2 · answered Feb 12 '19 at 11:35

Give this a try:

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

import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [], label: 'Volume Sales' },
    { data: [], label: 'Value Sales' }
  ];
  constructor(private _emp: DataService) {
  }
  ngOnInit() {
    this._emp.getSales().subscribe(data => {
      this.barChartLabels = Object.keys(data);
      this.barChartLabels.forEach(label => {
        this.barChartData[0].data.push(data[label]['volumeSales']);
        this.barChartData[1].data.push(data[label]['valueSales']);
      });
    });;
  }
}

And in your Template:

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

Here's a Working Sample StackBlitz for your ref.

Chart is not printing while fetching the data from json file

2 Answers2