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/
Source:stackexchange.com