How to fetch data from Json file on charts(bar-chart/pie chart etc) in angular?

Question

Now what I'm doing is getting data straight from the ts file as shown below using ng-2 chart and chart.js: `

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

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})

export class BarChartComponent {

  barChartOptions: ChartOptions = {
    responsive: true,
  };
  barChartLabels: Label[] = ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'];
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];

  barChartData: ChartDataSets[] = [
    { data: [45, 37, 60, 70, 46, 33], label: 'Best Fruits' }
  ];

}

`

HTML file: `

<div class="chart-wrapper">
    <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

`

the source is Angular Charts using ng-2charts and charts.js

So , what I want now to display the same charts but with json file means from json dummy data please help me to achieve this

Json file:

    [
 {
      "name": "Java",
      "data": [12, 10, 19]
    }, 
 {
      "name": "Python",
      "data": [23, 18, 20]
  }
]

Ahmed AlSaeed · Accepted Answer · 2021-09-30 07:03:56Z

1

You can transform your data :

let data = [ { "name": "Java", "data": [12, 10, 19] }, { "name": "Python", "data": [23, 18, 20] } ]
let colors = ["red","blue","green"]; // must match the array size, or include the color inside data
let chartData = data.map((x,i)=> {
 return {
  label: x.name,
  backgroundColor: colors[i],
  data: x.data
 }
})

console.log(chartData)

For Reading External JSON File :

import {readFileSync} from 'fs';

// create a function in service or the component
readJsonFile(path:string){
      return JSON.parse(readFileSync(path, 'utf8'));
}

Then You can use the function to get the json and pass it to chartJS

edited Sep 30, 2021 at 7:03

answered Sep 30, 2021 at 6:15

Ahmed AlSaeed

1384 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben Martin Over a year ago

Hi Ahmed , thanks for the answer ,I'm new to Angular and here is the json data(a file): [ { "name": "Java", "data": [12, 10, 19] }, { "name": "Python", "data": [23, 18, 20] } ] could you please elaborate a little more that how can I achieve this ?

Ahmed AlSaeed Over a year ago

@Tushar Hi, so you mean you got the json in the ts and you want to assign it to the chart ?

Ben Martin Over a year ago

Hi @Ahmed ,yes!!! json file is in assests folder here is the function to getData(){ this.http.get<Bar[]>("assets/bar.json").subscribe(data => { this.barData=data; }) } but the data is not visible in chart but is visible in console

Ahmed AlSaeed Over a year ago

@Tasher can you provide stackblitz ?

possum · Accepted Answer · 2021-09-30 20:30:24Z

I found that the push() method appends the given elements in the last of the array and returns the length of the new array. Here the final code to get the data from the json file and shows it to the charts Also I have used example of this Link

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





@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  barData: number[]=[];
  title = 'chart';
  constructor(private http: HttpClient){}

  ngOnInit(){
    this.getData();
  }

   getData(){
      this.http.get<number[]>("assets/data.json").subscribe(data => {
      this.barData.push(...data);
     })
   }


  barChartOptions: ChartOptions = {
    responsive: true,
  };
  barChartLabels: Label[] = ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'];
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];

  barChartData: ChartDataSets[] = [
    { data:[]=this.barData,
      label: 'Best Fruits' }
  ];
  

}

Collectives™ on Stack Overflow

How to fetch data from Json file on charts(bar-chart/pie chart etc) in angular?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related