Last active
October 26, 2016 11:53
-
-
Save schlichtanders/3e41890dcd20fbc3a1db2a675df6ce51 to your computer and use it in GitHub Desktop.
bokeh layout. This gist shows some unexpected behaviour of the layout.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Bokeh Plots Responsiveness Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.css" type="text/css" /> | |
| <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.3.min.css" type="text/css" /> | |
| <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.js"></script> | |
| <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.3.min.js"></script> | |
| <script type="text/javascript"> | |
| Bokeh.set_log_level("info"); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row content"> | |
| <div class="col-md-6"> | |
| <div class="well"> | |
| <div class="bk-root"> | |
| <div class="plotdiv" id="56b44878-c0a2-4417-9787-5344e260352a"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="well">...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| Bokeh.$(function() { | |
| Bokeh.safely(function() { | |
| var docs_json = {"878d01ca-72d7-4d01-a490-11b996217cec":{"roots":{"references":[{"attributes":{"callback":null,"column_names":["y","x"],"data":{"x":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"y":[0.555391536547789,0.47517124493679674,0.567291610878313,0.9363363826077649,0.011577285944550542,0.2615906690169081,0.7431712379266797,0.5116797983125488,0.4669838737542107,0.2882416795191052,0.9801869192692758,0.4116080027720437,0.8529415039219814,0.6727956349976076,0.15615724725133862,0.857018882809675,0.7917003596945305,0.621824584510838,0.6780194472817258,0.7716904615634923,0.38224642677947074,0.41379302190961353,0.4917479974366341,0.8487559475682049,0.927666670311057,0.295813016593645,0.5112992698911799,0.4730293734898554,0.2674906397413438,0.8291211378623923,0.5877060293433165,0.9316816815503328,0.16996368855924326,0.34630309801219483,0.7699882510923769,0.30657338570667236,0.4782264520341746,0.8540261269409006,0.6679524173798846,0.25288220717319565,0.5529972397766519,0.9818498136341112,0.48214523473437,0.06545025714789887,0.9029764920655858,0.1269997063657592,0.6132323709043793,0.9273221983874596,0.4337978247818842,0.7738135214224892]}},"id":"87afd768-bd06-4e24-ad64-eadeeed0a74b","type":"ColumnDataSource"},{"attributes":{"callback":null},"id":"79cc278d-cb4f-4896-bf60-e4c3ec37ebd1","type":"DataRange1d"},{"attributes":{"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"73bc935d-402d-4531-bb3a-f515c5eab471","type":"BasicTicker"}},"id":"fa2dd657-28da-4b6f-ad9e-9eab1144886b","type":"Grid"},{"attributes":{"callback":null},"id":"1eee82a0-dba9-4f69-ae03-9818749bddb2","type":"DataRange1d"},{"attributes":{},"id":"666e29c0-b2a2-4770-af2a-b895733930cd","type":"BasicTicker"},{"attributes":{"height":30,"sizing_mode":"scale_width"},"id":"214cd9bc-a216-42bd-b860-5eca5e5dca97","type":"Spacer"},{"attributes":{"plot":null,"text":null},"id":"3d703100-2253-4ae6-adbb-04c747173cac","type":"Title"},{"attributes":{"data_source":{"id":"87afd768-bd06-4e24-ad64-eadeeed0a74b","type":"ColumnDataSource"},"glyph":{"id":"2a3d8fca-e01a-4456-9bb1-9189a86ac4ae","type":"Line"},"hover_glyph":null,"nonselection_glyph":{"id":"18f6c76a-37da-4cd3-b407-9c269841458b","type":"Line"},"selection_glyph":null},"id":"d343541c-4fa3-41d9-bcbb-b1579108a146","type":"GlyphRenderer"},{"attributes":{"children":[{"id":"214cd9bc-a216-42bd-b860-5eca5e5dca97","type":"Spacer"},{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"}],"sizing_mode":"scale_width"},"id":"cf08aa2f-411f-49d7-84d5-c54252db5842","type":"Column"},{"attributes":{},"id":"f00c96cb-afd5-48ac-bd31-9bbd3237afb5","type":"BasicTickFormatter"},{"attributes":{"dimension":1,"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"666e29c0-b2a2-4770-af2a-b895733930cd","type":"BasicTicker"}},"id":"963c37fe-4c87-443b-a9af-99205cc87421","type":"Grid"},{"attributes":{"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"2a3d8fca-e01a-4456-9bb1-9189a86ac4ae","type":"Line"},{"attributes":{"formatter":{"id":"f00c96cb-afd5-48ac-bd31-9bbd3237afb5","type":"BasicTickFormatter"},"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"73bc935d-402d-4531-bb3a-f515c5eab471","type":"BasicTicker"}},"id":"6b32aa2d-6e89-4e4e-bd50-1069590651fc","type":"LinearAxis"},{"attributes":{},"id":"e8d05970-dd31-41fc-abaf-0899a4ea2a98","type":"BasicTickFormatter"},{"attributes":{"below":[{"id":"6b32aa2d-6e89-4e4e-bd50-1069590651fc","type":"LinearAxis"}],"left":[{"id":"0ece0d4a-98f7-48a0-90c6-e232dd511876","type":"LinearAxis"}],"plot_height":42,"plot_width":700,"renderers":[{"id":"6b32aa2d-6e89-4e4e-bd50-1069590651fc","type":"LinearAxis"},{"id":"fa2dd657-28da-4b6f-ad9e-9eab1144886b","type":"Grid"},{"id":"0ece0d4a-98f7-48a0-90c6-e232dd511876","type":"LinearAxis"},{"id":"963c37fe-4c87-443b-a9af-99205cc87421","type":"Grid"},{"id":"d343541c-4fa3-41d9-bcbb-b1579108a146","type":"GlyphRenderer"}],"sizing_mode":"scale_width","title":{"id":"3d703100-2253-4ae6-adbb-04c747173cac","type":"Title"},"tool_events":{"id":"4db3dc31-399a-4510-a1bc-d786fd183cc9","type":"ToolEvents"},"toolbar":{"id":"9e793876-bb23-4a21-892f-af8fb061429b","type":"Toolbar"},"x_range":{"id":"1eee82a0-dba9-4f69-ae03-9818749bddb2","type":"DataRange1d"},"y_range":{"id":"79cc278d-cb4f-4896-bf60-e4c3ec37ebd1","type":"DataRange1d"}},"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},{"attributes":{"formatter":{"id":"e8d05970-dd31-41fc-abaf-0899a4ea2a98","type":"BasicTickFormatter"},"plot":{"id":"a3dc01d4-137c-4d91-8ddd-b549d75eb3b3","subtype":"Figure","type":"Plot"},"ticker":{"id":"666e29c0-b2a2-4770-af2a-b895733930cd","type":"BasicTicker"}},"id":"0ece0d4a-98f7-48a0-90c6-e232dd511876","type":"LinearAxis"},{"attributes":{"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"18f6c76a-37da-4cd3-b407-9c269841458b","type":"Line"},{"attributes":{"active_drag":"auto","active_scroll":"auto","active_tap":"auto"},"id":"9e793876-bb23-4a21-892f-af8fb061429b","type":"Toolbar"},{"attributes":{},"id":"73bc935d-402d-4531-bb3a-f515c5eab471","type":"BasicTicker"},{"attributes":{},"id":"4db3dc31-399a-4510-a1bc-d786fd183cc9","type":"ToolEvents"}],"root_ids":["cf08aa2f-411f-49d7-84d5-c54252db5842"]},"title":"Bokeh Application","version":"0.12.3"}}; | |
| var render_items = [{"docid":"878d01ca-72d7-4d01-a490-11b996217cec","elementid":"56b44878-c0a2-4417-9787-5344e260352a","modelid":"cf08aa2f-411f-49d7-84d5-c54252db5842"}]; | |
| Bokeh.embed.embed_items(docs_json, render_items); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Bokeh Plots Responsiveness Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| {{ bokeh_css }} | |
| {{ bokeh_js }} | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row content"> | |
| <div class="col-md-6"> | |
| <div class="well"> | |
| {{ plots_div }} | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="well">...</div> | |
| </div> | |
| </div> | |
| </div> | |
| {{ plot_script |indent(8) }} | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/python | |
| # -*- coding: utf-8 -*- | |
| import numpy as np | |
| from jinja2 import Template | |
| from bokeh.embed import components | |
| from bokeh.models import ColumnDataSource, Spacer | |
| from bokeh.layouts import column | |
| from bokeh.resources import CDN | |
| from bokeh.plotting import figure | |
| __author__ = 'Stephan Sahm <Stephan.Sahm@gmx.de>' | |
| # posted on github bokeh under https://github.com/bokeh/bokeh/issues/5397 | |
| WIDTH = 700 | |
| EXTRA_HEIGHT_REL = 0.08 | |
| RESPONSIVE = True | |
| N = 50 | |
| source = ColumnDataSource({ | |
| 'x': range(N), | |
| 'y': np.random.uniform(size=N), | |
| }) | |
| fig = figure(plot_height=int(EXTRA_HEIGHT_REL * WIDTH), tools="", plot_width=WIDTH) | |
| fig.line(x="x", y="y", source=source) | |
| composite = column(Spacer(height=30), fig, responsive=RESPONSIVE) | |
| script, context = components({'plots_div': composite}) | |
| context['plot_script'] = script | |
| context['bokeh_css'], context['bokeh_js'] = CDN.render_css(), CDN.render_js() | |
| with open("mwe_layout_plots.jinja2") as f: | |
| template = f.read() | |
| html = Template(template).render(context) | |
| with open("mwe_layout_plots.html", "w") as f: | |
| f.write(html) | |
| # visible bugs: | |
| # making EXTRA_HEIGHT_REL < 0.08 no plot is printed (non-responsive) | |
| # for responsiveness it is slightly lower EXTRA_HEIGHT_REL < 0.07 | |
| # however for e.g. 0.06 the plot appears again if one resizes the window to very small | |
| # Spacer disappear in responsiveness (same holds for spacing with VBox and the like) | |
| # resizing (smaller) the extra plots stay too big (occasionally leading also to overlapping) | |
| # resizing (bigger) the extra plots stay too small (occasionally leading also to overlapping) | |
| # updating webpage (F5) has different behaviours: usually it makes plot bigger (but still false), | |
| # sometimes it fits it as one would expect for responsiveness | |
| # (a short test with uncommented bootstrap CSS showed that this behaviour is not due to bootstrap) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment