Attach Google Charts on Leaflet Popup - leaflet

Question

I tried to attach a google chart on the popup of a layer in Leaflet by followed this instruction. However, I keep getting this error:
"Uncaught (in promise) Error: Container is not defined"
Here is my javascript function that I use to bind the popup:
function layer_name(feature, layer) {
//...
var popupContent = L.popup().setContent('<div id="chart_div" align = "center">1</div>')
layer.bindPopup(popupContent, {maxHeight: 400});
}
When I tried setting
<div id="chart_div" align = "center">1</div>
as just an HTML element there is no error raised.
I have also define the chart to be drawn at the very beginning of the script as below:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Draw the pie chart for follower chart when Charts is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that draws the bar
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Title', 'Value'],
['A', 317],
['B', 148],
['C', 67],
['D', 27],
['E', 23]
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data);
}
</script>
How can I fix this?

Answer 1

Your problem is that your HTML Element chart_div is not created until the popup is open. But you try to init the chart on the not created HTML Element.
Call drawChart() after the popup is opened.
Update your layer_name function and add the openpopup event to the layer. It will called when you open the popup.
function layer_name(feature, layer) {
//...
var popupContent = L.popup().setContent('<div id="chart_div" align="center">1</div>')
layer.bindPopup(popupContent, {maxHeight: 400});
layer.on('popupopen',function(e){
drawChart();
})
}