Pyecharts working example

Panel
#1

I’m having issues with pyecharts + panel.

ECharts works perfectly fine, pyecharts works as well if I use .render_embed() and than use the string with a panel HTML pane, but when I’m trying to use a pyecharts object with a panel ECharts pane I get an error saying the pane doesn’t take pyecharts… objects.

There are some nice Liquid indicators in pyecharts not available in JS ECharts, hence I’m looking for a solution as the .render_embed() way doesn’t work out as expected.

Anyone seen a working pyecharts example? I couldn’t find any…

#2

Mind filing an issue about this with a minimal example that doesn’t work and the versions of Panel and pyecharts you are using?

#3

There was some example a time ago here where the pyecharts objects was not rendered

#4

I’ll do that, just let me know how/where/etc, please.

#5

I was about to submit the issue at GitHub, when I realised that pyecharts does work with a clean Panel app with no template, no Classes or callbacks, etc.

I need to play around with this to see what’s the issue with the original app. Happy days!

1 Like
#6

I ran into this same issue. Only in simple cases does the pane work with an echart object. All examples use JSON/dict style definition of echart and not a pyecharts object. So I end up resorting to grabbing the JSON out of the echart object itself. Its hacky (and I think missing coverage in Panel), but it seems to work just fine:

from pyecharts.charts import Bar
import panel as pn
import json
pn.extension('echarts')


bar1 = pn.widgets.IntSlider(start=1, end=100, value=50)
bar2 = pn.widgets.IntSlider(start=1, end=100, value=50)

@pn.depends(bar1.param.value, bar2.param.value)
def plot(bar1, bar2):
    my_plot= (Bar()
        .add_xaxis(['Bar1', 'Bar2'])
        .add_yaxis('Values', [bar1, bar2])
    )
    return pn.pane.ECharts(json.loads(my_plot.dump_options()), width=500, height=250)
pn.Row(pn.Column(bar1, bar2), plot)

Hope this helps inspire a better solution (if nothing else).

1 Like
#7

Thank you so much for sharing your solution :slight_smile: !!! it works great !!!

I think a PR to add this to the docs can be helpful for other people

#8

Hi
Pyecharts should be working. If not it is a bug.

If you look at the documentation it is supported

image
image958×251 11.5 KB

If you look at the Panel code it is implemented

image
image1405×602 60.6 KB

and if I panel serve the above example it works for me

from pyecharts.charts import Bar
import panel as pn

bar1 = pn.widgets.IntSlider(start=1, end=100, value=50)
bar2 = pn.widgets.IntSlider(start=1, end=100, value=50)

@pn.depends(bar1.param.value, bar2.param.value)
def plot(bar1, bar2):
    my_plot= (Bar()
        .add_xaxis(['Bar1', 'Bar2'])
        .add_yaxis('Values', [bar1, bar2])
    )
    return pn.pane.ECharts(my_plot, width=500, height=250)

pn.Row(pn.Column(bar1, bar2), plot).servable()

image
image728×315 10.2 KB

#9

Ok. So after dragging the slider I see that there are errors

ValueError: expected an element of Dict(String, Any), got <pyecharts.charts.basic_charts.bar.Bar object at 0x0000024F8E8DAE08>

And I can see a bug report has been filed https://github.com/holoviz/panel/issues/1874

And I’ve contributed a fix here https://github.com/holoviz/panel/pull/1875

1 Like
#10

Wow, thanks for quick fix Marc. I tried diving into the echart module and couldn’t figure the fix out. I just don’t have a good grasp on Panel’s internal workings. Is there any high level material that describes the code base (for more community PRs) or does one just have to read the entire library code or any tips on how to build a mental model of how panel internals work?

1 Like
#11

I don’t know of any documentation that can really help. But starting out small, reaching out on the gitter Channel for developer help, reading some code and debugging some code is the way to go.

#12

Well there is one guide if you want to fix or add things on the .js side.

https://awesome-panel.readthedocs.io/en/latest/guides/awesome-panel-extensions-guide/bokeh-extensions.html

And the there is the panel developer guide https://panel.holoviz.org/developer_guide/index.html

#13

@jbogaardt, In case you’re struggling… As I’ve briefly described in the original post, if you use .render_embed() with your pyecharts object and pass it on to a pn.pane.HTML, then you will have full functionality. This method works with params too and I’ve also tested it with periodic callbacks. It works like a charm with the more complex pyecharts objects too like tabs, pages, etc.

1 Like