Search code examples
javascripthtmlchartsgoogle-visualization

Dynamic creation of google charts in single page

I'm attempting to dynamically create multiple charts in a single html page, everything loads perfectly, except that the graph that is displayed last is the only one that has interactivity available (ex: hover over points to read data, click on legend to highlight line..) while the others will only display static charts.

HTML Code:

<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>

Main JS functions:

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);

        }
    }
}
Solution

  • Solved: The problem was solved by creating the <div> elements for all charts prior to drawing the charts one by one.