2

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.

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:createChart}</canvas></div>"
            },
            {
                type: "attachments"
            }]
        }

Chart:

    createChart = function (location) {
    var date = new Date();
    var chartArea = "chartArea";
    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)



}
2

To run code every time the popup changes (even for prev/next arrow button clicks), use the "watch" functionality to watch the "selectedFeature" property of the Popup:

createChart = function (graphic) {
    // use "graphic.attributes" in this function to get the attributes of the clicked feature.
    // you may need to wrap your code in a setTimeout() function here to wait for the popup to open before you modify the DOM inside the Popup.
    ...
}
view.popup.watch("selectedFeature", createChart);
3
  • Attempting to do this moves my popup to the upper left corner and then doesn't allow me to click anything on the map after.
    – DangerFox
    Nov 28 '18 at 17:30
  • @DangerFox for that I think you need to wrap your code in the createChart function with the "setTimeout()" - see my comment in the example code: // you may need to wrap your code in a setTimeout() function here to wait for the popup to open before you modify the DOM inside the Popup.
    – GavinR
    Nov 28 '18 at 20:25
  • When I wrap it in that it still gives the same error and it also tells me that graphic is undefined. I changed my call in the template to just be {createChart}
    – DangerFox
    Nov 28 '18 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.