CODEWITHSUNDEEP
javascriptangulartypescriptgoogle-visualization
iamtravisw
iamtravisw

Reputation: 341

After leaving URL and coming back data is missing from Chart. Upon refresh, it shows

My application is showing the data in the chart without issue upon the first page load... however when I leave the page and click on a navbar route and come back, the data is no longer showing. I can see the request coming through successfully in the console. If I refresh the page (CMD+R) the data and chart shows again.

import { Component, OnInit, wtfCreateScope } from '@angular/core';
import { UserService } from 'src/app/shared/user.service';

@Component({
  selector: 'app-ticket-by-status',
  templateUrl: './ticket-by-status.component.html',
  styleUrls: ['./ticket-by-status.component.css']
})
export class TicketByStatusComponent implements OnInit {

  constructor(private service: UserService) { }

  title = 'Tickets by Status';
  type = 'PieChart';
  data = [];
  columnNames = ['Ticket', 'Percentage'];
  options = {};
  width = 1600;
  height = 600;

  ngOnInit() {

    this.service.getNewTickets().subscribe(
      res => {
        this.data.push(['New', +res])
      },
      err => {
        console.log(err);
      }
    ),
    this.service.getOpenTickets().subscribe(
      res => {
        this.data.push(['Open', +res])
      },
      err => {
        console.log(err);
      }
    ),
    this.service.getPendingTickets().subscribe(
      res => {
       this.data.push(['Pending', +res])
      },
      err => {
        console.log(err);
      }
    ),
    this.service.getSolvedTickets().subscribe(
      res => {
        this.data.push(['Solved', +res])
      },
      err => {
        console.log(err);
      }
    )
  }
}

Here is an example of getNewTickets

  getNewTickets(){
    return this.http.get(this.BaseUri+'/tickets/status/count/New', this.httpOptions)
  }

I will likely refactor these to accept a parameter and pass in 'New', 'Solved', etc. later. For now, the focus is this chart.

Here's the HTML:

<google-chart #chart  
   [title]="title"  
   [type]="type"  
   [data]="data"  
   [columnNames]="columnNames"  
   [options]="options"  
   [width]="width"  
   [height]="height">  
</google-chart>

Upvotes: 0

Views: 38

Answers (1)

sivy
sivy

Reputation: 451

Not the best solution, but you can try to add *ngIf="data.length > 0" to your google-chart call.

Upvotes: 2

Related Questions