Embedding Google Sheet charts

Spoiler alert

I haven’t managed it, at least not in the way I wanted.

My best chance of success is now time. Eventually Google will realise that it must make embeds responsive.

Why write this? As an aide-memoire to remind me what I have tried when I have to update the graphs in a years time.

The challenge

How to embed interactive (ie updatable) line graphs created from data in a multi-tabbed Google Sheet so that the resulting line graph looks good both on the desktop and on the phone.

The basic ingredients

It is easy enough to create the charts, press on the three dots on the top right hand corner and Publish in Google Sheets. But if you then embed that code into a code block in WordPress, then, by the time you look at it on your phone, the only way to see it properly is to hold the phone in landscape, which few people do.

Options on WordPress

Using the Guthenberg code block will result in the partial view described above.

Ah but… WordPress also has an Embed block, doesn’t it? But Google Sheets is not on the whitelist for that and so cannot be used.

Plugins

The best chart plugin for WordPress seemed to be Visualizer so I downloaded that but I had to pay to use Google Sheets as a data source.

Chart Builder was another well-reviewed plugin so I paid the $39 to get the basic service. I connected Chart Builder to the Google Sheet as instructed and then found that the plugin could not cope with multiple tabs. So I got a refund.

I thought that Google Charts might be my saviour but it turned out that this did not produce embed code, just static images, and I would have to probably re-enter the data anyway.

Then I found a more generic plugin called EmbedPress which worked fine but which created scroll bars on the phone.

And finally Iframely which may be the best bet in the end though we still end up with scroll bars, this time at the bottom of the page rather than at the bottom of the graph.

Gen AI

The next step was to ask generative AI for help. This resulted in many suggestions for editing the embed code snippet. None of them quite right.

The first one gave me scroll bars on the desktop and the ability to swipe to see on the phone.

I got three or four other suggestions that all involved adding code within a <div section but none of them worked. One of them even gave me a blank space rather than a graph.

Conclusion

I may have to succumb and use static images of the line graphs which I will then have to re-insert annually as the tables are updated. I was hoping to avoid that extra step.