Why does my chart only show data when I F12 debug ?

[Matt]

It shows an empty chart but when I press F12 then I see the data in the chart. Is the data being bound after the UI is created of something ?  It is strange. Any idea would could be causing this ? 

[Svet]

Hi Matt,

Thank you for the provided details.

The described behavior suggests that the Chart isn't using the latest data that is provided to it. When pressing the F12 button what probably happens is that a new change detection cycle is triggered and the Chart is re-rendered to use the latest data. In order to avoid that what I can suggest is to update the data array passed to the Chart by reference in order to trigger a change detection automatically.

In case the issue persists, could I ask you to provide some code snippets demonstrating the implementation on your side so that I can get a better understanding of the use-case scenario. Thank you.

Regards,
Svet
Progress Telerik

[Matt]

Ok.. I added a 

*ngIf="dailyFormCountPast7Days.length > 0"

 

to the kendo chart to say do not render until that array has values and it works..  My code overall is done very badly so Ill take any tips..

<kendo-chart *ngIf="dailyFormCountPast7Days.length > 0" class="chart-daily-orders"
  [categoryAxis]="{ categories: past7Dates }" (seriesClick)="onClickSeries($event)">
  <kendo-chart-value-axis>
    <kendo-chart-value-axis-item majorUnit="1">
    </kendo-chart-value-axis-item>
  </kendo-chart-value-axis>
  <kendo-chart-title text="Created orders past 7 days"></kendo-chart-title>
  <kendo-chart-series>
    <kendo-chart-series-item [data]="dailyFormCountPast7Days"> </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

 

import { DatePipe } from '@angular/common';
import { Component, EventEmitter, Output } from '@angular/core';

import { OrderService } from '@shared/services/order.service';
import { Order } from '@shared/models/order.model';
import { SeriesClickEvent } from '@progress/kendo-angular-charts';

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

export class ChartTestComponent {
  @Output() childClickBar = new EventEmitter<any>();
  orders: Order[];
  past7Dates: string[] = [];
  dailyFormCountPast7Days: number[] = [];

  constructor(private orderService: OrderService, public datepipe: DatePipe) {
    console.log('----------ChartTestComponent');
  }

  ngOnInit(): void {
    console.log('ChartTestComponent / ngOnInit');

    this.orderService.searchAdmin("", "1/1/2000", "1/1/2100").then(response => {
      this.orders = response
      this.createChartData(this.orders);
    });
  }

  private createChartData(orders: Order[]) {
    let formattedShortDates: string[] = [];
    let orderDates = orders.map(a => a.createdTime);

    //create array of all order create dates in proper date format
    for (var a = 0; a < orderDates.length; a++) {
      let orderDate1 = new Date(orderDates[a]);
      var formattedShortDate = orderDate1.toISOString().slice(0, 10); // "2014-05-12"
      formattedShortDates.push(formattedShortDate);
    }

    //Create two arrays of past 7 days 
    //1. The number of forms created per day
    //2. The date for the form count
    for (var i = 0; i < 7; i++) {
      var currentDay = new Date();
      currentDay = new Date(currentDay.setDate(currentDay.getDate() - i)); //get raw date
      var formattedDate = this.datepipe.transform(currentDay, 'yyyy-MM-dd'); //format date
      this.past7Dates.push(formattedDate); //add to array

      //if date has atleast one order then add order count for that day
      if (this.isInArray(formattedShortDates, formattedDate)) {
        var numberOfFormsOnDay = formattedShortDates.filter(x => x == formattedDate).length; //get number of forms created on that day
        this.dailyFormCountPast7Days.push(numberOfFormsOnDay);
      }
      else {
        this.dailyFormCountPast7Days.push(0);
      }
    }

    console.log(this.dailyFormCountPast7Days);
    console.log(this.past7Dates);
  }

  // public onClickSeries(e: SeriesClickEvent): void {
  public onClickSeries(event: any): void {
    console.log('ChartTestComponent / onClickSeries');

    //  const dataPoint = e.dataItem as LicenseUseDataPoint;
    //console.log("seriesClick: ", event.dataItem.id);
    this.childClickBar.emit(event);
  }

  private isInArray(array, value) {
    return (array.find(item => { return item == value }) || []).length > 0;
  }
}

[Svet]

Hi Matt,

Thank you for the provided sample code.

Indeed the *ngIf condition would do the trick in this case.

What else could be done is to update the reference of the dailyFormCountPast7Days array in the following loop:

    for (var i = 0; i < 7; i++) {
      var currentDay = new Date();
      currentDay = new Date(currentDay.setDate(currentDay.getDate() - i)); //get raw date
      var formattedDate = this.datepipe.transform(currentDay, 'yyyy-MM-dd'); //format date
      this.past7Dates.push(formattedDate); //add to array

      //if date has atleast one order then add order count for that day
      if (this.isInArray(formattedShortDates, formattedDate)) {
        var numberOfFormsOnDay = formattedShortDates.filter(x => x == formattedDate).length; //get number of forms created on that day
        this.dailyFormCountPast7Days.push(numberOfFormsOnDay);
      }
      else {
        this.dailyFormCountPast7Days.push(0);
      }
    }

The push() method changes the value of the array but not its reference. This is why the Angular change detection isn't triggered and the Chart isn't re-rendered. Two common ways to copy an array to another instance of an array (in order to change its reference) is to use the slice() method or Object.assign().

I hope these suggestions point you in the right direction.