Receive a brief introduction to interacting with the Google Charts API and learn how to easily do so via Python.
- [Instructor] Okay, I want to show you something pretty cool. Creating dynamic charts from your data is actually a lot easier to do than you might think. I'm at the Google Charts Gallery here. If we take a look, you can see that there are many different ways that you can present data. For this video, we're going to look at column charts, so we'll go to that chart. All of these charts are set up to take in data in similar ways, so once you understand how to deal with column charts, it should be pretty easy to expand it to other charts. At first glance, this might look kind of intimidating. There are so many options available here and so many different ways to do things.
You might start using some of these options as you get better at things, but for now, we'll start with just a simple column chart that doesn't do much except for create some bars. So, let's do this by building up a template that we can use to create web pages with a chart in it. The first thing that we're going to need to do is to load the Google Charts package, so we'll go to this link, load the Google Charts Library, and we can see here what we need to include in our header in order to do that. So, we'll return to Visual Studio Code, where we have our script that we created in the last video, and we'll import a helpful function from string called Template, so let's import Template.
This will help us more easily create a reusable template, so let's start using this. Let's create a variable called html_string, and let's use the Template to create that. We'll create triple quotes here so that we can create new lines in our string more easily, and let's create a basic html file, so we'll start with html. We'll create a head tag and we'll close that tag.
We'll also create a body tag, close the body tag, and then, of course, close the html tag, and end our string. So, let's insert that script header that we copied from Google Charts, and let's remove this dot dot dot here, since we don't need that, and now we're ready to insert the data that we have into the chart.
So, to do this, let's return to the Google Charts documentation, and let's scroll down here to data tables and data views, and then we're going to use arrayToDataTable, so our data is in a list, or an array, and we want to convert that to a data table, so let's copy this first example here. Return to Visual Studio Code, and we will paste that into the script header, but before we do that, let's create a function called drawChart that we can use to actually draw our chart, so let's paste our data into this function, and let's remove this dummy data with variables that we want to substitute, so we'll substitute the header here with something we'll call dollar labels, and then we'll substitute the actual data here with something we'll call dollar data.
Now that we have a place for the data, we need to actually draw the chart, so let's return once again to the documentation. Let's scroll up here to the top and let's click on draw the chart. This shows us the commands that we need to use to instantiate and draw our chart, so let's copy this, return to Visual Studio, and let's put this in our drawCharts function, and let's clean this up a little to work for us, so we're doing a basic chart.
We don't have any options, and we're also going to create a column chart and not a pie chart, so let's create that, and then, we also need to include a div here in the body that we can draw our chart in, so let's copy that. Let's paste that in the body. Let's also make the chart just a little bit bigger, so we'll make it 800 by 600, so that it looks a little better.
Alright, so now we're almost ready to go. We just need to substitute our actual labels and data for these variables in this string, so to do that, we're going to need to create the actual data, so let's start with a variable we'll call chart_data_string. Let's instantiate that to a blank string for now. Now, we already have this data from earlier stored in this column_chart_data list, so let's loop over that list, for row in column_chart_data, but we don't want the header row, because that, we're going to deal with separately, so we'll say one colon, and then for each row here, we want to add it to our chart_data string.
We can easily do that using plus equals, and then we'll use percent s to stand for substitution in our string. We'll have a comma and a new line, and then we'll insert each row into that string. Now we're ready to get our completed html here, so we'll substitute the data that we have into the string, so we'll call it html_string.substitute, and we'll tell it we want to substitute labels, so we have these variables here, labels and data, that we want to substitute.
Our labels will equal the column_chart_data and the first element of it, so zero, and our data will equal our chart_data string, so let's save that, and down here, we're writing out a file called column_chart.html with that data, so let's go to the command prompt and let's run our script, readInData, and now, if we go to the file explorer, we can see we have a file here called column_chart, and let's open that in Chrome, and we can see that it's created a nice column chart showing us the difference of each run from the average.
- Driving API calls with scripting
- API authentication
- Parsing API data
- Automating reports with Google APIs
- Using the Google Charts and Sheets APIs
- Preparing test sites with Selenium WebDriver
- Analyzing test data with scripting
- Generating pseudo input data for testing