Chart.js
Chart.js copied to clipboard
chartjs
Error on IPHONE 5s running 12.9.7
Expected behavior
I dont know if its to do with support for the static keyword but apparently that support was added IOS 9 It works fine on later versions of IPHONES and IOS, I know its an old phone, so not the end of the earth.
Current behavior
It generates a syntax error
Reproducible sample
Sent screen shot of syntax error
Optional extra steps/info to reproduce
[Error] SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list.
(anonymous function) (chart-full.js:3587)
the chart-full.js I expanded your min file as thats the only one I had, if you look at the screen shot hopefully you will recognise the code, I hope this helps
Possible solution
No response
Context
Just testing it on all the old phones I have available, it failed on an old one
chart.js version
v4,4.2
Browser name and version
Safari on IOS 12.9.7
Link to your project
No response
(I'm just a fellow user of this library but I think I found the issue) It looks like the provided code was not supported by the Javascript engine used on that platform.
According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields, it looks like public static fields was only supported as of Safari 14.1, which shipped with iOS & iPadOS 14.5 and macOS Big Sur 11.3 (from https://developer.apple.com/documentation/safari-release-notes/safari-14_1-release-notes).
Since the library is targeting ES6 (per https://github.com/chartjs/Chart.js/blob/v4.4.2/tsconfig.json#L31) and this was a bug in the implementation of the language spec for JavaScriptCore in Webkit (Safari), I wouldn't expect this to get fixed but who knows, maybe the maintainers of this project might be open to it 🤷
(I'm just a fellow user of this library but I think I found the issue) It looks like the provided code was not supported by the Javascript engine used on that platform.
According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields, it looks like public static fields was only supported as of Safari 14.1, which shipped with iOS & iPadOS 14.5 and macOS Big Sur 11.3 (from https://developer.apple.com/documentation/safari-release-notes/safari-14_1-release-notes).
Since the library is targeting ES6 (per https://github.com/chartjs/Chart.js/blob/v4.4.2/tsconfig.json#L31) and this was a bug in the implementation of the language spec for JavaScriptCore in Webkit (Safari), I wouldn't expect this to get fixed but who knows, maybe the maintainers of this project might be open to it 🤷
Thanks Arun, for looking into it, It was an old phone, so your comments about safari are more than likely to be correct, I was just doing belt and braces testing. I wouldnt want anybody wasting time, but I thought I would flag it.
Thanks again
@chartjs do you all think this is worth fixing? what are the minimum supported target versions?
In all honesty I mentioned it to give beck, I dont want any body to go to effort, Iphone 5's are now old and why limit the development of a super project, I can always go back to an earlier version of chart JS, but I dont think the demand is there
I'm using an old iPad Air (iPadOS 12.5.7) and have the same issue. I need this iPad for just one purpose - to show a chart of my current power price. I wrote the code and used chart.js but it doesn't work on the old iPad. Now I will try the version 2 of chart.js.
I'm using an old iPad Air (iPadOS 12.5.7) and have the same issue. I need this iPad for just one purpose - to show a chart of my current power price. I wrote the code and used chart.js but it doesn't work on the old iPad. Now I will try the version 2 of chart.js.
Did you make it work? I also just want to chart the power price on my old iPad 2 (webkit for iOS 9.3.5).
This is my current code using the first version of Chart.js (v0.2.0) and the graph works on modern browsers but is blank on the ipad.
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
</body>
</html>
document.addEventListener('DOMContentLoaded', function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.hvakosterstrommen.no/api/v1/prices/2024/07-16_NO1.json', true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
var data = JSON.parse(xhr.responseText);
var labels = data.map(function (_, index) { return index; });
var nokPerKWh = data.map(function (point) { return point.NOK_per_kWh; });
var ctx = document.getElementById('myChart').getContext('2d');
var chartData = {
labels: labels,
datasets: [{
label: 'NOK per kWh',
fillColor: 'rgba(75, 192, 192, 0.2)',
strokeColor: 'rgba(75, 192, 192, 1)',
pointColor: 'rgba(75, 192, 192, 1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(75, 192, 192, 1)',
data: nokPerKWh
}]
};
new Chart(ctx).Line(chartData);
} else {
console.error('Request failed with status:', xhr.status);
}
};
xhr.onerror = function () {
console.error('Request failed');
};
xhr.send();
});
