JIRA Gadget with ChartJS doesn't work until refresh

[Johan Jonsson Nilsson]

I have been working on a Jira gadget which should create a custom piechart using the ChartJS library. Everything with the gadget works as expected. However, when configuring the pie chart with a project or a filter as well as a statistics type, as soon as I hit "Save", the window goes blank. It stays like until I refresh the gadget or the whole page. After that initial refresh, the chart works as expected, even if I close the page and reopen it later.

After inspecting my code, it seems that my canvas element that I use with ChartJS only appears after this refresh, so I suspect that this is the culprit. However, I have tried a lot of things to fix this, but none of it works. Does anybody know of a solution to this error? Any help would be appreciated!

Please see the code below:

<Content type="html" view="profile">
 <![CDATA[
 #requireResource("com.atlassian.jira.gadgets:common")
 #requireResource("com.atlassian.jira.gadgets:jira-global")
 #requireResource("com.atlassian.jira.gadgets:autocomplete")
 #requireResource("net.teliasonera.diva.jira.cf-piechartgadget:chart-js-web-resource")
 #includeResources()
 
 <center>

 <script type="text/javascript">


function makePieChart(gadget, numberData, labelData) {
 var ctx = AJS.$('<canvas id="myChart" width="400" height="400"></canvas>').appendTo(gadget.getView());
 //gadget.getView().append(ctx);
 
 var data = {
 datasets: [{
 data: numberData,
 backgroundColor: getRandomColor(numberData.length)
 }],
 labels: labelData
 };
 
 var myChart = new Chart(AJS.$("#myChart"),{
 type: 'doughnut',
 data: data,
 options: {
 responsive: true,
 maintainAspectRatio: false
 }
 });