Skip to content

Instantly share code, notes, and snippets.

@gdementen
Created February 5, 2019 14:33
Show Gist options
  • Save gdementen/1b34dc4ddbaa55f8678900be6a3bed6f to your computer and use it in GitHub Desktop.
Save gdementen/1b34dc4ddbaa55f8678900be6a3bed6f to your computer and use it in GitHub Desktop.
attempt to create a bokeh categorical plot with dynamic factors
<!DOCTYPE HTML>
<html>
<head>
<title>Sandbox</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.0.4.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<select id="rowselector">
<option value="0">row 0</option>
<option value="1">row 1</option>
<option value="2">row 2</option>
</select>
<div id="plot_target"></div>
<div>
<button type="button" class="btn" id="BTN_A">a</button>
<button type="button" class="btn" id="BTN_B">b</button>
<button type="button" class="btn btn-secondary" id="BTN_C">c</button>
</div>
<script>
function get_visible_data() {
var visible_factors = ['A', 'B', 'C'].filter(factor => !$('#BTN_'+factor).hasClass('btn-secondary'));
var row = $("#rowselector").val();
var visible_data = visible_factors.map(factor => fulldata[factor][row]);
return {factors: visible_factors, y: visible_data};
}
function update_graph() {
var source = globals.source;
var data = get_visible_data();
source.data = data;
source.change.emit();
// this already helps but is not enough to make things work.
// It seems to only work if the number of visible factors stays the same
globals.graph.x_range.factors = data.factors;
}
function create_graph() {
var data = get_visible_data();
var source = new Bokeh.ColumnDataSource({data: data});
var p = Bokeh.Plotting.figure({x_range: data.factors, y_range: [5, 25]});
p.square({field: "factors"}, {field: "y"}, {source: source});
$("#plot_target").empty();
Bokeh.Plotting.show(p, "#plot_target");
globals['source'] = source;
globals['graph'] = p;
}
var globals = {source: null, graph: null};
var fulldata = {
A: [10, 15, 20],
B: [15, 15, 15],
C: [20, 15, 10],
};
create_graph();
$("#rowselector").change(update_graph);
$(".btn").click(function(e) {
$(e.target).toggleClass("btn-secondary");
// this is what I am trying to get working
update_graph();
// this works (but is slow for big graphs)
// create_graph();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment