Estoy intentando crear dinámicamente varios gráficos en una sola página html, todo se carga perfectamente, excepto que el último gráfico que se muestra es el único que tiene interactividad disponible (por ejemplo, pase el cursor sobre los puntos para leer datos, haga clic en la leyenda para resaltar línea ..) mientras que los otros solo mostrarán gráficos estáticos.
Código HTML:
<html> <head> <title>Dashboard</title> <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type = "text/javascript" src = "./scripts/scripts.js"> </script> </head> <body> </body> <script language = "JavaScript"> var dashboard = getParameterByName("dashboard"); google.charts.load('current', {packages: ['corechart','line']}); buildDashboard(dashboard); </script> </html>Funciones principales de JS:
function buildDashboard(dashboard) { var panels = getPanels(dashboard); google.charts.setOnLoadCallback(function(){ drawCharts(dashboard, panels); }); } function drawCharts(dashboard, panels) { for(var i = 0; i < panels.length; i++) { var panel = panels[i]; var _data = getPanelData(dashboard, panel.Id); if(panel["Type"] == "LineChart") { var legend = JSON.parse(JSON.stringify(_data[0])); var options = buildLineChartOptions(panel, legend); var data = google.visualization.arrayToDataTable(beautifyData(panel, _data)); var divname = panel.Id; if(!document.getElementById(divname)) document.body.innerHTML += "<div id = " + divname + " style = \"width: 100%; height: 600px; margin: 0 auto\"></div>"; var chart = new google.visualization.LineChart(document.getElementById(divname)); chart.draw(data, options); } } }Resuelto: el problema se resolvió creando los elementos <div> para todos los gráficos antes de dibujar los gráficos uno por uno.