CODEWITHSUNDEEP
javascriptangulartypescript
Bolajio
Bolajio

Reputation: 127

How can i map out a response of my observable

I am trying to read data from a google spreadsheet to chart.js but i am having problems figuring out how to map out the observable's response in angular.

I am expecting it to read out a linechart but i am not sure i have the format right. Can i get some pointers on how i can fix it so my chart shows. It is giving me an error: property area does not exist on type IArea[].

For my service i have: 

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

import { IArea } from './area';

@Injectable({
  providedIn: 'root'
})
export class AreaService {

  private areaUrl = "https://docs.google.com/spreadsheets/d/1_FJE8fq2bZ-WgDIY2rEPG3Ml__ypDJBD71pGVeElvGY/edit?usp=sharing"
  constructor(private http: HttpClient) { }


getArea(): Observable<IArea[]> {
  return this.http.get<IArea[]>(this.areaUrl).pipe(map(response => response.area));
}
}

Component:

import { ChartsModule} from 'ng2-charts'
import * as Chart from 'chart.js';
import { AreaService } from './area.service';
import { IArea } from './area';

@Component({
  selector: 'app-widget-area',
  templateUrl: './area.component.html',
  styleUrls: ['./area.component.scss']
})
export class AreaComponent implements OnInit {

  area:IArea[];  
  httpService: any;
  areaService: any;
  LineChart: Chart;
  errorMessage:string;


  constructor(private_areaService:AreaService) { }

  ngOnInit() {
     this.LineChart = new Chart('lineChart', {
        type: 'line',
        data: { 
          labels: ["2009", "2010", "2011", "2012", "2013","2014","2015","2016","2017","2018","2019"],
          datasets: [{
            label: " ",
            data: this.areaService.getArea().subscribe(
              area => this.area=area,
              error => this.errorMessage =<any>error
            ),
            fill:false,
            lineTension:0.2,
            borderColor:"black",
            borderWidth: 1
          }]
        },

        options: {
          title:{
            text:"Line Chart"
          }
        }
  });

}
}

Assigned values:

Date: Date;
Alloc: number;
}

Google spreadsheet:

2009    23
2010    20
2011    30
2012    40
2013    24
2014    23
2015    23
2016    56
2017    32
2018    34
2019    34

Upvotes: 0

Views: 70

Answers (2)

Maihan Nijat
Maihan Nijat

Reputation: 9334

Create a function to call when you get data for creating a chart:

createChart() {
  this.LineChart = new Chart('lineChart', {
      type: 'line', data: {
        labels: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
        datasets: [{
          label: ' ',
          data: this.area,
          fill: false,
          lineTension: 0.2,
          borderColor: 'black',
          borderWidth: 1
        }
        ]
      }, options: {
        title: {
          text: 'Line Chart'
        }
      }
    }
  );
}

And call for data:

ngOnInit() {
  this.areaService.getArea().subscribe(area => {
      this.area = area;
      this.createChart();
    }, error => {
      this.errorMessage = error;
    }
  );
}

And your service would be:

getArea() {
  return this.http.get<IArea[]>(this.areaUrl);
}

You can also get labels dynamically from the data instead of putting it statically.

Upvotes: 3

Jacob
Jacob

Reputation: 78850

You could await the completion of the HTTP request before creating the chart so you have some data to pass to the chart:

async ngOnInit() {
  const area = await this.areaService.getArea().toPromise();
  this.LineChart = new Chart('lineChart', {
    type: 'line',
    data: { 
      labels: ["2009", "2010", "2011", "2012", "2013","2014","2015","2016","2017","2018","2019"],
      datasets: [{
        label: " ",
        data: area,
        fill:false,
        lineTension:0.2,
        borderColor:"black",
        borderWidth: 1
      }]
    },
    options: {
      title:{
        text:"Line Chart"
      }
    }
  });
}

Upvotes: 0

Related Questions