Widget:Napchart: Difference between revisions
From Polyphasic Sleep Wiki
mNo edit summary |
No edit summary |
||
| (60 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
< | <div style="padding:5px"> | ||
<div style="width:320px;height:320px;"> | |||
<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'); | |||
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 => { | |||
window["myNapchart_" + idSuffixForNapchartVar] = Napchart.init(context, data['chartData']); | |||
console.log(data); // Original console.log | |||
}) | |||
.catch(error => { | |||
console.error('Error fetching or initializing napchart:', error); | |||
}); | |||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
