'Loading Google visualization API before/during page load

I am in a scenario where I need to display a google chart that is presentable and ready to display "before" the entire page loads. I've tried loading modules using the "ignoreWindowOnLoad" property, messing with different async call methodologies, and different versions of the API. I've also tried loading the scripts the following ways:

<script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"current","packages":["gauge"],"ignoreWindowOnLoad":true}]}'></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.load("visualization", "current", { packages: ["corechart"], ignoreWindowOnLoad: true});

The issue is that by the time the page loads and I try to draw the chart immediately after load, I get an exception:

Uncaught TypeError: Cannot read properties of undefined (reading 'arrayToDataTable')
    at drawChart

I am using ASP.NET (not Core) as the backend, and using an SSR technology such as node.js isn't a viable option in my scenario, but if I can achieve SSR without a framework (if it's not an overkill solution) that may be acceptable. The chart loads fine if I call drawChart after the page fully loads.

Basically I'm looking for a way to ensure all visualization-related APIs are fully loaded before the page presents itself, so a single web request can pull the entire page and its contents, charts included. Any advice on how to achieve this would be greatly appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source