Streamlit-echarts

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")

Hey! Not sure :confused: 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

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 :slight_smile:

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)

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!!!

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!

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.

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?

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 :confused:

Fanilo

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) :slight_smile: 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.

1 Like

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

1 Like

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?