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

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]
  }
]

CodePudding user response：

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

CodePudding user response：

Hey finaly the push helped me 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' }
  ];
  

}