How to link a checkbox to line graph

hvPlot
1

Hi,
I’m trying to link a checkbox to a line graph without success -
Can someone point me to the right direction (See below example)?

import panel as pn
from hvplot.sample_data import us_crime
import holoviews as hv
import holoviews.plotting.bokeh
import hvplot.pandas

hv.Store.current_backend = 'bokeh'

crime = us_crime.read()
cols = ['Year' ,'Robbery', 'Aggravated assault',]

checkbox_widget = pn.widgets.CheckBoxGroup(name='Data sources'
                                               , value= cols[1:]
                                               , options=cols[1:]
)
lines = crime[cols].hvplot.line(x='Year'
                               , y=cols[1:]
                               , value_label= 'value'  
                               , legend='right'
                               , height=300, width=620
)
checkbox_widget.jslink(lines, value='glyph.value')

pn.Row(lines, pn.Column(checkbox_widget ))
2

I’m having a tough time figuring out what you are doing here. glyph.value is not an attribute on bokeh plots. Based on context I think you are trying to toggle the lines on and off?

The easier thing to do is simply to set muted_alpha=0 which allows you to toggle them on via the legend:

lines = crime[cols].hvplot.line(x='Year'
                               , y=cols[1:]
                               , value_label= 'value'  
                               , legend='right'
                               , height=300, width=620, muted_alpha=0
)

If you really want to connect the Checkboxes you will have to write a slightly more complex callback, which iterates over the plot.renderers and sets them to invisible if they are not selected in the list of active checkboxes:

checkbox_widget.jscallback(args={'plot': lines['Robbery']},  value="""
for (var i = 0; i<plot.renderers.length; i++) {
  plot.renderers[i].visible = cb_obj.active.indexOf(i) >= 0
}
""")

pn.Row(lines, checkbox_widget)
3

Thx for your reply -
Sorry for being unclear regarding the glyph.value - but your answer is great.
However I have a problem - since if the values of the series can be in a different scale (see bellow example) - I would like the plot to be re-rendered depending on the values in the visible series (similar to what is displayed in the bottom of the getting started docs ) which rerenders that plot each time the select is changed.
Do you know of such example?

import panel as pn
from hvplot.sample_data import us_crime
import holoviews as hv
import holoviews.plotting.bokeh
import hvplot.pandas

hv.Store.current_backend = 'bokeh'

crime = us_crime.read()
cols = (['Year' ,'Violent Crime rate',  'Legacy rape rate /1',])

checkbox_widget = pn.widgets.CheckBoxGroup(name='Data sources'
                                               , value= cols[1:]
                                               , options=cols[1:]
)
lines = crime[cols].hvplot.line(x='Year'
                               , y=cols[1:]
                               , value_label= 'value'  
                               , legend='right'
                               , height=300, width=620
                               , muted_alpha=0
)

checkbox_widget.jscallback(args={'plot': lines['Violent Crime rate']}
                           ,  value=
                           """
                            for (var i = 0; i<plot.renderers.length; i++) {
                              plot.renderers[i].visible = cb_obj.active.indexOf(i) >= 0
                            }
                            """
                          )

pn.Row(lines, checkbox_widget)
4

I know it’s maybe too late, but I put a solution here in case someone needs it.

The trick is to work only with panel and not by setting a jscallback so it won’t do exactly what you code does.

import panel as pn
from hvplot.sample_data import us_crime
import holoviews as hv
import holoviews.plotting.bokeh
import hvplot.pandas
import param

class test(param.Parameterized):
    crime = us_crime.read()
    cols = (['Year','Violent Crime rate', 'Legacy rape rate /1',])
    checkbox_widget = param.ListSelector(default = cols[1:],objects=cols[1:])

@param.depends('checkbox_widget')
def view(self):
    lines = self.crime[self.cols].hvplot.line(x='Years',y=self.checkbox_widget,
                                                        value_label='value',
                                                        legend='right',
                                                        height=300,
                                                        width=620)
    return lines


viewer = test()

pn.Row(viewer.view,pn.Param(viewer.param,widgets={'checkbox_widget' : pn.widgets.CheckBoxGroup},name='Data source'))