Widget:Napchart: Difference between revisions
From Polyphasic Sleep Wiki
Tag: Undo |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 2: | Line 2: | ||
<div style="padding:5px"> | <div style="padding:5px"> | ||
<div style="width:320px;height:320px;"> | <div style="width:320px;height:320px;"> | ||
<canvas id="nc-<!--{$url|escape:'html'}--> | <canvas id="nc-<!--{$url|escape:'html'}-->" width:100%;height:100%;"></canvas></div></div> | ||
<script src="/napchart.min.js"></script> | <script src="/napchart.min.js"></script> | ||
<!-- jQuery script tag removed --> | |||
<script> | <script> | ||
const urlValue = "<!--{$url|escape:'html'}-->"; // Template variable | |||
const idSuffixForCtxAndData = urlValue.split('/').pop(); | |||
const idSuffixForNapchartVar = urlValue.slice(21); // Original logic for this variable name part | |||
const canvasElement = document.getElementById("nc-" + urlValue); | |||
const context = canvasElement.getContext('2d'); | |||
.then(response => response.json()) | |||
window["ctx_" + idSuffixForCtxAndData] = context; | |||
const dataUrl = 'https://cache.polysleep.org/napcharts/' + idSuffixForCtxAndData + ".json"; | |||
fetch(dataUrl) | |||
.then(response => { | |||
if (!response.ok) { | |||
throw new Error('Network response was not ok for ' + dataUrl); | |||
} | |||
return response.json(); | |||
}) | |||
.then(data => { | .then(data => { | ||
Napchart.init( | window["myNapchart_" + idSuffixForNapchartVar] = Napchart.init(context, data['chartData']); | ||
console.log(data); | console.log(data); // Original console.log | ||
}) | }) | ||
.catch(error => console.error('Error fetching napchart | .catch(error => { | ||
console.error('Error fetching or initializing napchart:', error); | |||
}); | |||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
