html, javascript, css: January 2020

Create Graphs in Google Sheets and Insert in WordPress Website

Deepak
February 12, 2019
WordPress
4 Comments

There is no doubt that the WordPress is the best CMS (Content Management Software) ever. It dominates the CMS usage with 76.4% market share. It offers almost every basic features and the features which are not there can be availed by using various WordPress Plugins.

Recently, I wanted to insert a chart/graph inside my WordPress post and tried installing various WordPress Chart Plugins but nothing worked as per the expectations. Some plugins were paid and some were pretty difficult to understand. Seriously, they were annoying.

Best Way to Insert Graphs in WordPress is to Create Graphs in Google Sheets and then Insert it in Your WordPress Website.

I researched a lot and found a simple solution to the problem; a chart can be created inside the Google Sheets and then inserted into your WordPress post. Yeah, it’s pretty simple and easy to do.

Page Contents

Create a New Google Sheet Document

To create a new Google Sheet document, first of all, you’ll need to go to sheets.google.com and Create a new blank spreadsheet. Name your document anything you want and go to the next step.

Fill in the Chart Data

Never Put % (Percent) in the Data Field.

Since spreadsheet document has already been created now you need to type in the details that you want to create the chart for. There is no need for providing the column name.

In the A1 column, you can fill in the parameters and in the B1 column, data can be filled in as shown in the image below.

Insert the Chart

Now select the filled in data as shown in the above picture and then go to Insert tab and click on the Chart, after that, a chart will be inserted into your spreadsheet. Below pictures will show you the same.

After that Google sheets will detect and automatically insert suitable chart as per your data. You can also change the chart type by clicking on the Chart Type option which appears to be in the upper right section. There will be multiple chart type options you can choose from.

You can also customize your chart by going to Customize tab which also appears to be in the top right part of the spreadsheet. There, you can customize various aspects of the chart like; Chart style, Chart and axis titles, Series, and Legend.

Here’s a short video describing the same, take a look.

Now that your chart has been created and customized as per your requirements, here comes the next main part of the tutorial…

Embedding Google Charts Into Your Website

Google Sheets is one of my favorite web applications. It’s quick, lightweight, and easy to use. For those of you not familiar with Google Sheets, it’s Google’s web-based spreadsheet application. While creating tabular data is the main function of this application, did you know that you can also create dynamic, embeddable charts based on these data values? Let’s take a look.

Creating a spreadsheet in Google Sheets

Hopefully, if you’ve worked with Excel or any other spreadsheet program entering data and creating tables is nothing new. Typically, your table might contain row and/or column headers and data cells. Let’s look at this example table:

Labor Force Data	July 2014	Aug 2014	Sept 2014	Oct 2014	Nov 2014	Dec 2014
Civilian Labor Force (1)	4,746.10	4,746.50	4,747.40	4,410.00	4,748.00	4,400.00
Employment (1)	4,416.10	4,422.80	4,428.90	4,000.00	4,438.90	4,100.00
Unemployment (1)	330	500	318.5	900	309.1	600
(1) In Thousands

Generating the chart

Generating a chart based on your table requires a few simple steps:

Select the rows and columns you would like included in your chart

Click the chart icon in the header of Google Sheets

Select which chart type you would like to use (Google will recommend several chart types based on your selected data but if you don’t see your type listed click the More ›› link)

In some cases you will also need to tick the option “Switch rows / columns” and/or “Use row 1 as headers”.

Click the Insert button to add the chart to your sheet.

If the chart still doesn’t look right, you can modify the settings by right-clicking the chart and selecting Advance Edit.

Customizing the chart

Customizing your chart is a very easy task in Google Sheets. Let’s say you want to change the colors of the chart, the font size, or swap the axis, simply right-click the chart, select Advance Edit and click on the Customize tab.

To update the line, bar, or pie colors, scroll down to the Series section, click the drop-down, and change the color.

Embedding the chart

Now that you’ve finished making your design and data adjustments, let’s embed your chart on your website.

The first thing that you should do is update your share options for this Sheet document.

Click the share button, and select the Advance link.

Click the Change link, and select “On – Public on the web”. This will allow that data to be accessed by anyone (This will be very important when we embed the chart into our website).

Click Save to make your changes permanent and then click Done.

Now, click the down arrow on the right side of the chart, and select Publish Chart.

Click the Embed tab, and click the Publish button. You should now see an embeddable iframe code snippet. Copy this iframe code, and navigate to your website.

Paste this code into an HTML/source view, and click save. You should now see your chart load directly within your website.

If, for any reason, you need to update the data within the spreadsheet, your changes will automatically be reflected in your chart. Pretty cool, huh?

Embedding a Google Chart in Your Blog Post

Apr3

Recently my fourth grade technology class has been learning to create charts using Google Spreadsheets. They were given a variety of data sets to chart which were all based on their current study of the US States. Different data requires different types of charts, and they have built column and bar charts, pie charts, and line charts. We always share our learning via the student blogs and so in order for them to be able to embed one of their charts into a post, I needed to provide an example and work out the kinks before teaching them the embed process. In Google charts there is an option for an embed code, allowing the chart to be interactive, and also automatically updated in the embedded view if the data is changed.

1. In your Google chart select the option to Publish Chart.

(I would suggest using the move and resize option in the chart to center the chart first as best you can before heading to publish.)

2. Copy the embed code:

Since the embed code does not offer size attributes the first insertion could look something like this.

As you can see there is very little of the chart visible and it is hard to get the complete picture having to do so much scrolling. What to do?

3. Head into the Text/HTML view and take a look at the embed code. Example:

<iframe src=”https://docs.google.com/spreadsheets/d/1cSxj4uTej4BfUwkZid0CO_
NmpcRuu5VnG08L8CZ90-w/pubchart?oid=2091869464&format=interactive””></iframe>
Note: Sometimes you will have size attributes in the embed code but in my experience most times they do not appear.

4.. Add size attributes or change existing size attributes and continue to tweak until the size fits your page. Here is an example of the size attributes and the resulting layout on an early attempt.

<iframe src=”https://docs.google.com/spreadsheets/d/1cSxj4uTej4BfUwkZid0CO_NmpcRuu5VnG08L8CZ90-w/pubchart?oid=901695064&format=interactive” width=”650″ height=”400″></iframe>

The width of 650 is too wide for the WordPress theme I am using. The arrow indicates how far into the right side bar the image extends. Since the height of the chart appeared to work, it is just a matter of tweaking the width.

It seems that a width of 530 px is the best for my current page. Here is the final embed code. There is minimal scrolling and the whole chart is visible.

html, javascript, css

Friday, January 17, 2020