Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[BokehJS] Add change event to figure object
See original GitHub issueFurther to use case exposed in this stackoverflow question, I would like to suggest the addition of an event on figure object that could be called directly from javascript in order to trigger a “responsive” redraw/resize of the figure.
Below is an use case example where the “myMenu” div element is made resizable by jquery-ui and a custom callback to resize event is used to trigger a resizing of the figure to fill div element “myPlot”.
Thanks in advance for considering this! Cheers, A.
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.10.js"></script>
<!-- The order of CSS and JS imports above is important. -->
</head>
<body>
<div style="display:table; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
<div style="display:table-row; width:100%; height:100%; margin:0px; border:0px; padding:0px;">
<div id="myMenu" style="display:table-cell; width:25%; vertical-align:top; height:100%; margin:0px; border:0px; border-right:1px solid grey; padding:0px;">
menu
</div>
<div id="myPlot" style="display:table-cell; height:100%; margin:0px; border:0px; padding:0px;"></div>
</div>
</div>
<script type="text/javascript">
// data to plot
var source = new Bokeh.ColumnDataSource({
data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] }
});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({
title:"demo plot",
tools: tools,
toolbar_location:"above",
sizing_mode:"stretch_both"
});
var scatterData = plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot,document.getElementById("myPlot"));
//resizable left menu container
$('#myMenu').resizable({
handles:'e',
resize:function(event,ui){plot.change.emit();}
});
</script>
</body>
</html>
Issue Analytics
- State:
- Created 6 years ago
- Comments:13 (7 by maintainers)
Top Results From Across the Web
bokeh.events — Bokeh 2.4.0 Documentation
Represent granular events that can be used to trigger callbacks. ... Announce a double-tap or double-click event on a Bokeh plot.
Read more >How to get access and modify already existing Bokeh figure ...
Consider this very rudimentary example. I hope it can get you started. Two sliders change x and y coordinates of the middle dot....
Read more >Hello, Bokeh.js! / Bryan Gin-ge Chen - Observable
While it is mainly used with Python, it has a JavaScript library "Bokeh.js" which performs the rendering and event-handling in the browser.
Read more >Interactive Data Visualization with Bokeh - Trenton McKinney
The Bokeh figure object p that you created in the previous exercise has also been ... you're going to add the box_select tool...
Read more >Python and Bokeh: Part II. The beginner's guide to creating…
To add data to the figure, we use a periodic callback, which draws random numbers at each run: The method bokeh_doc.add_periodic_callback ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
resize_layout()should do the job. High-level layout management APIs are defined here:https://github.com/bokeh/bokeh/blob/4f666e270b3a71c4c6a0943a6df20cd18a69557b/bokehjs/src/lib/models/layouts/layout_dom.ts#L172-L199
Those APIs are actually fairly stable, especially after transition to TypeScript, just usually lagging behind Python APIs.
@mattpap: Thank you a lot for your explanation. Dynamic resizing works nicely. And it is a really important feature for users.