Can we integrate an advanced chart component like Echart into Flet?

[liuzhuoling2011]

There is a need for data chart analysis in the development process, but the current charts are too simple. Can we integrate an advanced set of chart components, similar to Echart?

Perhaps Pychart is a very good choice.

[liuzhuoling2011]

up

[ndonkoHenri]

Sorry to say that, but I think you should not expect every Python lib to be integrated into Flet.
Flet is based on Flutter, which is for sure not built to render Python stuffs (ex: pygame or tkinter app).
The integration of matplotlib and plotly was made possible by the fact that they return images, and Flet/Flutter has a control/widget for that.

Is that perhaps the case for pyechart? if not, I fear its integration might not be possible.

[baseplate-admin]

Is that perhaps the case for pyechart? if not, I fear its integration might not be possible.

Echarts is a apache software that returns SVG. If flet supports svg, it should support apache echarts too :)

[ndonkoHenri]

Seems like Pyechart renders its charts mainly(only?) in HTML. One could also obtain a PNG image from the rendered HTML by using the snapshot-selenium pypackage - but in this case, the chart's interactivity is lost.
I couldn't find any point related to SVG, but Flet's Image control supports both SVG and png, so you can use that for the display of these charts (non-interactive) in your Flet application.

Do you think that the WebView Control could be of help for the proper display of the interactive charts? (atm it is mobile-only, issue)

[baseplate-admin]

ECharts has provided the SVG renderer as an additional option. You can specify the renderer parameter as 'canvas' or 'svg' when initializing the chart.

Source

But i dont think we can use pyechart directly, we have to support echarts. But setting apache echarts as a process is going to be a pain.

Overall i dont have a good way to solve this problem :) Unless we make something (chart library) for flet

[ndonkoHenri]

I made use of the image generated from the code provided here and simply had it display in the Flet app using the Image control. As I mentioned before, interactivity is lost.

Code:

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.render import make_snapshot
import flet as ft

from snapshot_selenium import snapshot


def bar_chart() -> Bar:
    c = (
        Bar()
        .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
        .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
        .reversal_axis()
        .set_series_opts(label_opts=opts.LabelOpts(position="right"))
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-测试渲染图片"))
    )
    return c


def main(page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    make_snapshot(snapshot, bar_chart().render(), "assets/test.png")
    page.add(ft.Image("test.png", error_content=ft.ProgressRing()))


ft.app(main)

[pychans]

In this case, webview is a good solution, but the desktop version has been waiting for a long time.

[liuzhuoling2011]

Now Support iOS, Android, MacOS and Web platforms， Cool～
https://flet.dev/docs/controls/webview