Put Google Line Chart In Leaflet Popup

I'm trying to insert a Google line chart into a standalone Leaflet popup. I have the chart generation code in the header as instructed here, and then I put the div element in the p

Solution 1:

try structuring the code similar to the following snippet...

1) load google charts before anything else

2) then load other stuff you need

3) then try opening the popup

// run this before anything else on the page
google.charts.load('current', {
  callback: initPage,
  packages: ['corechart']
});

functioninitPage() {
  // do normal start up stuff here// ...// open the popupvar popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent('<div id="curve_chart" style="width: 400px; height: 200px"></div>')
    .openOn(mymap);

  drawChart();
}

functiondrawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  var container = document.getElementById('curve_chart');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data);
}