How to create an annotated line graph in Google Sheets

Animated e-junkie sales chart in Google Sheets
Animated line chart in Google Sheets

This post looks at how to create a more advanced line graph in Google Sheets, with comparison lines and annotations, so that the viewer can absorb the maximum amount of insight from a single chart.

For fun, I’ll also show you how to animate this line graph in Google Sheets.

Want your own copy of this line graph?
Click here to access your copy of this template >>

This chart was originally developed for The Write Life during their 4-day product sale earlier this year. It featured as part of a dashboard that was linked to the E-junkie sales platform and displayed sales data in real-time:

Google Sheet e-junkie real-time dashboard
Google Sheet e-junkie real-time dashboard

Continue reading How to create an annotated line graph in Google Sheets

Funnel charts in Google Sheets using the chart tool, formulas and Apps Script

Let’s talk about funnel charts in Google Sheets.

The charts themselves are a bit of a novelty. Yes, they’re aesthetically pleasing because of that resemblance to a real-world, tapering funnel, which reinforces their message, but a plain ole’ bar chart would be equally suitable and actually easier to read data from (because the bars have a common baseline).

However, they throw up some interesting techniques in Google Sheets and for that reason, merit this long article.

We’ll build them using tricks with the chart builder tool, then with two different types of funky formula and finally, and best of all, we’ll build a tool using Apps Script, as shown in this image:

Funnel charts with apps script in Google Sheets

As with the waterfall charts in Google Sheets, they’re not one of the out-the-box charts available to us, so we have to manually create them with a crafty workaround. Thankfully, they’re relatively simple to create, certainly simpler than the waterfall chart.

For all of these examples, we’ll use this fictitious real-estate dataset:

Google Sheets funnel chart data

Here, I’m imagining the real estate agency collects data relating to their sales funnel, and they want to display it in a funnel chart format.

Click here to open up the Google Sheet template and make your own copy (File > Make a copy...).

Continue reading Funnel charts in Google Sheets using the chart tool, formulas and Apps Script

How to create a waterfall chart in Google Sheets

In this post, we’ll look at how to create a waterfall chart in Google Sheets.

Waterfall charts are real. And useful. They show the cumulative effect of a series of positive and/or negative values on an initial starting value.

The following waterfall chart shows the headcount changes for a department, visually depicting the cumulative effect of the additions and deletions to the start value:

Headcount Waterfall Chart

It shows the number of staff in our department at the start of the year (left grey bar), the number of people added from other departments or as new hires (green bars), the number of people who left (red bars) and finally the balance which is the headcount at the end of the year (right grey bar).

The waterfall chart above is relatively easy to create in Google Sheets but does still require some data wrangling to set it up. Notice that all of the bars are above the x-axis (Case 1), which makes the data set up vastly simpler than the case when we have a mix of bars above and below the x-axis, or spanning the x-axis (see Case 2 below).

I’ll show you how to create both of these cases, starting with the easier, positive-bar case.

After creating the simple and complex versions manually with formulas, I’ll show you some Apps Script code to automate the majority of the process and massively speed up creating complex waterfall charts.

Templates are available for all three methods, with links at the end of each section and at the end of this post.
Continue reading How to create a waterfall chart in Google Sheets

Web traffic chart with dynamic banding in Google Sheets

This is a simple but effective technique for adding dynamic bands to your charts, which are useful to highlight specific parts of your chart.

For example, in this chart of website pageviews, I’ve added bands to show weekdays or weekends and make it easier to see the changing trends.

Chart with dynamic banding

Continue reading Web traffic chart with dynamic banding in Google Sheets

Excel tutorial: build a dynamic bump chart of the English Premier League

Premier League team performance

Find your team: See the history of each of the 47 teams in the Premier League here.

In this post I’ll show you how to create a dynamic bump chart like the one above, using historical data for the English Premier League going back to 1992-93 when it was created.

Continue reading Excel tutorial: build a dynamic bump chart of the English Premier League

Multi-series d3 line chart

Check out the full chart and code here.

Continue reading Multi-series d3 line chart

Creating a dynamic d3 visualization from the GitHub API

GitHub Repo Visualization
Try out the GitHub Repo Visualization here

As someone who works with data on a daily basis, I’m always impressed and inspired by interactive charts and dashboards. I’ve built plenty of dynamic dashboards within Excel (here) and, more recently, within Google spreadsheets (here, here and here), but never my own custom web charts. I’ve wanted to learn d3 for a while, but until recently didn’t have the necessary Javascript chops to do this.

This year I’ve focussed on deepening my coding skills, so I’ve finally been able to give d3 a proper go. And let me tell you, it’s brilliant. It’s exciting to hook up a data source to a custom chart that changes dynamically, and be able to see it on a live website, which other people can view.

In this post, I’m going to discuss the steps I took to create this d3 visualization of the GitHub API.

The app is live here!
Continue reading Creating a dynamic d3 visualization from the GitHub API