How To Easily Add Website Color Charts Using Google Charts [VIDEO]

In this article I'm going to show you how to leverage Google Charts on your Duda website. It's easier than you might think AND if your website needs to display data along with charts or graphs, I highly recommend you embed a Google Chart rather than simply uploading a screenshot or image of a chart. (Video walkthrough at the bottom.)

Hi, I'm Tom Connery, and I build websites for digital marketing agencies and small businesses on the Duda platform? What's Duda? It's the secret web design platform that many agencies use to provide responsive and affordable websites for their clients. 



Before I get started, I want to shout out and thank all of the new members of the Learn Duda Community. That's Jeremie, Ewhyn, Kathryn, Cara, Harvey, Todd, Max, Lacey, Brian, Raj, Leighton, Ramy, and more! If you're curious about learn duda, please visit community.learnduda.com where my goal is to support and promote Duda as a website builder. Learn Duda is all about education and support to help people with Duda website building.



So, google charts or graphs - what is it?

Google chart tools are powerful, simple to use, interactive, and free.

The charts are based on pure HTML5/SVG technology where NO PLUGINS are required in order to display them. Charts can be dynamic as you can ingest data from Google Sheets as well as from other sources. And what I love about it, is you're using code to embed data and information that's interactive. Not only is this better from a user experience perspective, but it's google code! Do you think google chart data might help in ranking if you're trying to communicate specific data points or information that people are searching for? Sure, it should. And it has to be better than simply uploading a screenshot of an Excel chart or some other image and using only an alt image tag to describe what the user is seeing.



Let's add a simple Google chart. Please note that in this walkthrough, you'll need to access dev mode in Duda ( look for the </> icon ) where we'll be making additions to the home-head-section.html file. We will also be going into the dev editor for the HTML widget.



In order to leverage Google Charts, you'll need to add some script code to the head section for whatever page is going to have Google Charts embedded within them. In my example, we're using the home page of the website.

First, you'll need to copy/paste the loader script into your page header. This is the same no matter what type of chart you want to use. Please click the </> icon or button now up toward the right side of the Duda header or top row menu to enter Dev Mode.


Copy/Paste:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>



Next, you'll want to locate or identify a chart that you'd like to initially embed or test with. In my example, I'll use a Google's basic pie chart .



Click on the pie chart page and you'll see another script that you'll need to embed in the page header. Note, you do not need to include the loader script more than once so leave that code at the top of the header.



For this second snippet of code, you only need to copy/paste the script portion just below the loader.js line. Check it out in the example below: