The basic chart example given at https://www.chartjs.org/docs/latest/getting-started/ works from my local disk but not when served from an Arduino ESP32 Nano. In the first case I get a nice chart, in the second I get a blank page and an error message in DevTools (quoted below).
Before you ask, why not just use the internet? Because the device I'm developing will be used on remote islands and even on boats where internet access is impossible or at least prohibitively expensive. There can be no outside dependencies.
I cut-and-pasted the example from the chartjs.org site into one file and the code from https://cdn.jsdelivr.net/npm/chart.js into another. Changing just the <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> line to point to the local file it works fine on my Windows 11 desktop.
The problem arises when I serve from the Nano using a modified version of the WiFiAccessPoint sketch which appears in the IDE's examples.
For the Nano I stored the contents of the two files in variables in my Arduino sketch (the ESP32 has enough memory). Serving from there to my Android phone I got a blank screen. Serving to an Android tablet set up for USB debugging I got a blank screen. Was it Android? No, because I get the same thing on a Windows 11 laptop. In each case I was using Chrome. None of this hardware is very old or bleeding-edge new. A Google Pixel 6, and inexpensive Galaxy Tab 8, and a 6-core Dell laptop with Windows 11.
With DevTools I can see this console message:
chart.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'axis') at BarController.parse (chart.js:19:52436) at BarController._insertElements (chart.js:19:58865) at BarController._resyncElements (chart.js:19:58588) at BarController.buildOrUpdateElements (chart.js:19:52079) at An.update (chart.js:19:94515) at new An (chart.js:19:90682) at Tchart.html:12:3
It seems obvious that the problem is not the code itself but the way I am serving it, but I have failed to find the problem. Perhaps you can help me spot it.
I have two DevTools windows side-by-side, one connected to the tablet and one looking at the page loaded from local files. From the Nano the raw network headers are
HTTP/1.1 200 OK
Content-type:text/html
for the html file and
HTTP/1.1 200 OK
Content-type:text/javascript
for the javascript. DevTools doesn't offer the raw option for the local files, but I see the same 200 response codes and text/html or text/javascript values.
Maybe it's the content itself being served or loaded incorrectly? For the HTML I see the code I took from chartjs.com:
<html>
<div>
<canvas id="myChart"></canvas>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<script src="C:\Users\xxx\Documents\Electronics\CBASS-R\WiFi\chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</html>
The only difference is that the code above is from disk and the Nano version has the script src line:
<script src="/chart.js"></script>
The script itself looks the same as well, though I can't say that I have looked at every character. DevTools formats it and shows code starting with
/**
* Skipped minification because the original files appears to be already minified.
* Original file: /npm/[email protected]/dist/chart.umd.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
/*!
* Chart.js v4.4.0
* https://www.chartjs.org
* (c) 2023 Chart.js Contributors
* Released under the MIT License
*/
!function(t, e) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).Chart = e()
}(this, (function() {
"use strict";
var t = Object.freeze({
__proto__: null,
get Colors() {
return Go
},
get Decimation() {
return Qo
},
get Filler() {
return ma
},
get Legend() {
return ya
},
get SubTitle() {
return ka
},
get Title() {
return Ma
},
get Tooltip() {
return Ba
}
});
and ending with
An._adapters = Rn,
An.Animation = Cs,
An.Animations = Os,
An.animator = xt,
An.controllers = en.controllers.items,
An.DatasetController = Ns,
An.Element = Hs,
An.elements = fo,
An.Interaction = Xi,
An.layouts = as,
An.platforms = Ss,
An.Scale = Js,
An.Ticks = ae,
Object.assign(An, Yn, jo, fo, t, Ss),
An.Chart = An,
"undefined" != typeof window && (window.Chart = An),
An
}
));
//# sourceMappingURL=chart.umd.js.map
It looks exactly the same on the Nano except that I removed the last comment line because it was generating errors in DevTools. The main errors were the same before and after that change.
In the name of leaving out as little as possible, the code on the Nano which sends the javascript is just this, with something similar for the html file.
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/javascript");
client.println();
client.println(chartjs);
The variable chartjs is defined as a "rawliteral" like this
const char chartjs[] PROGMEM = R"rawliteral(/**
* Skipped minification because the original files appears to be already minified.
[most of the script omitted]
"undefined"!=typeof window&&(window.Chart=An),An}));
)rawliteral";
If I send just a basic HTML page with a few words in it, it displays fine on all devices.
One more quick test. I put a quick javascript-in-a-file from w3schools.com on the ESP32 Nano. It serves and displays just fine.