Chart.js dynamic data loads after some time

Dar3lis · September 15, 2017, 8:53am

Hey guys,

I have an issue with chart.js in my ionic app project.
I am passing two variables to the doughnut chart:

   type: 'doughnut',
            data: {
                datasets: [{
                    label: 'Values',
                    data: [  this.percentageDay,100 - this.percentageDay],
                    borderColor: [
                        '#75cd74',
                        '#cecece'

And the problem is that once App is loaded the chart can’t see the data, but after 20sec or navigating to other screen and going back the data displays.

where could be the problem?
How to display doughnut chart only when it got the value in variable…

Any advice would be highly appreciated! Have a nice day !

FnnHuman · September 15, 2017, 9:04am

so you want to hide the chart when there are no values?

Dar3lis · September 15, 2017, 9:18am

Not really. I want it to display straight when the app is loaded, not after some time

FnnHuman · September 15, 2017, 9:21am

put a chart constructor inside of ionViewDidLoad()

ionViewDidLoad() {
    this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
      type: 'doughnut',
      data: {
      //something
      },
      options: {
        responsive: true,
      },
      config: {
        data: this.dataService
      }
    });
  }

Dar3lis · September 15, 2017, 9:39am

Once chart constructor is inside ionViewDidLoad();
then I can see in Console.log that variables are undefined;

Probably something is wrong with Lifecycle…?

Dar3lis · September 15, 2017, 10:03am

I’ll include some code. So it will be easier to understand:

export class HomePage {

  percentageDay: any;
  bestday = [];
  
geBestDay(){
           this.revenueService.getBestDay().subscribe(data => {
            this.bestday = data;
            this.percentageDay = (this.conversions.subtotal / this.bestday)*100;
}

ngOnInit() {
         this.getBestDay();
}

//calling the doughnut chart
ionViewDidLoad() {
        this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
 
            type: 'doughnut',
            data: {
                datasets: [{
                    label: 'Values',
                    data: [  this.percentageDay,100 - this.percentageDay],
                    borderColor: [
                        '#75cd74',
                        '#cecece'
                    ],
                    backgroundColor: [
                        '#75cd74',
                        '#cecece'
                    ],
                    hoverBackgroundColor: [
                        '#49a848',
                        '#75cd74'
                    ]
                }],
            },
            options:{
                   cutoutPercentage: 93,
                   events: [],
                }
        });
    }
}

after app loads the values of  variables are **undefined**

FnnHuman · September 15, 2017, 11:23am

and which variables exactly are undefined?
i am sure i would be able to help you but i dont understand what you are trying to do
is the data available at the point when chart is creating?
at the begininng ofionViewDidLoad() write inside console.log(data_you_are_using)
and see if its there when chart is drawn

Dar3lis · September 15, 2017, 1:12pm

this.percentageDay = undefined
this.bestday = undefined.

and then graph loads;

and I have noticed that the variables get’s value when they are called inside function

getBestDay(){
 this.revenueService.getBestDay().subscribe(data => {
            this.bestday = data;
            this.percentageDay = (this.conversions.subtotal / this.bestday)*100;
              console.log( 'value ' + this.best + ' value 2 ' + this.percentageDay);
}};

it prints the right values. So the problem is I guess that the values can’t get outside the function?

FnnHuman · September 15, 2017, 1:18pm

the problem is that you create the chart before you get the values, because you set those values after asynchronous call, simplest solution would be just call the chart-creating-function after you set the values, or just refresh the chart after you get values, so:

getBestDay(){
 this.revenueService.getBestDay().subscribe(data => {
            this.bestday = data;
            this.percentageDay = (this.conversions.subtotal / this.bestday)*100;
              console.log( 'value ' + this.best + ' value 2 ' + this.percentageDay);
            this.doughnutChart.update(0);
}};

Dar3lis · September 15, 2017, 1:39pm

that’s make sense.
But this.doughnutChart.update(0); did not make a trick in this case …

FnnHuman · September 15, 2017, 1:41pm

so maybe just create the chart after you get data?

getBestDay(){
 this.revenueService.getBestDay().subscribe(data => {
            this.bestday = data;
            this.percentageDay = (this.conversions.subtotal / this.bestday)*100;
              console.log( 'value ' + this.best + ' value 2 ' + this.percentageDay);
            this.someChartCreateFunction();
}};

and inside of this.someChartCreateFunction(); just put your chart constructor