Guide to embed a Google Sheets chart into a WordPress website

I'm looking to include a chart in a wordpress post, using the script generated from google sheets' publish function.

When I add the script to a generic HTML page, the chart displays properly. However, when I insert it into a wordpress post, I encounter the error message: "All series on a given axis must be of the same data type×"

Do I need to modify the script or adjust something else on the wordpress page to ensure the chart is visualized correctly?

Thank you!

Here's the code that was generated by Google Sheets:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AgtmZPWzQ7lldEt2S2VLajBRQVNFLV9pRFY2bTRQLVE&transpose=0&headers=1&range=A2%3AB1010&gid=0&pub=1","options":{"titleTextStyle":{"bold":true,"color":"#000","fontSize":16},"curveType":"","animation":{"duration":500},"width":1270,"lineWidth":2,"hAxis":{"useFormatFromData":true,"title":"Data","minValue":null,"viewWindowMode":null,"viewWindow":null,"maxValue":null},"vAxes":[{"useFormatFromData":true,"title":"\u00b5g/m\u00b3","minValue":null,"logScale":false,"viewWindow":{"max":null,"min":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"logScale":false,"viewWindow":{"max":null,"min":null},"maxValue":null}],"booleanRole":"certainty","title":"Via Ariosto, SO2","height":469,"interpolateNulls":false,"legend":"right","focusTarget":"series","useFirstColumnAsDomain":false,"tooltip":{"trigger":"none"}},"state":{},"view":{},"isDefaultVisualization":false,"chartType":"LineChart","chartName":"Chart 1"} </script>
javascriptwordpressgoogle-sheets

Answer №1

If you're looking for an alternative, consider utilizing a specialized WordPress plugin created specifically for seamless integration with the Google Charts API. Take advantage of the Inline Google Spreadsheet Viewer plugin for WordPress, which utilizes a Google Spreadsheet as a data source and allows you to effortlessly showcase that information through various Google Charts and graph visualizations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adapting the position of a table row in AngularJS based on the

I need assistance with creating a dynamic table-row that moves to indicate the current time in a table filled with timestamps. <table> <tr ng-repeat="timestamp in timestampArray"> <td>{{timestamp}}</td> </tr> ...

javascriptangularjshtml

Obtaining a URL in JavaScript

Hey there, I'm diving into the world of JavaScript and could use some guidance. I'm currently working on implementing forward and backward buttons on a webpage. The URL structure is http://webaddress.com/details?id=27 My goal is to write two fun ...

javascripthtml

The angular variable is being updated, but the tweet embed code surrounding it is not being refreshed

I've been working with Angular to loop through an array of tweet ids and display them on the page using Twitter's embed code. The issue I'm facing is that although the variable gets updated, the twitter embed remains static. Here's a gl ...

javascriptangularjs

Use the zoom feature on D3 to enhance two graphs in an HTML document

I have been experimenting with d3 libraries lately and came across http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab. I successfully used it to draw a graph based on data from a tsv file and enable zoom in and out functionality, which worked well for me. Ho ...

javascriptd3.jsgraph

Comparing the use of Next.js static assets from the public folder with cloud-based storage solutions

Typically, in Next.js (or React) cloud-based storage solutions are commonly utilized for storing media files such as images. My inquiry is, what prevents us from saving images as static assets in the public folder and accessing them directly in our appli ...

javascriptreactjsnext.jscloudimage-scaling

Arranging sequence of jQuery functions

I have implemented a loop using jQuery that iterates through specific elements on an HTML page. During each iteration, I switch over a variable and add HTML code to particular locations. The issue arises when one of the appends requires importing another ...

javascriptjqueryhtmlnode.js

There was an unexpected token syntax error while trying to assign the database URL from the environment variable "REACT_APP

I am facing an issue with setting an environment variable in my mongo.js file. Here is the code snippet where I have set the ENV variable: const mongo = require('mongodb').MongoClient; const assert = require('assert'); const ObjectId = ...

javascriptnode.jsreactjs

Error: Trying to access the 'previous' property of an undefined value

I keep encountering an error with functions in firebase: TypeError: Cannot read property 'previous' of undefined at exports.sendNotifications.functions.database.ref.onWrite (/srv/index.js:5:19) at cloudFunction (/srv/node_modules/firebase-functi ...

javascriptnode.jsfirebasevue.jsgoogle-cloud-functions

What is the best way to incorporate Vuetify into a new application?

Recently, I developed a new app using Vue and I decided to integrate Vuetify as the framework. After executing the npm install vuetify --save command, Vuetify was added to the app successfully. However, when I tried to use it, the CSS button colors were no ...

javascriptvue.jscomponentsvuetify.js

How can I ensure that VueJS only starts loading data after the initial API call has been completed?

After retrieving data from an API, I populate a form in my component. The challenge I am facing is that the watchers are triggered immediately after populating the initial data. I want them to be triggered asynchronously. Additionally, I need to prevent th ...

javascriptvue.js

How can I convert a JSON template to HTML using AngularJS?

As someone who is just starting out with AngularJS, I am facing an issue where the HTML tags in a JSON file are not being encoded when rendered in HTML using AngularJS. Is there a specific method in AngularJS that can help with this? This is what my HTML ...

javascripthtmljsonangularjs

Displaying components in Vue 2 using data from an ajax call

How can components retrieved from an ajax response be rendered? For instance, suppose I have registered a component called "Test" and within the ajax response I encounter: <p>dummy paragraph</p> <test></test> <!-- vue component ...

javascriptajaxvuejs2vue-router

The error message states: "An attempt was made to destructure a non-iterable object. In order for non-array objects to be iterable, they must have a [Symbol.iterator

I need to call a RTK query endpoint from a function const [getCityCode, { isLoading, error, data, isSuccess, isError }] = useLocationQuery(); const getLocationDetails = async () => { const queryItems = { latitude: lat, longitude: long }; await getC ...

javascriptreactjsreact-nativereduxrtk-query

Is Angular capable of displaying a date within a specific timeframe using ng-show?

So I have a button that, when clicked, displays a list of data. I am adding a unique font awesome icon in there if the JSON key value exists. However, here lies the issue. The particular key happens to be a date. I need my ng-show function to check whether ...

javascriptangularjsjsonfont-awesome

Unable to alter a global variable while iterating through an angular.forEach loop

I've encountered a challenge while attempting to modify a global variable within an Angular.forEach loop. Although I can successfully update the variable within the loop, I'm struggling to maintain those changes when accessing the variable outsi ...

javascriptangularjs

How can I integrate both the ui-bootstrap datepicker and timepicker in an AngularJS application?

I am currently developing a web application that utilizes UI-Bootstrap's datepicker and timepicker directives. The datepicker is set up as a simple popup dialog, while the timepicker appears on the page next to the datepicker. However, I am facing ch ...

javascriptangularjstwitter-bootstrapweb-applicationsangular-ui-bootstrap

It is impossible to alter the data contained within the input box

Objective: Upon clicking a button to display the modal, the selected data (first and last name) should be inserted into an input box and editable. The user should be able to modify the data. Issue: The data entered into the input box cannot be edited ...

javascriptreactjs

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox

Intersection observer automatically removes images from carousel (Siema) after they have been viewed

Check out this example to see the issue I'm facing. I've implemented an intersection observer for lazy loading images, here's the code: const pictures = document.querySelectorAll("[data-src]"); function loadPicture(pic){ const src = p ...

javascriptcarousellazy-loadingintersection-observersiema

How can you handle undefined values in the query object parameter when using Mongoose's Find function?

Alright: Sound.find({ what: req.query.what, where: req.query.where, date: req.query.date, hour: req.query.hour}, function(err, varToStoreResult, count) { //perform some actions }); Let's consider a scenario where only req.query.what has a ...

javascriptnode.jsmongodbexpressmongoose