Trying to add graph to my main window that will pop up

Anvil Q&A
1

What I’m trying to do:
I am trying to add a graph to my main window that will pop up when I press on a button.

What I’ve tried and what’s not working:
It seems that I can’t add items to my main Form page, only to the column on the side.
Since the only way to to display graph is by adding it to some container, they can only appear on the side with very limited space.
In the image attached the red arrow mark the only area that I can add elements to.
How can I add a graph in the main window to pop up when pressing on the button in the middle of the screen ( or upper part )?

Screenshot 2024-02-13 at 18.58.24
Screenshot 2024-02-13 at 18.58.241920×1046 178 KB

2

Not sure what you’ve tried yet, so I’ll start with the basics. Have you read through the docs on Navigation: Anvil Docs | Navigation they cover replacing the content of the main form (the main part of the window). You’d be able to add your graph using those same techniques and it would appear in the main part of the form.

1 Like
3

You could use the alert method and put it in a container that is set as the alert’s content.

4

Interesting approach I will try it! thanks!

1 Like
5

Also interesting I will check both options! :slight_smile:

1 Like
6

To help others, here how it is done in alert form ( assume you press on a button to pop it ):

 def create_graph_works(self):
    form = ColumnPanel()
    self.plot_1 = anvil.Plot()
    form.add_component(self.plot_1)

    form.spacing_above = "small"
    form.spacing_below = "small"
    form.role = "card"
    form.style = {"border": "1px solid #ccc", "padding": "5px", "border-radius": "5px"}

    # Assuming x and y are your datasets
    x = [2019, 2020, 2021, 2022]
    y = [54.24, 45.87, 49.77, 39.2]
    fig = go.Figure(data=go.Scatter(x=x, y=y, mode='lines', line=dict(color='green')))
    fig.update_layout(template="plotly_dark")

    self.plot_1.figure = fig
    return form

def button_3_click(self, **event_args):
    """This method is called when the button is clicked"""
 
    feedback_form = self.create_graph_works()
    anvil.alert(content=feedback_form, title="Insight Graphs for Kansas", large=True, buttons=[])
    pass