Chart.js (with dynamic data) works fine using ionic serve, but not when running on device


#1

My chart displays dynamic data that is being fetched from local storage when I load the app. At the moment, I have the code create the chart after the promise has done its thing. This is working as intended when I serve to the browser, but doesn’t seem to be when I run it on my device. On the device, the graph axes load but none of the data-points load.

Here is the code that loads from storage:

this.storage.get("savedVideosList").then(data => {
      if (data != null) {
        this.dataArray = [0, 0, 0, 0, 0, 0, 0];
        // Set weekly data for bar chart:
        for (let video of data) {
          for (let i = 0; i < 7; i++) {
            if (
              video.saveDate &&
              video.saveDate.toLocaleString("en-GB", {
                year: "2-digit",
                month: "2-digit",
                day: "2-digit"
              }) ==
              new Date(Date.now() - i * 864e5).toLocaleString("en-GB", {
                year: "2-digit",
                month: "2-digit",
                day: "2-digit"
              })
            ) {
              this.dataArray[6 - i]++;
            }
          }
        }
        this.createBarChart();
      }
    });
  }

In my bar chart, the dataArray array forms the heights of the bars.

This is what the createBarChart() method looks like:

  createBarChart() {
    if (this.currentTrackTab === "Statistics") { // Just checks that I am in the correct bit before loading
      this.barChart = new Chart(this.barCanvas.nativeElement, {
        type: "bar",
        data: {
         
          labels: [ // Updating days of the week, most recent being today's
            this.dateMin6,
            this.dateMin5,
            this.dateMin4,
            this.dateMin3,
            this.dateMin2,
            this.dateMin1,
            this.date
          ],
          datasets: [
            {
              label: "Data 1",
              data: this.dataArray, // dynamic data, relies on a promise being returned
              backgroundColor: "rgba(0,156,166,1)"
            },
            {
              label: "Data 2",
              data: this.anotherArray, // dynamic data, relies on a promise being returned
              backgroundColor: "rgba(45,204,211,1)"
            },
            {
              label: "Data 3",
              data: this.yetAnotherArray, // dynamic data, relies on a promise being returned
              backgroundColor: "rgba(228,93,191,1)"
            },
            {
              label: "Data 4",
              data: this.lastOneIPromise, // dynamic data, relies on a promise being returned
              backgroundColor: "rgba(175,22,133,1)"
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                  callback: function(value) {
                    if (value % 1 === 0) {
                      return value;
                    }
                  }
                },
                stacked: true
              }
            ],
            xAxes: [
              {
                stacked: true
              }
            ]
          }
        }
      });
    }
  }

Can anyone tell me why the chart would work on the browser but not on my phone? What is the difference between the two? Is anyone able to spot where I’ve gone wrong?

Many thanks!


#2

Hello,
maybe you can check, for example with a <p>{{check1}}</p>, <p>{{check2}}</p> etc. or anything else that loading of data and so on is working as expected and avialable at this point of time.

Is your app enterring if (this.currentTrackTab === “Statistics”)?

What is for example this.currentTrackTab?

Best regards, anna-liebt