Toggle line visibility in Bokeh plot

Question

I'm trying to create a Bokeh plot which allows me toggle the visibility of lines in the figure by clicking checkboxes.

I started trying to use a js callback to a checkbox group, but found unfortunately that js callbacks have not actually been implemented for the checkbox group.

Could anyone suggest another way to toggle line visibility in a bokeh plot. I'm guessing that modifying the alpha properties of the lines is the way to go.

Here is some simple sample code for creating my plot:

from bokeh.plotting import figure, show, output_notebook
from bokeh.io import vform
from bokeh.models.widgets import CheckboxGroup
output_notebook()

x = [1, 2, 3, 4, 5]
y1 = [3, 5, 6, 4, 5]
y2 = [2, 4, 7, 6, 5]

p = figure()
line1 = p.line(x, y1, alpha=1, color='blue', legend='blue line')
line2 = p.line(x, y2, alpha=1, color='red', legend='red line')

cbgroup = CheckboxGroup(labels=["toggle blue line","toggle red line"], active=[0,1])
show(vform(p,cbgroup))

dreme · Answer 1 · 2016-06-15T23:36:16.037

I'm guessing that since there hasn't been any response to my question that there isn't any way to use checkboxes in bokeh plots for web pages.

In that case I've been looking at other possible web chart libraries other than bokeh and found a nice one called C3.js. It is implemented purely in javascript, but since bokeh already requires some knowledge of js this perhaps isn't a big deal for bokeh users. Moreover the C3.js syntax seems to be pretty nice and simple, even for someone like me who knows very little js.

For anyone checking on this question, I've provided the html/js page code below which creates the equivalent C3.js plot with checkboxes that I was trying to make above with bokeh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>show hide</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'x',
                columns: [
                    ['x',  1, 2, 3, 4, 5],
                    ['y1', 3, 5, 6, 4, 5],
                    ['y2', 2, 4, 7, 6, 5]
              ]
            }
        });

        function cbclick(a){
            var lineData = "y" + a;
            var cbID = "cb" + a
            var cb = document.getElementById(cbID);
            if (cb.checked) {
                chart.show([lineData]);
            } else {
                chart.hide([lineData]);
            }
        }
    </script>

    <div align="center">
        <input type="checkbox" id="cb1" onclick="cbclick(1)" checked="true">y1</input>
        <input type="checkbox" id="cb2" onclick="cbclick(2)" checked="true">y2</input>
    </div>
</body>

Toggle line visibility in Bokeh plot

1 Answers1