Search code examples
pythonuser-interfacecallbackdashboardtaipy

Taipy Callbacks could not match the selection with the wanted chart to appear

I want to create a list of selections such as ["Global suicides by year", "Global suicides by genders"] as the picture shows below. As I want to click on the selection, the corresponding chart will then appear. For example, if I click on Global suicide by Year, only the line chart will appear. But, it seems to me that I could not match the selection with the wanted chart to appear. What is your solution to this?

I have been trying the control feature on Taipy GUI and having a problem with the selector. How can I implement this?

#data
bar_data = pd.read_csv('barchartdata.csv', sep=',')
line_data = pd.read_csv('linechartdata.csv', sep=',')

# the initialization of selector
selection = "Global Suicides per Year"

page= ("""
<|toggle|theme|>
<|{selector}|toggle|lov=Global Suicides per Year;Global Suicides 
per Gender|>


<|{line_data}|chart|x=year|y=Total suicides per 
100k|title=Worldwide Suicide (per 100k) by Year|>


<|{bar_data}|chart|x=year|y[1]=suicides/100k 
pop_female|y[2]=suicides/100k pop_male|type=bar|title=Worldwide 
Suicide (per 100k) by Gender|>

""")
Solution

  • The render property of charts can be used to specify which chart to display. A chart will render if the Python expression returns 'True'. This statement can be anything. Here, we will display a chart or the other, depending on the selection. It will be automatically recalculated when the 'selection' changes in our case.

    import pandas as pd
from taipy.gui import Gui, Markdown

# initialization of Data Frames to display
bar_data = pd.read_csv('barchartdata.csv', sep=',')
line_data = pd.read_csv('linechartdata.csv', sep=',')

# the initialization of selection
selection = "Global Suicides per Year"

# the Markdown object is optional (it is just good practice)
# part are used here to render or not a part of the page (depending on some Python expression) 

page_md = Markdown("""
<|{selection}|toggle|lov=Global Suicides per Year;Global Suicides per Gender|>

<|{line_data}|chart|render={selection=='Global Suicides per Year'}|x=year|y=Total suicides per 100k|>

<|{bar_data}|chart|render={selection=='Global Suicides per Gender'}|x=year|y[1]=suicides/100k pop_female|y[2]=suicides/100k pop_male|type=bar|>
""")

# Run the Gui
if __name__=="__main__":
    gui = Gui(page_md)
    gui.run()

    The 'part' control also has a 'render' property that enables an entire part of the page to be shown. In the code below, the two charts are put in a part that will render if the Python expression returns 'True'. You can also add any text, images, or other visual elements in these parts.

    page_md = Markdown("""
<|{selection}|toggle|lov=Global Suicides per Year;Global Suicides per Gender|>

<|part|render={selection=='Global Suicides per Year'}|
Text and visual elements that will be displayed if:
selection=='Global Suicides per Year'

<|{line_data}|chart|x=year|y=Total suicides per 100k|>
|>

<|part|render={selection=='Global Suicides per Gender'}|
Text and visual elements that will be displayed if:
selection=='Global Suicides per Gender'

<|{bar_data}|chart|x=year|y[1]=suicides/100k pop_female|y[2]=suicides/100k pop_male|type=bar|>
|>
""")