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)



}

It looks correct. When you hit back, do you see the previous chart or no chart at all? — Below the Radar, Nov 28 '18 at 15:06
When I hit back, there's no chart at all and if I go forward that chart is gone. I have to hit forward to go to a chart that hasn't been rendered yet to get it to show up. — DangerFox, Nov 28 '18 at 15:09
One last thing you could try is changing the chartDiv id for a class, maybe it needs to be unique too. Then, can you create a simple jsfiddle that reproduce the problem? — Below the Radar, Nov 28 '18 at 15:11
I'm trying to get it working with a different layer since some of this data is private, but having some issues with the mapping in it. — DangerFox, Nov 28 '18 at 15:28
Here's a js fiddle I'm attempting. I can't quite get the chart to show up though. http://jsfiddle.net/bspa906m/ — DangerFox, Nov 28 '18 at 16:11
I have update your jsfiddle: http://jsfiddle.net/bspa906m/1/ because `createChart` was not triggered. However, it cannot works because the `canvas` element is not yet added to the DOM when you want to create the chart. `document.getElementById()` return `null`. See my answer instead — Below the Radar, Nov 28 '18 at 16:20
I just updated my answer, there was an error, but I think it works now — Below the Radar, Nov 28 '18 at 16:33

Below the Radar · Answer 1 · 2018-11-28T19:35:56.317

0

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/

edited Nov 28 '18 at 19:35

answered Nov 28 '18 at 14:34

Below the Radar

7,321
11
63
142

I figured it was that at one point as well, and tried appending something unique to the canvas ID and it kept the same result. I tried your code and where the chart should be is just the text [object HTMLCanvasElement]. – DangerFox Nov 28 '18 at 14:56
ok that's because the popuptemplate expect only text. Can you edit your question to add your try with the unique id – Below the Radar Nov 28 '18 at 15:01
I can see it working in the JS Fiddle, but can't get it to work in my code. The popup appears cut off in the upper left hand corner. – DangerFox Nov 28 '18 at 17:58
verify that you are using this line correctly: `popupElement.querySelector(".chartDiv").appendChild(canvas);` there was an error in a previous version of my answer. Remove the `[0]` – Below the Radar Nov 28 '18 at 18:30
I still have the same issue even with that. – DangerFox Nov 28 '18 at 19:27
Thanks for that tip. I was getting no errors and couldn't figure it out. I'll try to work through it and see. I'll update if I figure it out. – DangerFox Nov 28 '18 at 19:33
Wrap all your `createPopup` function inside a try/catch and print the error to the console – Below the Radar Nov 28 '18 at 19:42

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

1 Answers1