Adding a highchart to a Leaflet Popup

Question

I'm currently working on a project where the map I create displays all communities the akdatagateway tracks and when a marker is clicked a popup opens displaying a highchart of the population over time char along with some other data. I've gotten all markers to display and was able to get the desired data through the website's API. The problem lies in the generating the highchart in the popup. I cant figure out how to pass in or get the array to the onPopupOpen() to make the subsequent function calls.

Reverent Functions:

  function addMarker(array){
            for (i in array){
                var communityData = array[i] 
                L.marker([array[i].latitude,array[i].longitude], {bounceOnAdd: true, bounceOnAddOptions: {duration: 250, height: 50}}).addTo(map).on('popupopen', onPopUpOpen)
                .bindPopup('<p style="font-size:130%;"><b>'+ array[i].name +'</b></p><div id="container" style="min-width: 300px; height: 200px; margin: 0 auto"></div><p><br />PCE for Electricity: ' + pcePrice + '<br />EIA for Electricity: ' + eiaPrice + '</p>').addTo(community);
            }
        }

  function getPopulationData(array){
        var id = array.id
        var years = ""
        var populations = ""
        var populationData = []

        var community_pop = $.ajax({type: "GET", url: "/api/models/population/?community=" + id  +"", async: false}).responseText
        community_pop = JSON.parse(community_pop)
        community_pop = community_pop.results
        for ( i = 0; i < community_pop.length; i++){
            years += "'" + community_pop[i].year + "',";
            populations += community_pop[i].total_population +",";
        }
        populationData[0] = years
        populationData[1] = populations
        return populationData;
    }

    function onPopUpOpen (e) {
        //some code to get the community id from popup to use the function.
        // getPopulationData()
        $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
          text: 'Population Over Time'
        },
        subtitle: {
          text: 'Source: AEDG'
        },
        xAxis: {
          categories: [popData[0]]
        },
        yAxis: {
          title: {
            text: 'Population'
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false
            },
            enableMouseTracking: true
          }
        },
        series: [{
          name: '',
          data: [popData[1]]
        }]
      });
    }

I've tested the functions on elements of the Community array and they do produce the correct data I just can't figure out how to make call them on the pop up and thus generate the highchart. Any commentary is appreciated!

Links to Reference info:
http://leafletjs.com/reference.html
http://www.highcharts.com/docs

Answer 1

It looks like your code should work, so without a full reproducible example, it's tough to troubleshoot. So, instead I'll offer a working example:

var popup = L.popup().setContent('<p style="font-size:130%;"><b>Some Name</b></p><div id="container" style="min-width: 300px; height: 200px; margin: 0 auto">Loading...</div>');

L.circle([51.49, -0.09], 500, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
}).addTo(map).bindPopup(popup);


map.on('popupopen', function(e) {
  $.ajax({
      type: "GET",
      url: "data.json"
    })
    .done(function(data) {
      $('#container').highcharts({
        chart: {height: 175, width: 295},
        title: {text: ''},
        series: data
      });
    });
});

map.on('popupclose', function(e){
  $('#container').html("Loading...");
});

Also, I'd warn you not to make async: false calls. Not only is it deprecated, but it can make for a poor user experience and it's totally unnecessary here.

Complete code sample is runnable here.