I am working on passing data visualization using Bokeh library to Django project. I am able to pass standard Bokeh visualization but when I am trying to used an external wordcloud2 library my project crashes. I receive message "A server error occurred. Please contact the administrator." Any ideas would be much appreciated?!
Imports used:
from bokeh.plotting import figure, output_file, show
from bokeh.embed import components
# Bokeh WordCloud
from bokeh.io import show
from bokeh.models import ColumnDataSource
from bokeh_wordcloud2 import WordCloud2
views.py
Code below is working:
x = [1,2,3,4,5]
y = [1,2,3,4,5]
plot = figure(title='Line Graph', x_axis_label='x_stuff', y_axis_label='y_stuff', plot_width=400, plot_height=400)
plot.line(x, y, line_width=2)
#auto_div - dynamically generates div elemetent
script, auto_div = components(plot)
Based on example above, I am trying to pass values for wordcloud in very similar way but it is not working:
titles = ['lorem ipsum dolor sit amet',
'consectetur adipiscing elit',
'cras iaculis semper odio',
'eu posuere urna vulputate sed']
test1 = ColumnDataSource({'titles':titles})
wordcloud = WordCloud2(source=test1,wordCol="titles",color=['pink','blue','green'])
script, auto_div = components(wordcloud)
context = {
'script':script,
'auto_div':auto_div,
}
return render(request, 'two_boxes/home.html', context)
Based on my testing it seems like the problem occurs at script, auto_div = components(wordcloud) statement
home.html
<head>
{% block bokeh_dependencies %}
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-1.3.4.min.css" rel=”stylesheet” type=”text/css”>
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.3.4.min.css" rel=”stylesheet” type=”text/css”>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script>
{{ script | safe }}
{% endblock %}
</head>
<body>
<h1>Bokeh Stuff</h1>
{{ auto_div | safe }}
</body>
Resources:
https://hackernoon.com/integrating-bokeh-visualisations-into-django-projects-a1c01a16b67a
https://github.com/joranbeasley/bokeh_wordcloud2
Related
I would like to create a web page that will display data I have in a table inside a code block just the way it is here, even with a copy function.
I can already display the data on the page, I just like to have it formatted in a pretty box, maybe even with syntax highlights, I looked at Pygments but I can't get it to work.
Below is a sample code block that I would like to re-create in my Django app.
Please don't pay attention to the actual code, this is only a sample.
I would appreciate if you could please let me know in detail how to implement this.
# Python Program to find the area of triangle
a = 5
b = 6
c = 7
# Uncomment below to take inputs from the user
# a = float(input('Enter first side: '))
# b = float(input('Enter second side: '))
# c = float(input('Enter third side: '))
# calculate the semi-perimeter
s = (a + b + c) / 2
# calculate the area
area = (s*(s-a)*(s-b)*(s-c)) ** 0.5
print('The area of the triangle is %0.2f' %area)
Honestly, your question is more related to CSS and Javascript than Python / Django.
This took me a while...Based on what you said, I will assume you know the basics of Django.
models.py
from django.db import models
class Codeblock(models.Model):
text = models.TextField()
...
views.py
from .models import Codeblock
def codes(request):
codeblocks = Codeblock.objects.all()
return render(request, 'list_codes.html', {'codeblocks': codeblocks})
To format code blocks you can use HTML pre and code tags (Bootstrap 5 examples):
<pre><code>{{codeblocks.text}}</code></pre>
The tricky part was trying to find a way to hightlight the syntax. After a few dead ends I have found highlight.js that worked very well. It has documentation on basic usage and various themes for you to play with, you can test them using this CDN library, it is also possible to write your own theme.
There was one last problem related on how to copy the text. Although it is easy to copy text to clipboard, its not an easy task (at least for me) to have a styled button placed in the right place. To not extend myself, after a while I found this highlightjs-copy project, that not only copy the text to clipboard but has a perfect button in the right place.
With that being said, at last, here is an example:
list_codes.html
<!DOCTYPE html>
<html>
<head>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/ashes.min.css" integrity="sha512-KX15mI6Sw0VzQyAOf4MAPS9BZ0tWXyZrGPHKSkqDmy40Jl+79f8ltpj6FvLJ+3obnH56ww0ukclsd6xGAxb5mA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- highlightjs-copy -->
<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
/>
<script>hljs.addPlugin(new CopyButtonPlugin());</script>
</head>
<body style="background-color: hsl(0,0%,22.5%);">
{% for codeblock in codeblocks %}
<div class="container">
<!-- Need to be in one line or will not render correctly -->
<pre><code class="language-python">{{codeblock.text}}</code></pre>
</div>
{% endfor %}
</body>
</html>
I am using the Django application to generate some graphs using Plotly so
I tried to generate a pdf file of the following plots of
my HTML page is:
<center> <p class="lead"><strong><em> All Plots </em></strong></p></center>
<div class="row">
<div class="col-md-6" >
{{ sunburst|safe}}
</div>
<div class="col-md-6" >
{{ sunburst2|safe}}
</div>
</div>
and my url.py :
path('export_pdf/', views.export_pdf, name='export_pdf'),
and the views.py;
def export_pdf(request):
df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
df2 = px.data.gapminder().query("continent=='Oceania'")
fig2 = px.line(df2, x="year", y="lifeExp", color='country')
chart = fig.to_html()
chart2 = fig2.to_html()
context= {
'sunburst':chart,
'sunburst2':chart2,
}
return render(request, 'Home/Reporting/part_pdf.html',context)
I tried some code from this page but I can't generate the file any help?
https://plotly.com/python/v3/pdf-reports/
are there any other methods for doing that (html page with plots and tables)?
All my best
I searched high and low and could not find anything. Hacked together a solution that worked very well for me:
import plotly.graph_objs as go
import plotly.io as pio
labels = ['Alice','Bob','Carl']
vals = [2,5,4]
data = [go.Bar(x=vals, y=labels, orientation='h')]
layout = go.Layout(margin_pad=10)
fig = go.Figure(data=data,layout=layout)
svg = pio.to_image(fig, format="svg")
context["svg"] = svg.decode("utf-8")
and then in the template something like this
<div>
{{ svg|safe }}
</div>
The first solution was the one you referenced as well. The quality was very bad though. This solution is a lot more crisp.
I used it with weasyprint, but I'm sure it will work with other solutions as well.
I'm using Python 3.7, Django, and BeautifulSoup. I am currnently looking for "span" elements in my document that contain the text "Review". I do so like this
html = urllib2.urlopen(req, timeout=settings.SOCKET_TIMEOUT_IN_SECONDS).read()
my_soup = BeautifulSoup(html, features="html.parser")
rev_elts = my_soup.findAll("span", text=re.compile("Review"))
for rev_elt in rev_elts:
... processing
but I'd like to add a wrinkle to where I don't want to consider those elements if they have a DIV ancestor with the class "child". So for example, I don't want to consider something like this
<div class="child">
<p>
<span class="s">Reviews</span>
...
</p>
</div>
How can I adjust my search to take this into account?
If you are using BeautifulSoup 4.7+, it has some improved CSS selector support. It handles many selectors up through CSS level 4 and a couple of custom ones like :contains(). In addition to all of that, it handles complex selectors in pseudo-classes like :not() which level 4 was supposed to handle, but they've recently pushed that support out to CSS level 5 selector support.
So in this example we will use the custom :contains selector to search for spans which contain the text Review. In addition, we will say we don't want it to match div.class span.
from bs4 import BeautifulSoup
html = """
<div>
<p><span>Review: Let's find this</span></p>
</div>
<div class="child">
<p><span>Review: Do not want this</span></p>
</div>
"""
soup = BeautifulSoup(html, features="html.parser")
spans = soup.select('span:contains(Review):not(div.child span)')
print(spans)
Output
[<span>Review: Let's find this</span>]
Depending on your case, maybe :contains isn't robust enough. In that case, you can still do something similar. Soup Sieve is the underlying library included with Beautiful Soup 4.7+, and you can import it directly to filter your regular expression returns:
from bs4 import BeautifulSoup
import soupsieve as sv
import re
html = """
<div>
<p><span>Review: Let's find this</span></p>
</div>
<div class="child">
<p><span>Review: Do not want this</span></p>
</div>
"""
soup = BeautifulSoup(html, features="html.parser")
spans = soup.find_all("span", text=re.compile("Review"))
spans = sv.filter(':not(div.child span)', spans)
print(spans)
Output
[<span>Review: Let's find this</span>]
CSS selector is the way to go in this case as #facelessuser has answered. But just in case you are wondering this can be done without using css selector as well.
You can iterate over all of an element’s parents with .parents. You could define a custom filter function which checks if any of the parents has a class of "child" and return True otherwise (in addition to all your other conditions).
from bs4 import BeautifulSoup, Tag
html="""
<div class="child">
<p><span id="1">Review</span></p>
</div>
<div>
<p><span id="2">Review</span></p>
</div>
"""
soup=BeautifulSoup(html,'html.parser')
def my_func(item):
if isinstance(item,Tag) and item.name=='span' and 'Review' in item.text:
for parent in item.parents:
if parent.has_attr('class'):
if 'child' in parent.get('class'):
return False
return True
my_spans=soup.find_all(my_func)
print(my_spans)
Outputs:
[<span id="2">Review</span>]
I have a need to have 2 bokeh figures on a page. I need them to separate from each other. Currently I can have only one figure (with multiple plots using grid/rows/columns) but not with multiple figures.
See the documentation on how to append figures in rows or columns.
For an example on how to plot figures in the same row see
from bokeh.io import output_file, show
from bokeh.layouts import row
from bokeh.plotting import figure
output_file("layout.html")
x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]
# create a new plot
s1 = figure(plot_width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)
# create another one
s2 = figure(plot_width=250, plot_height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)
# create and another
s3 = figure(plot_width=250, plot_height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)
# put the results in a row
show(row(s1, s2, s3))
Likewise, you could put the results in a column using
show(column(s1, s2, s3))
Of course, you can combine the two to create a grid, so if you have a list of figures, say graphs, you could do something like
cols = []
row_num = 3
for i in range(0, len(graphs), row_num):
r = row(graphs[i: i + row_num])
cols.append(r)
show(column(cols))
Try having different script and div tag for the plots.
Example using Django:
from django.shortcuts import render_to_response
from bokeh.plotting import figure,output_file,show
from bokeh.embed import components
import random
**Define your View function this way**
def plot(request,*args,**kwargs):
PLOT_OPTIONS = dict(plot_width=800, plot_height=300)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
red = figure(sizing_mode='scale_width', tools='pan', **PLOT_OPTIONS)
red.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
blue = figure(sizing_mode='fixed', tools='pan', **PLOT_OPTIONS)
blue.scatter(data(), data(), color="blue", **SCATTER_OPTIONS)
green = figure(sizing_mode='scale_width', tools='pan', **PLOT_OPTIONS)
green.scatter(data(), data(), color="green", **SCATTER_OPTIONS)
script1, div1 = components(red)
script2, div2 = components(blue)
script3, div3 = components(green)
context = {'script1':script1,'div1':div1,'script2':script2,'div2':div2,'script3':script3,'div3':div3}
return render_to_response('graph.html',context=context)
**Then your Template should look like this:**
first load the dependencies inside the HEAD tag
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-1.3.4.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.3.4.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script>
{{ script1 | safe }}
{{ script2 | safe }}
{{ script3 | safe }}
Inside the body or wherever you want to display the plots
<div> {{ div1 | safe }} </div>
<div> {{ div2 | safe }} </div>
<div> {{ div3 | safe }} </div>
from bokeh.plotting import figure
from bokeh.embed import file_html
from bokeh.resources import CDN
x = [1,4,6]
y = [4,6,9]
plot = figure(width=300, height=300)
plot.line(x, y)
html1 = file_html(plot, CDN, 'my plot')
This way you can create multiple plots and insert them using standard jinja2 syntax
Like:
<h1> First plot </h1>
{{ html1 }}
<h1> Second plot </h1>
{{ html2 }}
More information you can find here
Also you can try using Tab Panels
I am currently programming the examples in "Test-Driven Development with Python", more specifically the first functional test.
The key parts of my code are as follows:
def setUp(self):
self.browser = webdriver.Firefox()
self.browser.implicitly_wait(20)
I am telling Selenium to make an implicit wait for 20 seconds until it finds whatever it looks for.
inputbox = self.browser.find_element_by_id('id_new_item')
self.assertEqual(
inputbox.get_attribute('placeholder'),
'Enter a To-Do item'
)
inputbox.send_keys('Buy peacock feathers')
inputbox.send_keys(Keys.ENTER)
table = self.browser.find_element_by_id('id_list_table')
rows = table.find_elements_by_tag_name('tr')
self.assertIn('1: Buy feather peacocks', [row.text for row in rows])
The biggest problem here are in the following lines:
inputbox.send_keys('Buy peacock feathers')
inputbox.send_keys(Keys.ENTER)
table = self.browser.find_element_by_id('id_list_table')
It writes "Buy peacock feathers" in the input box.
It presses enter.
It, immediately after, tries to find the items in the table.
The issue is that my computer is not that fast. By the time the items are found, the browser is still trying to load the script, and the assert fails.
I do know that there are two types of waits for Selenium: Implicit (already applied) and explicit (did some research on it). My issues with both are the following:
Implicit waits are useless because the items are found, regardless whether the items are what I am looking for or not.
Explicit waits are useless because the page is the same both before and after the form is sent, and as such there is nothing to wait for.
time.sleep() hangs the script if used too much.
Yes, I also checked that item_text was correctly referenced, including the name attribute :)
What are my other options? What can I do to force Selenium to wait until the page is loaded? Thank you beforehand.
EDIT: The view is as follows, following the example in the book.
<html>
<head>
<title>Lista de Quehaceres</title>
</head>
<body>
<h1>Tu Lista de Quehaceres</h1>
<form method="POST">
<input id="id_new_item" name="item_text" placeholder="Entre un ítem de quehacer" />
{% csrf_token %}
</form>
<table id="id_list_table">
<tr><td>1: {{ new_item_text }}</td></tr>
</table>
</body>
</html>
You can wait for a specific text to be present in element using WebDriverWait:
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
inputbox.send_keys('Buy peacock feathers')
inputbox.send_keys(Keys.ENTER)
table = WebDriverWait(driver, 10).until(
EC.text_to_be_present_in_element((By.CSS_SELECTOR, "table#id_list_table tr td"), "Buy peacock feathers")
)