Chart.js dynamic data loads after some time


#1

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 ! :ok_hand:


#2

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


#3

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


#4

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
      }
    });
  }

#5

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

Probably something is wrong with Lifecycle…?


#6

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**


#7

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


#8
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?


#9

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);
}};

#10

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


#11

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


#12

It worked!
Thanks for taking your time!
Have a nice weekend! :smiley:


#13

I ran into a same problem when I call http request. the ‘doam’ variable returns undefined. Capture

Capture
Anyone can help me? I appriciate. Thanks a lot. Have a nice day,


#14

show me the structure of data


#15

Capture
I want to get data from this json data to draw a dynamic chart