Build Better Python Web Apps With Your Data

Do you want a quick introduction to Anvil’s Data File service? Then check out our new 100 second video where we plot data from a CSV file using Pandas and Anvil’s Data Files service.

Anvil is free to use. Start building now!

Try Anvil

Prefer text to video? Read on to learn how to use Data Files

Python is great for working with data. With Anvil you can build web apps to interact with datasets and machine-learning models entirely in Python.

In this article, I’ll show you how to use Anvil’s Data Files service to attach static data to your web app. We’re going to upload a CSV dataset and plot the data from it using Pandas. Then, we’ll display the plot online for everyone to see - all in Python.

Contents

Uploading our CSV

We start by uploading our dataset into our app’s Data Files service. I’m using some example data of Apple’s stock price over time which you can download here:

Download Apple's stock price data
Adding the CSV data to our app

Adding the CSV data to our app

Plotting our data

Now, let’s write a server function called plot_data to plot our CSV data. We can use the data_files object to get the path to the file we just uploaded, and load it into Pandas.

@anvil.server.callable
def plot_data():
  # Read the CSV file into a DataFrame using the Data Files path
  df = pd.read_csv(data_files['dataset.csv'])

We’ll use Plotly’s Pandas backend to plot our dataset as a line graph and return that figure from our server function.

@anvil.server.callable
def plot_data():
  # Read the CSV file into a DataFrame using the Data Files path
  df = pd.read_csv(data_files['dataset.csv'])

  # Then plot the graph using the Plotly backend
  df = df.set_index('Date')
  fig = df.plot.line(title="APPL Stock Price")
  return fig
Writing server-side code to plot our data

Writing server-side code to plot our data

Building our front-end

Now let’s build a front-end to display our graph. Drag and drop a Plot component onto the page from the toolbox on the right.

Dragging and dropping a Plot component

Dragging and dropping a Plot component into our form

Then switch to the app’s front-end Python code. In the __init__ method, we call the plot_data() server function we created earlier and set our plot’s figure property to the graph that is returned.

def __init__(self, **properties):
  # Set Form properties and Data Bindings.
  self.init_components(**properties)

  # Any code you write here will run when the form opens.
  self.plot_1.figure = anvil.server.call('plot_data')
Writing the front-end code

Writing the front-end code which gets our graph

Running our app

When we run the app, it will load the dataset and plot it with Pandas.

Running our app to test it

Running our app to test it

You can use Anvil’s Data Files to load and run machine learning models, complicated datasets, and more. To find out more about Anvil and using Data Files, check out the links below.

Learn More

Why not have a play with the app builder? It’s free! Click here to get started:

Get building

Get Started with Anvil

Use our drag and drop app builder to create an app that collects feedback and sends it to you by email, and publish it online, in ten minutes or less.

Nothing but Python required!
Go

A fully-featured customer service ticketing system

See how we built a large-scale, shippable ticketing system with custom designs entirely in Anvil.
Go

Build a Web App with Pandas

In this tutorial, we will walk through the process of building a dashboard using Pandas.
Go

A Guide to Styling Apps with CSS

This guide teaches you the basics of using CSS in Anvil to style your web apps
Go

Deploying a machine learning model with Anvil

In this short tutorial, we’ll use Anvil to turn an ML model into an interactive web application.
Go