javascript google-visualization looker-studio data-studio-custom-visuals

Looker Studio custom visualization using Google Charts results in empty page

I realized a custom visualization for Looker Studio using the approach explained in this Codelab as well as this YouTube Video exploiting the d3 library. I am basically happy with the result, but it turns out the visualization does not blend in well with Looker Studio standard components.

At this point I realized I would be able to use Google's own library Google Charts. My hope is that the resulting graph will look more native to the Looker Studio environment. However, I have trouble implementing Google Charts code. The following example of a very fundamental line graph is provided by Google, so I assume it must be working:

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

And here is how I tried to do the same thing for the custom visualization:

const dscc = require('@google/dscc');
const viz = require('@google/dscc-scripts/viz/initialViz.js');
const local = require('./localMessage.js');

// write viz code here
const drawViz = (data) => {
  // Create the script tag
  const script = document.createElement("script");
  script.src = "https://www.gstatic.com/charts/loader.js";
  script.type = "text/javascript";

  // Append the script tag to the head of the document
  document.head.appendChild(script);

  // Create the div tag
  const div = document.createElement("div");
  div.id = "curve_chart";
  div.style.width = "900px";
  div.style.height = "500px";

  // Append the div tag to the body of the document
  document.body.appendChild(div);

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
};

drawViz(local.message);

using npm run start to inspect the result on the localhost, does not produce any errors, but the output is simply entirely empty. HTML and JavaScript are not exactly my strengths, so I am pretty lost even on where to look for the problem and a solution. I feel like it is only a minor oversight and I am hoping you can help me.

Thanks in advance!

What I tried

including google-charts via const google = require('google-charts'); after installing it with npm. However, my new friend chat gpt told me that wouldn't be necessary
The following lines in the script above were already attempts to add necessary infrastructure to the enclosing HTML-document. It did not help, though

  // Create the script tag
  const script = document.createElement("script");
  script.src = "https://www.gstatic.com/charts/loader.js";
  script.type = "text/javascript";

  // Append the script tag to the head of the document
  document.head.appendChild(script);

  // Create the div tag
  const div = document.createElement("div");
  div.id = "curve_chart";
  div.style.width = "900px";
  div.style.height = "500px";

Solution

you may need to wait for the google script to load before trying to use it.

see script.onload and loadGoogle

const dscc = require('@google/dscc');
const viz = require('@google/dscc-scripts/viz/initialViz.js');
const local = require('./localMessage.js');

// write viz code here
const drawViz = (data) => {
  // Create the script tag
  const script = document.createElement("script");
  script.src = "https://www.gstatic.com/charts/loader.js";
  script.type = "text/javascript";
  script.onload = loadGoogle;
  
  // Append the script tag to the head of the document
  document.head.appendChild(script);

  // Create the div tag
  const div = document.createElement("div");
  div.id = "curve_chart";
  div.style.width = "900px";
  div.style.height = "500px";

  // Append the div tag to the body of the document
  document.body.appendChild(div);
  
  function loadGoogle() {
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
  }
  
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }
};

drawViz(local.message);