Chart JS chart not rendering in ArcGIS popup when using navigation arrows

Question

I'm putting a chart in the popup of my points. On the initial click, the popups display the chart and if I use the forward navigation arrow on the popup, the next chart renders. However, if I use the back arrow the chart will not render again. The method that generates the charts doesn't seem to be firing the second time. Any help is appreciated. My code is below. Popup:

            popupTemplate: {
            title: "{Location}",
            content: [{
                type: "text",
                text: "Sample Location: {Type} </br> Survey: {Survey} </br> {Location:getSurveyInfo} <div id='chartDiv'><canvas id='chartArea{Location}'>{Location:createChart}</canvas></div>"
            },
            {
                type: "attachments"
            }]
        }

Chart:

    createChart = function (location) {
    var date = new Date();
    var chartArea = "chartArea" + location;
    var sub = location.substring(0, 2);

    getData(date.getFullYear(), [[location]], function (data) {
        var maxScale = Math.max(...data[0].tData);
        var colors = [["#34eb58", "#0000ff"]];
        var chartData = buildChartData(name, maxScale, data, colors, null);
        var ctx = document.getElementById(chartArea);
        var chart = new Chart(ctx, chartData);

    }, getChartDataError)



}

Answer 1

I think you should not use the text content type for the popuptemplate. Using a function that return HTML element would be easier in your case.

    popupTemplate: {
        title: "{Location}",
        content: createPopup
    }

here your construct your popupElement and insert chart in it:

function createPopup(graphic) {
    try {
        var location = graphic.getAttribute("Location");
        var popupElement = document.createElement("div");
        popupElement.innerHTML = "Sample Location: " + graphic.getAttribute("Type") + "</br> Survey: " + graphic.getAttribute("Survey") + "</br>" + getSurveyInfo(location) + "<div class='chartDiv'></div>"
        var date = new Date();
        var sub = location.substring(0, 2);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        getData(date.getFullYear(), [[location]], function(data) {
            var maxScale = Math.max(...data[0].tData);
            var colors = [["#34eb58", "#0000ff"]];
            var chartData = buildChartData(name, maxScale, data, colors, null);
            var chart = new Chart(ctx, chartData);
         }, getChartDataError);

         popupElement.querySelector(".chartDiv").appendChild(canvas);
         return popupElement;
    } catch(error) {
        console.error(error)
    }
}

See working demo: http://jsfiddle.net/bspa906m/3/