Build Better Python Web Apps With Your Data

Anvil’s Data Files In 100 Seconds

Coding With Ryan
Anvil

--

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.

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

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():p
# 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.

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.

Want to receive more good quality Python articles?

Follow me on Medium.

New to Anvil?

If you’re new to Anvil, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks — just build it all in Python.

Yes — Python that runs in the browser. Python that runs on the server. Python that builds your UI. A drag-and-drop UI editor. We even have a built-in Python database, in case you don’t have your own.

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

--

--

Coding With Ryan
Anvil
Editor for

I’m Ryan and I'm a software developer. I write about Python, Anvil and developer relations. Follow me to see high quality tutorials.