[Question]Applying Flet PlotlyChart and ElevatedButton onclickEvent

[minseob2996]

Question

I try to flet.dev ElevatedButton onClick sample code in https://flet.dev/docs/controls/elevatedbutton
Unlike ft.text(), there is no ft type in the variable graph
When the button is clicked by user , I want the PlotlyChart to print out to the flet web
How can I execute Plotly Chart to Elevated Button?

Code sample

def main(page: ft.Page):
    page.title = "Elevated button with 'click' event"
 
    def DrawLineGraph(e):
        fig = px.line(getAPIData(), x='stationname', y='covalue')
        fig.update_layout(width=1100,height=690)
        graph = PlotlyChart(fig, expand=True)
        page.update()

    def DrawBarGraph(e):
        fig = px.bar(getAPIData(), x='stationname', y='covalue')
        fig.update_layout(width=1100,height=690)
        graph = PlotlyChart(fig, expand=True)
        page.update()

    b1 = ft.ElevatedButton("line graph", on_click=DrawLineGraph)
    b2 = ft.ElevatedButton("bar graph", on_click=DrawBarGraph)
    graph = ft.PlotlyChart()    #What should I do about this part?
    
    page.add(b1, b2, graph)

ft.app(target=main)

Error message

Image must have either "src" or "src_base64" specified.

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[heximing]

The below code is just to show an idea. I could not make Plotly work on my machine, so I cannot confirm. But I replaced Plotly with matplotlib, and the code works, so the idea should work.

The idea is to put the chart in a Container. When buttons are clicked, create/modify the chart in the Container, and call update().

import flet as ft
import plotly.graph_objects as go
from flet.plotly_chart import PlotlyChart


def main(page: ft.Page):
    page.title = "Elevated button with 'click' event"

    def DrawPieGraph(e):
        print("Pie Chart button clicked")

        labels = ["Oxygen", "Hydrogen", "Carbon_Dioxide", "Nitrogen"]
        values = [4500, 2500, 1053, 500]

        fig = go.Figure(data=[go.Pie(labels=labels, values=values)])

        a_container.controls.append(PlotlyChart(fig, expand=True))
        a_container.update()

    def DrawBoxGraph(e):
        print("Box Chart button clicked")

        x = ['day 1', 'day 1', 'day 1', 'day 1', 'day 1', 'day 1',
             'day 2', 'day 2', 'day 2', 'day 2', 'day 2', 'day 2']

        fig = go.Figure()

        fig.add_trace(go.Box(
            y=[0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3],
            x=x,
            name='kale',
            marker_color='#3D9970'
        ))
        fig.add_trace(go.Box(
            y=[0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2],
            x=x,
            name='radishes',
            marker_color='#FF4136'
        ))
        fig.add_trace(go.Box(
            y=[0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5],
            x=x,
            name='carrots',
            marker_color='#FF851B'
        ))

        fig.update_layout(
            yaxis_title='normalized moisture',
            boxmode='group'  # group together boxes of the different traces for each value of x
        )

        a_container.controls.append(PlotlyChart(fig, expand=True))
        a_container.update()

    a_container = ft.Row()  # to store the PlotlyChart

    b1 = ft.ElevatedButton("Pie Chart", on_click=DrawPieGraph)
    b2 = ft.ElevatedButton("Box Chart", on_click=DrawBoxGraph)

    page.add(ft.Row(controls=[b1, b2]), a_container)


ft.app(target=main)

The below code use matplotlib, which I confirmed working.

import flet as ft
import matplotlib
import matplotlib.pyplot as plt
from flet.matplotlib_chart import MatplotlibChart
matplotlib.use("svg")


def main(page: ft.Page):
    page.title = "Elevated button with 'click' event"

    def DrawPieGraph(e):
        print("Pie Chart button clicked")

        plt.close('all')
        fig, ax = plt.subplots()
        fruits = ["apple", "blueberry", "cherry", "orange"]
        counts = [40, 100, 30, 55]
        bar_labels = ["red", "blue", "_red", "orange"]
        bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"]
        ax.bar(fruits, counts, label=bar_labels, color=bar_colors)
        ax.set_ylabel("fruit supply")
        ax.set_title("Fruit supply by kind and color")
        ax.legend(title="Fruit color")

        chart = MatplotlibChart(figure=fig, expand=True, isolated=True, original_size=True)

        a_container.content = chart
        a_container.update()

    def DrawBoxGraph(e):
        print("Box Chart button clicked")

        plt.close('all')
        fig, ax = plt.subplots()
        fruits = ["AAAA", "BBBB", "CCCC", "DDDD"]
        counts = [55, 33, 77, 11]
        bar_labels = ["red", "blue", "_red", "orange"]
        bar_colors = ["tab:red", "tab:blue", "tab:red", "tab:orange"]
        ax.bar(fruits, counts, label=bar_labels, color=bar_colors)
        ax.set_ylabel("fruit supply")
        ax.set_title("Fruit supply by kind and color")
        ax.legend(title="Fruit color")

        chart = MatplotlibChart(figure=fig, expand=True, isolated=True, original_size=True)

        a_container.content = chart
        a_container.update()

    a_container = ft.Container()  # to store the PlotlyChart

    b1 = ft.ElevatedButton("Pie Chart", on_click=DrawPieGraph)
    b2 = ft.ElevatedButton("Box Chart", on_click=DrawBoxGraph)

    page.add(ft.Row(controls=[b1, b2]), a_container)


ft.app(target=main)