Created
September 27, 2017 12:35
-
-
Save anthonydouc/c8571f0a2f9aa8415bd566e1ac2ba237 to your computer and use it in GitHub Desktop.
Example bokeh server application - stock text display with streaming values
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> | |
| <meta charset="utf-8"> | |
| {{ bokeh_css }} | |
| {{ bokeh_js }} | |
| <link rel="stylesheet" href="stocktext/static/css/styles.css"/> | |
| </head> | |
| <body> | |
| {{ plot_div|indent(8) }} | |
| {{ 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
| import random | |
| from bokeh.driving import count | |
| from bokeh.io import curdoc | |
| from bokeh.models.widgets import (Div) | |
| #function for streaming | |
| def get_price(t): | |
| value = 10.7 + t / 100 - (t / 100 ) ** 0.5 - random.uniform(0.001,0.05) | |
| return round(value*100)/100 | |
| stock_name = 'DAU' | |
| price = '10.7' | |
| percentage = "20" | |
| #template for the text and numbers that appear | |
| template=(""" | |
| <div class='content'> | |
| <div class='name'> {stock_name} </div> | |
| <span class='number'>{price}<small>{price_unit}</small> </span> | |
| <span class='percentage' style='color: {colour};'> {percentage}<small>%</small> </span> | |
| </div> | |
| """) | |
| # initial text | |
| text = template.format(stock_name = stock_name, | |
| price=price, | |
| price_unit='k', | |
| percentage=percentage, | |
| colour='#97D389') | |
| div = Div(text=text, height=300) | |
| @count() | |
| def update(t): | |
| # periodic callback to update price and any other detail. | |
| price = get_price(t) | |
| previous_price = get_price(t-1) | |
| percentage = (price - previous_price)/previous_price | |
| percentage = round(percentage*100)/100*100 + 20 | |
| if(price > previous_price): | |
| color = '#97D389' | |
| elif(price == previous_price): | |
| color = '#FFFFFF' | |
| else: | |
| color = '#E31714' | |
| div.text = template.format(stock_name = stock_name, | |
| price=price, | |
| price_unit='k', | |
| percentage=percentage, | |
| colour=color) | |
| curdoc().add_periodic_callback(update, 2000) | |
| curdoc().add_root(div) |
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
| .content{ | |
| background-color: #292737; | |
| color: #FFFFFF; | |
| width: 40%; | |
| height: 140px; | |
| } | |
| .name{ | |
| font-size: 15pt; | |
| } | |
| .number{ | |
| font-size: 56pt; | |
| } | |
| .percentage{ | |
| font-size: 36pt; | |
| } | |
| .number-display{ | |
| width: 200px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The application structure should be:
then run in command line with the command 'bokeh serve --show stocktext'.