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.

{% embed youtube.com/embed/TEUXht5kxgM %}

Anvil is free to use. Start building now!

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.

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

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 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 which gets our graph

Running our app

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

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.

Build Better Python Web Apps With Your Data

Anvil’s Data Files In 100 Seconds