Change axes formatting and span settings based off selected axes' value types?

Community Support
1

I’ve formatted some axes with the NumeralTickFormatter and set up some spans, and it all works beautifully except I’d like to adjust their settings based on what values are selected for the axes. Some axes values are percentages, “0%”, others are in thousands, “0,0”.

So I don’t want axes formatting to be shown in percentages when a thousands value is selected, but it’d be nice to have percentages shown for percentage values instead of 0.[something]. Similarly for percentages I’ve set up a span at 1 (100%) so that what’s effectively the limit of the graph is more easily spotted. I obviously don’t want this span showing when a non percentage value is selected as having a line at 1 won’t be any good. Is there any way I can prevent this? Maybe somehow set line_alpha = 0 ?

The axes are set as x_active and y_active and widgets’ js_on_change updates these to copies of the values of selected lists.

Could anyone please help me figure out how I can have axes’ formatting and span conditions change based off what axes are selected?

2

Hi @tvkyq I can’t really picture what you are trying to achieve from the description. Maybe you can share an image or two?

3

Sure - perhaps I could’ve better explained myself.

Here’s a simplified version that demonstrates the issue:

from bokeh.plotting import figure, show
from bokeh.models import CDSView, ColumnDataSource, CustomJS, NumeralTickFormatter, Span
from bokeh.models.widgets import Select
from bokeh.layouts import layout

data = dict(Apples=[97, 34, 23, 6, 26, 97, 21, 92, 73, 10, 92, 14, 77, 4, 25, 48, 26, 39, 93],
        Singulars=[1, 	10, 	1, 	8, 	10, 	2, 	0, 	7, 	2, 	4, 	7, 	4, 	1, 	1, 	9, 	4, 	6, 	3, 	2,
],
        Percentages=[0.21, 	0.65,	0.86, 	0.39, 	0.32, 	0.62, 	0.46, 	0.51, 	0.17, 	0.79, 	0.64, 	0.43, 	0.54, 	0.5, 	0.47, 	0.63, 	0.54, 	0.84, 	0.79,
],
       )
data['x_active'] = data['Percentages']

source = ColumnDataSource(data=data)
view = CDSView(source=source)

Axesselect = Select(title="Option:", value="Percentages", options=["Percentages", "Singulars"])
Axesselect.js_on_change('value', CustomJS(args=dict(source=source, Axesselect=Axesselect), code="""
  source.data['x_active'] = source.data[Axesselect.value]
  source.change.emit()
  """))

p = figure()
p.circle('x_active', 'Apples', source=source, view=view, size=20)

span_x_high_percent = Span(location = 1, dimension = 'height', line_width = 2)
p.add_layout(span_x_high_percent)
p.xaxis[0].formatter = NumeralTickFormatter(format="0%")

layout = layout([[Axesselect, p]])
show(layout)

So the span at 1 (being 100%) and the percentage formatting of the x axis is great when percentages are selected, but when singular values are selected I want the span to disappear and the x axis to not be formatted in percentages. Does that make sense?

4 
Axesselect.js_on_change('value', CustomJS(args=dict(source=source,    
                                                    select=Axesselect, 
                                                    axis=p.xaxis[0], 
                                                    span=span_x_high_percent), 
                                          code="""
  axis.formatter.format="0.0"
  span.visible = false
  source.data['x_active'] = source.data[select.value]
  source.change.emit()
"""))

Presumably, if you want them to “change back”, would would want to condition on the select value to appropriately configure the format and span visibility.

5

Works perfectly, only needed some adapting with JS! Thank you!!