html for charts has error

[shoukewei]

I am trying HTML syntax for create charts, I met the following error.

import pandas as pd

# Read the dataframe
data_path = "https://raw.githubusercontent.com/shoukewei/data/main/data-pydm/gdp_top_six_economies.csv"

data = pd.read_csv(data_path)

from taipy import Gui

line_chart = """
<taipy:chart mode="lines" x="Year" y[1]="United States" y[2]="China" y[3]="Japan" line[1]="dash" color[2]="blue" color[3]="red">{data}</taipy:chart>
"""

Gui(line_chart).run(dark_mode=False)

The following error:

An Error occurred: SyntaxError: Unexpected token (1:75)

However, the following way works well.

from taipy import Gui
from taipy.gui import Html

line_chart = Html("""
<taipy:chart mode="lines" x="Year" y[1]="United States" y[2]="China" y[3]="Japan" line[1]="dash" color[2]="blue" color[3]="red">{data}</taipy:chart>
""")

Gui(line_chart).run(dark_mode=False)

[FlorianJacta]

Thank you for the issue! Taipy views a string as Markdown by default and not HTML (doc). You would need the Html object around your string to interpret it as Html.

[shoukewei]

I use the same data above, and want to create two plots side by side. Markdown syntax is much easier, <|layout|columns= 1 1 |.... But how about HTML, I am trying to use '

` as followings:

layout = {
    "yaxis": {
      # Place the axis on the right
      "side": "left",
      # and give it a title
      "title": "GDP (Current USD)"
    },
    "barmode":"stack"
}

page_charts = Html("""

<center> <h1> GDP of World Top 3 Economies</h1> </center>
<div class="row">
 <div class="column">
  <taipy:chart mode="lines" x="Year" y[1]="United States" 
             y[2]="China" y[3]="Japan" line[1]="dash" 
             color[2]="blue" color[3]="red">
             {data}
  </taipy:chart>
 </div>
 <div class="column">
  <taipy:chart type="bar" x="Year" y[1]="United States" 
             y[2]="China" y[3]="Japan"
             color[2]="blue" color[3]="red" 
             layout="{layout}"> 
             {data}
  </taipy:chart>
 </div>
</div>
""")

There is no error, but it still produces a vertical layout instead of a horizontal layout.

There are just doc. on signal charts with HTML. But I have not found any doc. on the layout or creating dashboard with HTML syntax.

Thanks

[FlorianJacta]

Create a CSS file next to your main script (<main_script>.py) and add these lines in it.

<main_script>.css:

.row {
    display: flex;
}
  
.column {
   flex: 50%;
}

Taipy is looking for this name for your CSS file (<main_script>.css), but you can load any CSS file by selecting it in the GUI with css_file=... (doc).

[shoukewei]

Thanks. It is possible to add a layout or property to specify the row numbers for the charts and column numbers of charts on a row in the main.py directly instead of CSS?

[FlorianJacta]

The R&D is looking into your question; we will come back to you as soon as possible.

[FredLL-Avaiga]

I guess you can use <taipy:layout columns="1 1"> <taipy:chart mode="lines" x="Year" y[1]="United States" y[2]="China" y[3]="Japan" line[1]="dash" color[2]="blue" color[3]="red"> {data} </taipy:chart> ... </taipy:layout>

[shoukewei]

It works well. Thanks

[shoukewei]

But how to add a title to each chart? It will cause an error for the following code:

<taipy:layout columns="1 1">
<center> <h2 style="background-color: #99FF9FF; color:black"> Line Chart of World Top 3 GDP Economies</h2> </center>
  <taipy:chart mode="lines" x="Year" y[1]="United States" 
             y[2]="China" y[3]="Japan" line[1]="dash" 
             color[2]="blue" color[3]="red">
             {data}
  </taipy:chart>
                
<center> <h2 style="background-color: #99FF9FF; color:black"> Bar Chart of World Top 3 GDP Economies</h2> </center>
  <taipy:chart type="bar" x="Year" y[1]="United States" 
             y[2]="China" y[3]="Japan"
             color[2]="blue" color[3]="red" 
             layout="{layout}"> 
             {data}
  </taipy:chart>
</taipy:layout>

[FredLL-Avaiga]

You can encapsulate the content (title and chart) in a div Or add the title on the layout of the chart

[FredLL-Avaiga]

@shoukewei Can we close this ?

[shoukewei]

Yes. The problem was solved. Thank you.

On Wed, Jan 17, 2024 at 5:48 AM Fred Lefévère-Laoide < @.***> wrote:

@shoukewei https://github.com/shoukewei Can we close this ?

— Reply to this email directly, view it on GitHub https://github.com/Avaiga/taipy/issues/257#issuecomment-1895848960, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASFUUJYJF2CWF4PEGDOBPVDYO7JBDAVCNFSM6AAAAAA25PFEYKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJVHA2DQOJWGA . You are receiving this because you were mentioned.Message ID: @.***>

-- Shouke Wei, Ph.D. Principal Scientist Deepsim Intelligence Technology Inc. Adjunct Professor and Postgraduate Supervisor School of Computer and Controlling Engineering, Yantai University School of Mathematics and Statistics, Ludong University Cell: +1 -236-458 1518 Phone： +1 604-764-9395 E-mail: @.*** Company: deepsim.xyz E-learning platform: academy.deepsim.xyz Blog: blog.deepsim.xyz Portfolio: swei.wiki