Streamlit-echarts

andfanilo · June 30, 2022, 12:54pm

You need to convert all obj columns into str because of how Streamlit serializes dataframes with pyarrow

        if canvas_result.json_data is not None:
            objects = pd.json_normalize(canvas_result.json_data["objects"])
            for col in objects.select_dtypes(include=["object"]).columns:
                objects[col] = objects[col].astype("str")

andfanilo · June 30, 2022, 12:56pm

Hey! Not sure I admit I’m not a superuser of ECharts, you’ll have to dig into the gallery Examples - Apache ECharts and copy paste snippets of JSON to achieve what you need

Hope this helps as a start,
Fanilo

AdamJel · August 2, 2022, 6:41pm

Hello, I am not too familiar with streamlit itself, neither with echarts. But I identified the combination of these two as a potential easy solver for my problem. Normally I work just on the backend, but I need to do some visualization for clients this time. What I need to visualize is a 3D vector field. That is a space with points and arrows. And some basic interactivity, like zooming, rotating, etc… Since I work in python, I though, it could be done with these tools. But before I deep dive into both of them, I want to ask, if I am right - can this be done with steamlit-echarts? I found some examples on vanilla echarts, that suggest that it is possible. But I am not sure, if the 3D will work. Here is the example, which drives my attention:

Any thoughts? Any advice?
Thank you @andfanilo & @all

mikful · August 24, 2022, 2:04pm

First of all, just want to say thanks @andfanilo. This package is awesome!

I wonder if anyone could help me with the following? I’ve been trying to implement a gauge chart, but the animation doesn’t seem to work - the gauge just jumps from 0 to the value extremely quickly without animating the rise correctly. The code is as follows:

The chart is within another module echarts_module.py

def gauge(value):
  option = {
    "tooltip": {
      "formatter": '{a} <br/>{b} : {c}%'
      },
    "series": [
      {
        "name": 'Current',
        "type": 'gauge',
        "progress": {
          "show": False
          },
        "axisLine": {
          "lineStyle": {
            "width": 6,
            "color": [
              [0.2, 'rgb(235, 34, 14)'],
              [0.4, 'rgb(242, 99, 9)'],
              [0.6, 'rgb(250, 197, 21)'],
              [0.8, 'rgb(117, 198, 5)'],
              [1, 'rgb(56, 182, 14)']
              ]
            }
          },
        "detail": {
          "valueAnimation": True,
          "formatter": f'{value}%',
          "color": 'auto'
          },
        "data": [
          {
            "value": value,
            "name": '%'
            },
          ]
        }
      ]
    }
  st_echarts(option, height="400px", key="echarts-1")

which is called as follows in my app.py

#set cols etc

with col1:
    value = 55
    echarts_module.gauge(value)

alexxx · August 26, 2022, 3:50am

Hi @andfanilo !
Thank you so much for this component!
I’m trying to put the echarts into separate tabs.
(1) in tab1: some inputs (specified by user) to be used in subsequent tabs. Inputs are wrapped in a form with a submit button
(2) in tab2: I have couple of charts under this tab that take input from tab1. I also want to enable mouse event in tab2 charts so that the user can zoom in/out for any interesting findings.

I realise the mouse event will always trigger the streamlit to rerun and all the results in tab2 are gone, hence I need to go back to tab1 and click submit again. However, the results in tab2 are the same as the original results I had in the previous run.

Could anyone help me with this or is there any alternatives to overcome this issue?

Thanksss!!!

akim38 · October 31, 2022, 1:46pm

Hi all : )

Was wondering if anyone ever figured out how to programmatically get an echart plot as an image (png)?

I’ve developed a dashboard that I’m pretty proud of but the last thing users want is a way to export all plots into a powerpoint. Would be happy to explain further if needed.

Thanks!

Oswald_Zhao_Yang · January 17, 2023, 9:58am

Hi all,

I noticed that in echart-v5.3, there is a new way to format the value in tooltips, like this:

And the code in JS is like this:

I wonder who knows how to apply this in python.

shuzmm · January 23, 2023, 3:24am

Hi @andfanilo,

I’ve been trying to implement the events to get the area’s selected on the parallel axis chart. I’m curious as to how you reference the chart on your mapping process? When you map from python events to the javascript.

The event function I want to use is here:

Documentation - Apache ECharts

However I am unable to reference the chart object that the on(…) function is based on:

Any ideas on how to get the output?

andfanilo · January 23, 2023, 1:04pm

I haven’t tried yet, but it should work with

value_formatter: JsCode("function (value) { returnvalue + 'ml'; }").js_code

Though st-echarts is not yet using streamlit-echarts v5.3 so it may not work

Fanilo

andfanilo · January 23, 2023, 1:10pm

Hey, I hope you’re the one who created st_echarts events function unable to reference chart object · Issue #48 · andfanilo/streamlit-echarts (github.com) we can track the conversation there!

Right now I don’t think that’s possible, but I haven’t tried on my side. What happens if you write this instead of myChart ?

Also I think the series data and index are located in params, reading from Event and Action - Concepts - Handbook - Apache ECharts. I haven’t tried but does

function(params) { console.log(params.data); }

give back the series data? I’m not sure you’ll get the active state in there but hopefully it does appear.

shuzmm · January 23, 2023, 7:37pm

Hey @andfanilo, yes it was me that opened that issue. I will continue the conversation there.

Oswald_Zhao_Yang · January 25, 2023, 6:00am

Yes, I have tried this way but nothing happened with this line. I see. Do you know when this function will be available in st-echarts?