Your HTML has the correct data, but the chart area is blank. Check when you call the drawing code. Load the required Google Charts package and draw from its completion callback. Waiting for the page itself to load is a different event.
The worked report compares fictional request counts: Email 16, Chat 11, and Phone 8. The total is 35 requests. The source table stays visible while the online chart library loads, so the reader can still get the result if the chart cannot be drawn.
Open the working example · Download the complete HTML
Load the package your chart uses
A column chart uses the corechart package. Include Google's loader, request that package, and register the drawing function:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawRequests);
function drawRequests() {
const data = google.visualization.arrayToDataTable([
['Channel', 'Requests'],
['Email', 16], ['Chat', 11], ['Phone', 8]
]);
const chart = new google.visualization.ColumnChart(
document.querySelector('#chart')
);
chart.draw(data, {
title: 'Fictional requests by channel',
legend: {position: 'none'},
height: 280
});
}
</script>
<div id="chart"></div>
Pass the function to setOnLoadCallback; do not write drawRequests() there. Calling it immediately runs the drawing code before the requested package is ready.
The Google library-loading guide also documents the promise returned by google.charts.load. Use that completion signal if it fits your application's structure better. Keep one loader tag even when the page has several charts.
A single HTML file can still need a connection
This example keeps the request rows in the file, but it loads Google's chart libraries online. Downloading the HTML does not remove that dependency. Label it as an online chart report rather than calling it a self-contained offline chart.
For a handoff that must work without a network, choose a renderer you can package locally, or provide a static reading copy with its values. Self-contained HTML files explains the difference between one filename and a page whose dependencies actually travel with it.
Leave a useful result when loading fails
Put the 35-request total and the three source rows in normal HTML. A loading message should change to a clear failure message if the library cannot be reached. It must not announce “Chart ready” merely because the rest of the page appeared.
The prepared example catches drawing errors and keeps the table in place. It does not fetch a spreadsheet or contact a data backend. Replace the fictional rows with approved data and label the real reporting period before using the report at work.
Redraw at the new width
A chart drawn at a desktop width needs a new draw when its container changes size. Keep the same data and chart instance, and request a redraw after the layout changes. Avoid accumulating several chart instances in the same container.
At a narrow width, check the channel labels and table together. Each visible bar should agree with 16, 11, and 8, and the total should remain 35 after a resize. The table is the reading fallback, not a separate dataset that you update by hand afterward.
If you prepare this report for NOS, retain its explanation of the online dependency. A workspace reading copy and an offline archive have different delivery requirements.