Chapter 8:
Display headline figures

So far, we’ve built a dashboard that plots data from four different data sources.

Let’s add some headline numerical statistics to the top of our dashboard.

Step 1: Construct the UI

Drag and drop four Cards Card icon along the top of your dashboard, and set the container property of each of these to full_width_row.

Drop a Label Label icon into each of the four cards. In the Properties Panel, make each of your labels bold, and change the text of each Label to the following:

  • Highest revenue
  • Highest signups
  • Top marketing strategy
  • Max temp: Cambridge

Your dashboard should look something like this:

Screenshot of dashboard with labels for headline statistics

Then, drop another label into each card, and give each label a name:

  • revenue_label
  • signups_label
  • marketing_label
  • weather_label
Screenshot of naming labels in cards at top of dashboard

Step 2: Populate the Labels

Now, let’s populate those labels with our headline numerical statistics. We’ll amend each of our build_x_graph functions to populate our headline statistics.

First, add these lines to your build_revenue_graph function:

max_revenue = sorted(db_data, key=lambda x: x['amount'], reverse=True)[0]
self.revenue_label.text = f"{max_revenue['date']:%d %b %Y}, {max_revenue['amount']:,}"

Add these lines to your build_signups_graph function:

max_signups = sorted(signups, key=lambda x: x['signups'], reverse=True)[0]
self.signups_label.text = f"{max_signups['date']:%d %b %Y}, {max_signups['signups']}"

Add these lines to your build_marketing_graph function:

max_hits = sorted(marketing_data, key=lambda x: x['count'], reverse=True)[0]
self.marketing_label.text = f"{max_hits['strategy']}, {max_hits['count']} hits"

And finally, add these lines to your build_weather_graph function:

max_temp = sorted(self.temp_data, key=lambda x: x['temp'], reverse=True)[0]
self.weather_label.text = f"{max_temp['temp']:.1}"

Click run and you’ll see your headline numerical statistics populated along the top of your dashboard!

Final app with the four plots and the headline labels

Congratulations! You’ve built and deployed a dashboard using data from inside Anvil and from external sources.

You now have a solid foundation in Anvil.

Your app is already live on the internet. Go to Publish App in the Gear Menu gear icon for details.

You can also use the following link to clone the finished app and explore it yourself:

What next?

Head to the Anvil Learning Centre for more tutorials, or head to our examples page to see how to build some complex apps in Anvil.

Congratulations! You’ve built and deployed a dashboard using data from inside Anvil and from external sources.

You now have a solid foundation in Anvil.

Your app is already live on the internet. Go to Publish App in the Gear Menu gear icon for details.

You can also use the following link to clone the finished app and explore it yourself:

{{}}

What next?

Head to the Anvil Learning Centre for more tutorials, or head to our examples page to learn how to build some complex apps in Anvil.