Related
Does anyone know how to render the following tree preserving white spaces properly?
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span style="white-space: pre-wrap;">
└─--[TaskD-{'a': '0.28', 'b': '0.296', 'c': '0.364', 'e': '0.486'}]
|---[TaskC-{'a': '0.28', 'b': '0.296', 'c': '0.364'}]
| └─--[TaskB-{'a': '0.28', 'b': '0.296'}]
| └─--[TaskA-{'a': '0.28'}]
└─--[TaskE-{'c': '0.364', 'e': '0.486'}]
|---[TaskF-{'c': '0.364'}]
└─--[TaskG-{'c': '0.364'}]
</span>
</body>
</html>
Currently, it discards some of the w/spaces and breaks the nice tree:
You need a monospace font, so no matter the character, the size it takes is the same for each characters
<span style="white-space: pre-wrap;font-family:monospace;">
└─--[TaskD-{'a': '0.28', 'b': '0.296', 'c': '0.364', 'e': '0.486'}]
|---[TaskC-{'a': '0.28', 'b': '0.296', 'c': '0.364'}]
| └─--[TaskB-{'a': '0.28', 'b': '0.296'}]
| └─--[TaskA-{'a': '0.28'}]
└─--[TaskE-{'c': '0.364', 'e': '0.486'}]
|---[TaskF-{'c': '0.364'}]
└─--[TaskG-{'c': '0.364'}]
</span>
Searching on the web, you'll find lots of monospace fonts, Choose the ones that fits your design best.
I've searched for the past 3 hours on the bokeh website and stack overflow but none of it is really what i was looking for.
I've generated my plots already, and have them in html files. All i want to do is embed the plots into my dashboard in a multi grid like formation in the white area in the pic below. However, adding just 2 plots cause them to overlay and be really weird.
I used the {{ include }} method to include the graphs this way:
Anyone can give me pointers on how to align them well? Ideally i want 6 small plots in that space. I didnt want to regenerate the plots everytime i loaded the dashboard so i didnt want the embed way.
Please help :( Thank you so much!
EDIT: following big's suggestion, using responsive = True works, but i am unable to control the css styling and the sizes of the charts. I suspect its to do with using the include tag. can anyone help? :)
Why you dont try to make it with the horizontal layout
horizontal-layout
Whith your way ( {% include %} ), i don't find a solution so probably sou must use the standart flask way. Python file:
#Your imports
from flask import Flask, render_template
from bokeh.embed import components
from bokeh.plotting import figure
#app.route('/')
def homepage():
title = 'home'
from bokeh.plotting import figure
#First Plot
p = figure(plot_width=400, plot_height=400, responsive = True)
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
#Second Plot
p2 = figure(plot_width=400, plot_height=400,responsive = True)
p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5)
script, div = components(p)
script2, div2 = components(p)
return render_template('index.html', title = title, script = script,
div = div, script2 = script2, div2 = div2)
Your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.css"
rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.js"></script>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<div style="width: 20%; display: inline-block;">
{{ div | safe }}
{{ script | safe }}
</div>
<div style="width: 20%; display: inline-block;">
{{ div2 | safe }}
{{ script2 | safe }}
</div>
</body>
</html>
And one other tip is to make a python file like my_plots.py
and add your plots there, and then import to you main.py it will make your code cleaner. (i dont know 100% if this will impact your speed, but i don't seen any isues until now ) For example.
my_plots.py:
from bokeh.plotting import figure
def first_plot():
p = figure(plot_width=400, plot_height=400, responsive = True)
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
return p
def second_plot():
p2 = figure(plot_width=400, plot_height=400, responsive = True)
p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5)
return p2
main.py:
#app.route('/')
def homepage():
title = 'home'
#First Plot
from my_plots import first_plot
p = first_plot()
#Second Plot
from my_plots import second_plot
p2 = second_plot()
script, div = components(p)
script2, div2 = components(p)
return render_template('index.html', title = title, script = script,
div = div, script2 = script2, div2 = div2)
Hope i was helpful, Good Luck!
Updating Leo's answer as it is for the deprecated version of Bokeh.
Bokeh v3.0.1
Flask v2.2.2
Flask App
from flask import Flask, render_template
from bokeh.embed import components
from bokeh.plotting import figure
app = Flask(__name__)
#app.route('/')
def homepage():
title = 'home'
from bokeh.plotting import figure
### First Plot ###
p1 = figure(height = 400, sizing_mode = "stretch_width")
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
### Second Plot ###
p2 = figure(height = 400, sizing_mode = "stretch_width")
p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5)
script1, div1 = components(p1)
script2, div2 = components(p2)
return render_template(
'index.html',
title = title,
script = script1,
div = div1,
script2 = script2,
div2 = div2
)
if __name__ == '__main__':
app.run(debug=True)
HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/3.0.1/bokeh.min.js"
integrity="sha512-p7EUyPmeDeOwHiu7fIZNboAcQLxei3sWtXoHoShWWiPNUSRng/Xs5JPcaFPRa4dKy9IuHjyIQuLE4caGCwuewA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Bokeh Charts</title>
</head>
<body>
<div style="width: 40%; display: inline-block;">
{{ div1 | safe }}
{{ script1 | safe }}
</div>
<div style="width: 40%; display: inline-block;">
{{ div2 | safe }}
{{ script2 | safe }}
</div>
</body>
</html>
For some reason on a site I'm working on, "San Francisco" is placing a marker in Louisiana in a Google GeoChart Visualization. I've even tried changing it to "San Francisco, CA", and even "San Francisco, CA, USA" and it's still plotting it in Louisiana.
You can see the incorrect marker here: http://galmeetsglam.com/travel/
Part of my code:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Slug');
data.addColumn('string', 'City');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}});
/* Locations */
data.addRows([
['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
['new-york-city', 'New York City', 1, '<h1 class="tooltip-h1">New York City</h1>'],
['san-francisco-2', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
['san-francisco-2', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
]);
The odd part is other cities are plotting just fine (London and NYC). Not sure why SF is being screwy.
Any ideas?
Not sure why you are using san-francisco-2, but you should use either San Francisco just as your second column or give the iso code : US-CA . So:
data.addRows([
['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
['london', 'London', 1, '<h1 class="tooltip-h1">London</h1>'],
['new-york-city', 'New York City', 1, '<h1 class="tooltip-h1">New York City</h1>'],
['San Francisco', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
['San Francisco', 'San Francisco', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
]);
Found an answer in the Google Visualization API Forums.
Basically GeoChart uses the first element for geocoding. I had my category slug first (which I'm using for the filtering mechanism with Isotope).
So if I rearrange my data to be:
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('string', 'Slug');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}});
/* Locations */
data.addRows([
['London', 'london', 1, '<h1 class="tooltip-h1">London</h1>'],
['London', 'london', 1, '<h1 class="tooltip-h1">London</h1>'],
['New York City', 'new-york-city', 1, '<h1 class="tooltip-h1">New York City</h1>'],
['San Francisco', 'san-francisco-2', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
['San Francisco', 'san-francisco-2', 1, '<h1 class="tooltip-h1">San Francisco</h1>'],
]);
It works perfectly. Just answering this myself for any future visitors with the same question.
<pre class="Input" style="white-pace:nowrap; overflow: auto;"><code>Plot[{Sin[1/x]}, {x, -1, 3},
RegionFunction -> Function[{x}, 0 < x < 10],
PlotRange -> {{-1, 3}, {-1.2, 1.2}},
PlotLabel -> TraditionalForm[Sin[1/x]], PlotStyle -> Red,
AxesLabel -> {"x", "y"}, AxesStyle -> Arrowheads[{-0.03, 0.03}]]</code></pre>
The error information is:
Error: Variable `{{-1,3}` was not properly terminated with regexp: /\}\}/. Use --trace to view backtrace
I use GithShell to use Jekyll(for github page)
{{ is part of the liquid the templating language. Try encoding the { or enclose content in {% raw %} {% endraw %} block.
because the '{{' is thought as part of liquid.
e.g.
'{{site.title}}' will be replace to your sitename setted in _config.yml
I am trying to put two Google charts on a single web-page but can only get it to plot the first one and not the other. Can anyone look and see what I am doing wrong?
I am using two different divs for plotting, which I thought was the important step. I tried also using two different functions for the different plots but still could not get it to work.
I would be very thankful for useful suggestions.
thanks!!
Ayesha
<!--To change this template, choose Tools | Templates and open the template in the editor.-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Date');
data1.addColumn('number', 'Sold Pencils');
data1.addColumn('string', 'title1');
data1.addColumn('string', 'text1');
data1.addColumn('number', 'Sold Pens');
data1.addColumn('string', 'title2');
data1.addColumn('string', 'text2');
data1.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart1 = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
chart1.draw(data1, {displayAnnotations: true});
var data2 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart2.draw(data2, options);
}
</script>
</head>
<body>
<p> Testing Google line chart tool </p>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div1' style='width: 700px; height: 240px;'></div>
<br> <br> <br>
<p> Testing another chart </p>
<div id='chart_div2' style='width: 700px; height: 240px;'></div>
</body>
</html>
Ayesha
Include corechart when loading the packages.
google.load('visualization', '1',
{'packages':['annotatedtimeline','corechart']});
See here: http://jsfiddle.net/Ng7ne/