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!