Hands-on Tutorials

The visualization of the data allows us to quickly bring insight. However, it can be difficult to deploy a data visualization solution because it requires most of the time either the acquisition of a license or a server.
In this article, we will see how to use free tools to build a dashboard to present some fake sales, you can download the data here in order to follow the tutorial.
First, we will use Python to feed a Google sheet. Then, we will use Vue.js to create a dashboard using apache Echart and Vuetify. Finally, we will deploy this dashboard on GitHub page using Github action.
Requirements
To follow this guide, you will need to have the followings:
- A Google account
- gcloud command-line tool
- Python 3.7 or greater
- A Github Account
Setting up the Google cloud account
I will use the google cloud command-line tool in order to set up the google cloud account. If you are not familiar with the google cloud SDK, you can find here a quickstart for your platform.
Let’s configure our google cloud project:
- Create a new project with:
gcloud create project <project_id>
- Set the newly created project as default project for other commands :
gcloud config set project <project_id>
-
Enable google sheet API and Drive API :
gcloud services enable sheets.googleapis.com
gcloud services enable drive.googleapis.com
- Create a service account for the python script :
gcloud iam service-accounts <name_of_service_account>
-
Create and download credentials from the service account :
gcloud iam service-accounts keys create <local_path_to_download.json> --iam-account <name_of_service_account>@<project_id>.iam.gserviceaccount.com
- Create an API key for the Vue.js app:
- Navigate to the APIs & Services→Credentials panel in Cloud Console
- Select Create credentials, then select API key from the dropdown menu.
- The API key created dialog box displays your newly created key, save it for later use.
- Then click on edit and on the restriction API section check the restrict key option and select Google sheets API then click on save.
Next, we will create a script to push our dashboard data to Google sheets using Python.
Pushing a DataFrame to Google sheets
The Python script will require some dependencies in order to push data to Google. Install them with:pip install pandas pygsheets
Then create a directory and a Python file and copy the following script.
In this script, we first initialize the Google sheets client with the credentials file created earlier. Then we create a brand new Google sheet, we share it with our google account so we can visualize it in google drive. We also make our sheet public so that it can be accessed by the Vue app. Next, we create 3 sheets and for each, we upload a pandas data frame. Finally, we print the sheet id, save it as we will need it to build the Vue.app in the next section.
Building the Dashboard
To build the Dashboard we will use Vue.js without any build tool to keep it simple. First, start by creating a dist
folder in the root directory, inside create an index.html file with the following content.
Let’s break the code, the Vue app is defined from line 161 to line 245. At first, there is a data section where we declare the object that will contain the data from Google sheet as well as an array that contains the metrics matching our Google sheet data.
Next, we have a function that allows us to recover the data via the Google sheets API. This method uses the class defined from line 80 to line 160. This class is initialized in the mounted section, it takes in parameter the id of the sheet and your API key, so make sure to replace values with your own.
Then in the computed section, we declare our chart variables. As you can see, they all follow the same pattern. We start by referencing the sheet where the data is located and then we declare the columns, rows, and the different settings for each chart.
Finally, we use the data visualization library e-charts in HTML from line 26 to line 45 to render our charts from the variables that we have declared. Now if you open your index.html file you should see a dashboard like this:

Deploying on GitHub page
We are now going to deploy our dashboard on GitHub page using Github actions. For this, you must create a new directory on your GitHub account. Then, you will need to create a GitHub personal access token to be able to use the GitHub action, click here to see how to generate one.
You will need to select the scopes you’d like to grant this token, make sure to select the repo
checkbox to be able to deploy on GitHub page.
Now you need to create a secret inside your GitHub repository so the deploy action can use the token you have created. Check the official documentation here to see how to proceed. Name the secret ACCESS_TOKEN.
Once you have configured it you can create a directory tree .github/worflows
inside the root folder of your project that will contain the following main.yml
file.
Now that you have defined your workflow, push your project on your GitHub distant repo. If everything worked fine you can see the dashboard at the following URL : https:/<your-github-username>.github.io/<repo-name>/.
Finally, go to your credentials on Google cloud console click on edit your API key and in the Application restrictions section:
- check the option: HTTP referrers (web sites)
- click on add an item
-
in the input form type the URL of your Github page : https:/<your-github-username>.github.io/<repo-name>/.
Drawbacks & limits
API keys have been used here as an authentication method to call Google APIs. This method only allows you to read sheets that are public so do not use this tutorial to deploy sensitive data.
For such usage, you will have to go through the oauth2 authentication protocol as shown in this guide.
Conclusion
In this article, we saw how to deploy a simple dashboard powered by Google sheet. This dashboard reads the data that is in the referenced sheet. If you want to update the data, you just have to update the Google sheet workbook and it will be reflected on the dashboard by clicking on the refresh button. Finally, the deployment of the dashboard is automated thanks to GitHub action.
If you are interested in sending your dashboard or reports by email check out this article.
Automate Your Reporting Process With Python, Vue.js, And Gmail