Create a Live Dashboard with Google Sheets

Okay, this is a bit of a cheeky title as this guide won’t cover how to make a full dashboard. But rather how to make a live bar graph connected to Google Sheets. This means you will have a bar graph on a website which will update live when you change values in your Google Sheet You can check out what the final result will look like. You can take this knowledge and with a bit more learning of front-end development, you can extend it to make a complex organizational dashboard. Let’s Get Started! We will be covering three tools that make this simple: Create a Google Sheet API using API Spreadsheets Creating an HTML file with the bar graph code using Any Chart and connecting to the Google Sheets Data Making the HTML file live by deploying it on GitHub using GitHub Pages Create a Google Sheet API using API Spreadsheets 1. Create a Google Sheet in your Google Account We are going to create one with the Team and Wins of the Teams that have won the Super Bowl 2019. Sample Google Sheet 2. Convert this to an API Sign Up for an account on API Spreadsheets Click on Google Sheets and select your SuperBowlWinners Google Sheet. After you have selected the file you should see the following 3. Change Data Format & Copy the URL Due to the Any Chart library we are using to make the graph, we need our data in a certain format. So we are going to change the Data Format to Matrix and Copy the API URL. Keep this URL handy as we will be using it in the next section. Creating HTML File with Bar Graph Code using Any Charts This section is paraphrased from the Any Chart website so feel free to read that tutorial for a more in-depth look into this section. You can also check out the full HTML file at my GitHub repo: https://github.com/asharma327/LiveBarGraphDemo/blob/master/index.html 1. Make an empty folder and call it anything you want I will be calling it LiveBarGraphDemo so anywhere you see that in the tutorial change it to what you are calling it 2. Create a file inside the folder called index.html 3. Write the following code in index.html This code sets up the HTML file and references the Any Chart Javascript library that we will be using for our Bar Graph. It also has a

called container with width and height of 100%. This is where our Bar Graph will appear. After the

there is a

Still puzzling over something?