from bokeh.io import show
from bokeh.layouts import column, row
from bokeh.models import DataTable, TableColumn, Button, CustomJS, ColumnDataSource
from bokeh.plotting import figure
from bokeh.io import output_notebook
from bokeh.transform import factor_cmap

output_notebook()

# new x_ranges (1d and 2d) with their values
range1d = ["c", "d"]
values1d = [100, 150];
range2d_p1 = ["e", "e", "f", "f", "g", "g"];
range2d_p2 = ["0", "1", "0", "1", "0", "1"];
values2d = [50, 30, 40, 80, 120, 110];

# default fig
fig = figure(x_range=["a", "b"],
             plot_height=350,
             plot_width=490,
             tools="box_edit",
             toolbar_location="right")

source_plot = ColumnDataSource(data={"Column": ["a", "b"], "Result": [0,0]})
bar = fig.vbar(x='Column', top='Result', width=0.9, source=source_plot,
               fill_color=factor_cmap('Column', palette=['red', 'blue'], factors=range1d, start=1, end=2),
               line_color="black", name="main_vbar")

# buttons
xrange_1d = Button(label="xrange_1d", width=100)
xrange_2d = Button(label="xrange_2d", width=100)

# callbacks
xrange_1d.js_on_click(CustomJS(args=dict(fig=fig, source_plot=source_plot, bar=bar,
                                         range1d=range1d, values1d=values1d),
                       code="""
                       fig.x_range.factors = range1d;
                       source_plot.data["Column"] = range1d;
                       source_plot.data["Result"] = values1d;
                       bar.glyph.fill_color.factors = range1d;
                       source_plot.change.emit();
                       """))

xrange_2d.js_on_click(CustomJS(args=dict(fig=fig, source_plot=source_plot, bar=bar,
                                         range2d_p1=range2d_p1, range2d_p2=range2d_p2,
                                         values2d=values2d),
                       code="""
                       var factorsZipped = range2d_p1.map(function(e, i) {
                              return [e, range2d_p2[i]];
                            });
                       fig.x_range.factors = factorsZipped;
                       source_plot.data["Column"] = factorsZipped;
                       source_plot.data["Result"] = values2d;

                       bar.glyph.fill_color.factors = range2d_p2;
                       bar.glyph.fill_color.start = 1;
                       bar.glyph.fill_color.end = 2;

                       source_plot.change.emit();
                       """))


show(column(row(xrange_1d, xrange_2d), fig))