Chapter 2:
Write client-side Python

Time to create our first plot. We’ll display a bar chart by writing client-side Python code that runs in the browser.

Step 1: Go to the Code view

Go to ‘Code’ view in the Form Editor:

The location of code view in the Anvil Editor

This is where you write your client-side Python code that runs in the browser.

Step 2: Plot some data

We’ll use Plotly to create our plots. You’ll notice that Plotly is already imported at the top of Form1:

import plotly.graph_objects as go

Let’s write a Python function to plot our first bar chart.

Add a build_revenue_graph function to your client-side code:

  def build_revenue_graph(self):
    self.plot_1.data = go.Bar(y=[100,400,200,300,500])

We want to build this graph when our app first opens, so add this line to the the __init__ method of your form:

  # Any code you write here will run before the form opens.
  self.build_revenue_graph()

Your ‘Form1’ should now look like this:

from ._anvil_designer import Form1Template
from anvil import *
import plotly.graph_objects as go

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    
    # Any code you write here will run before the form opens.
    self.build_revenue_graph()
    
  def build_revenue_graph(self):
    self.plot_1.data = go.Bar(y=[100,400,200,300,500])