Interactive charts PlotlyChart, PieChart, LineChart

116 Views Asked by At

Good afternoon colleagues!

The question is: I’m making an application for myself that displays crypto exchange statistics. Stop at the graph output stage. Everything is displayed using PlotlyChart, but is not interactive, which significantly limits the information content of the graphs themselves. Is it possible to somehow make them interactive? Or am I doing something wrong? Photo of an example graph. enter image description here

And here is an example of how Plotly displays the same type of graph: enter image description here enter image description here These two screenshots show everything, i.e. you can either take into account or ignore some data, and when you hover over a sector, more detailed statistics are shown.

I tried to display a PieChart chart, but for some reason I got an error:

Unhandled error processing page session 054db3bc-f572-42c1-be03-8cd60e4f84c6: Traceback (most recent call last):
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_runtime\app.py", line 357, in on_session_created
    session_handler(page)
  File "D:\IT_Trading\1.Мой проект\Robofin_io\app.py", line 16, in __init__
    self.init_helper()
  File "D:\IT_Trading\1.Мой проект\Robofin_io\app.py", line 20, in init_helper
    self.page.go("/Statistics")
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\page.py", line 549, in go
    self.update()
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\page.py", line 290, in update
    r = self.__update(self)
        ^^^^^^^^^^^^^^^^^^^
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\page.py", line 422, in __update
    commands, added_controls, removed_controls = self.__prepare_update(*controls)
                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\page.py", line 447, in __prepare_update    
    control.build_update_commands(
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\control.py", line 396, in build_update_commands
    innerCmds = ctrl._build_add_commands(
                ^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\control.py", line 451, in _build_add_commands
    childCmd = control._build_add_commands(
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\control.py", line 451, in _build_add_commands
    childCmd = control._build_add_commands(
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\control.py", line 451, in _build_add_commands
    childCmd = control._build_add_commands(
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  [Previous line repeated 6 more times]
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\control.py", line 440, in _build_add_commands
    command = self._build_command(False)
              ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\control.py", line 467, in _build_command
    self._before_build_command()
  File "C:\Users\root\AppData\Local\Programs\Python\Python311\Lib\site-packages\flet_core\plotly_chart.py", line 119, in _before_build_command
    svg = self.__figure.to_image(format="svg").decode("utf-8")
          ^^^^^^^^^^^^^^^^^^^^^^
AttributeError: 'PieChart' object has no attribute 'to_image'

The part of the code that throws the error above:

    def click_graph(self):
        normal_radius = 50
        hover_radius = 60
        normal_title_style = TextStyle(
            size=16, color=colors.WHITE, weight=FontWeight.BOLD
        )
        hover_title_style = TextStyle(
            size=22,
            color=colors.WHITE,
            weight=FontWeight.BOLD,
            shadow=BoxShadow(blur_radius=2, color=colors.BLACK54),
        )

        def on_chart_event(e: PieChartEvent):
            for idx, section in enumerate(chart.sections):
                if idx == e.section_index:
                    section.radius = hover_radius
                    section.title_style = hover_title_style
                else:
                    section.radius = normal_radius
                    section.title_style = normal_title_style
            chart.update()

        chart = PieChart(
            sections_space=0,
            center_space_radius=40,
            on_chart_event=on_chart_event,
            expand=True,
        )

        pnl = []

        graph_data = data_active()
        [pnl.append(graph_data[sym]) for sym in graph_data]
        for sym in graph_data:
            percent = round((graph_data[sym] * 100 / sum(pnl)))
            pie_chart = PieChartSection(
                percent,
                title=f"{sym} {percent}%",
                title_style=normal_title_style,
                radius=50
            )
            chart.sections.append(pie_chart)

        return chart

The graph is displayed in the following object: Row --> Container-->Column-->Column-->Container-->Column-->Container-->Graph

0

There are 0 best solutions below