I am trying to display multiple dataframe in tabs using Bokeh. My code works when I save my file as html, but it fail to display inline in the Jupyter notebook.
Here is my code:
from bokeh.models.widgets import DataTable, DateFormatter,
TableColumn, Panel, Tabs
from bokeh.io import output_notebook, show
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from bokeh.resources import INLINE
output_notebook(resources=INLINE)
source = ColumnDataSource(train.head())
columns = [TableColumn(field=col, title=col) for col in train.columns.tolist()]
data_table = DataTable(source=source, columns=columns, width=400, height=280)
tab1 = Panel(child=data_table, title="Train")
source = ColumnDataSource(prop.head())
columns = [TableColumn(field=col, title=col) for col in prop.columns.tolist()]
data_table = DataTable(source=source, columns=columns, width=len(columns)*100, height=280)
tab2 = Panel(child=data_table, title="Properties")
tabs = Tabs(tabs=[tab1, tab2])
show(tabs)
Here is the error messege:
Javascript error adding output!
Error: SlickGrid's 'enableColumnReorder = true' option requires jquery-ui.sortable module to be loaded
See your browser Javascript console for more details.
Here is my set up:
Python 3.6.1 :: Anaconda custom (64-bit)
Ubuntu 16.04 LTS
jupyter==1.0.0
jupyter-client==5.0.1
jupyter-console==5.1.0
jupyter-core==4.3.0
bokeh==0.12.7
Can someone point me a direction as what I can do to fix this?
Thanks in advance!
Mike
That looks like a SlickGrid error message. Like it says, jQueryUI.sortable is a dependency for SlickGrid.
I normally include the full build of jQueryUI in the page, along with jQuery itself, like:
<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery-ui-1.11.3.min.js"></script>
(or you could use the jQuery CDN).
You can also include a cut down version of jQueryUI that just includes sortable (there are known conflicts between jQueryUI and other frameworks, for example Bootstrap).
If slickgrid is part of the page, you should already have this stuff set up though.
I have no clue about Bokeh.
Related
I am looking for a way, for Sublime Text, to add the "necessary" format in the editor after selecting the language from the syntax drop-down menu.
For example:
After selecting HTML, I want the editor to immediately add, for example, <!doctype html> <head> <body> <title>, et cetera, et cetera.
Is there a way for me to do this, or do I need to download/add certain plugins?
The emmet plugin might do its job.
This is possible with a simple plugin. You can listen for when the syntax is changed to HTML, check the file is otherwise empty, and if so, insert the HTML snippet.
Tools menu -> Developer -> New Plugin...
Replace the template with the following code:
import sublime
import sublime_plugin
class SyntaxChangeListener(sublime_plugin.EventListener):
def on_post_text_command(self, view, command_name, args):
if view.size() > 0:
return
if command_name == 'set_file_type':
if args['syntax'] == 'Packages/HTML/HTML.sublime-syntax':
view.run_command('insert_snippet', { 'name': 'Packages/HTML/Snippets/html.sublime-snippet' })
Save it, in the folder ST recommends (Packages/User) as something like insert_html_snippet_for_new_files.py - the name itself doesn't matter, as long as the file extension is py.
Open a new tab
Set the syntax to HTML
See the HTML snippet get automatically inserted
In PrimeFaces 8, it seems to be possible to enable / disable HMTML -sanitizer when using the <p:textEditor component by just specifying secure='false' for disabling it and secure='true' for enabling it. I tried to disable it in PrimeFaces 7.0 like this:
<p:textEditor id="quillToolbarId" secure='false' widgetVar="editor2" height="300" value="#{editTemplatesBean.kaufAnbotTemplate}" placeholder="Enter your content">
but the sanitizer still seems to be working.
My problem is that whenever I format a text in the primeFaces p:textEditor to be center-aligned, the HTML sanitizer just removes my formatting, so the text ends up without formatting.
One way to work this around is to use directly Quill and not Sanitize the input.This works, but then I face other problems, such as this one:
https://github.com/quilljs/quill/issues/1379
which also need to be worked-around.
Please help!
There is no secure property in TextEditor for PrimeFaces 7. If you look at the code of TextEditorRenderer.decode you will see that the sanitzier is called
if (PrimeApplicationContext.getCurrentInstance(context).getEnvironment().isHtmlSanitizerAvailable()) {
value = HtmlSanitizer.sanitizeHtml(value,
editor.isAllowBlocks(), editor.isAllowFormatting(),
editor.isAllowLinks(), editor.isAllowStyles(), editor.isAllowImages());
}
And if you look into PrimeEnvironment you'll see that the property will be set if the class org.owasp.html.PolicyFactory is available on classpath:
htmlSanitizerAvailable = LangUtils.tryToLoadClassForName("org.owasp.html.PolicyFactory") != null
So you either:
update to PF 8
make sure that you don't have this class on the classpath
override the renderer and change/remove the code for the check
I have seen great examples of how bokeh allows you to hover over a data point and display pop up details for it. There are cases the details is so overwhelming voluminous, it really requires a side panel to display it all. Is bokeh a complete enough widget toolkit where I can create a side panel to the main display and show details of a data point following the cursor?
Can someone point out some sample code, or at least the relevant api's.
If you prefer a higher-level API for building and linking Bokeh-based plots, you can use HoloViews; see linking examples at http://holoviews.org/reference/index.html#streams and instructions at http://holoviews.org/user_guide/Custom_Interactivity.html . For example:
import param, numpy as np, holoviews as hv
from holoviews import opts, streams
hv.extension('bokeh')
xvals = np.linspace(0,4,202)
ys,xs = np.meshgrid(xvals, -xvals[::-1])
img = hv.Image(np.sin(((ys)**3)*xs))
pointer = streams.PointerXY(x=0,y=0, source=img)
dmap = hv.DynamicMap(lambda x, y: hv.Points([(x, y)]), streams=[pointer])
dmap = dmap.redim.range(x=(-0.5,0.5), y=(-0.5,0.5))
img + dmap.opts(size=10)
You can find many examples on https://docs.bokeh.org . What you want is possible by adding a callback and updating the relevant part. In this example the div is what you name a side panel in your question.
#for bokeh 1.0.4
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource,Div,Row
from bokeh.io import curdoc
from bokeh.events import Tap
#the data
d={'x':[1,2],'y':[3,4],'info':['some information on a first datapoint','some information on a second datapoint']}
source=ColumnDataSource(d)
tooltips = [("x", "$x"),("y", "$y"),("info","#info")]
fig=figure(tools="tap,reset",tooltips=tooltips)
c=fig.circle('x','y',source=source,size=15)
def callback(event):
indexActive=source.selected.indices[0]
layout.children[1]=Div(text=d['info'][indexActive])#adjust the info on the right
fig.on_event(Tap, callback)
div=Div(text=d['info'][0])
layout=Row(fig,div)
curdoc().add_root(layout)
To run this code, save it as code.py, open a cmd and type "bokeh serve code.py --show".
I need to make a 4 column website with Bootstrap but in typo3 the default setting is to have 2 cols max. To be able to edit each column in backend I have created a layout following this tutorial: http://blog.sebastiaandejonge.com/articles/2012/july/26/implementing-typo3s-backend-layouts/
I cannot display content of the columns on frontend though.
In the template section for a page that uses this layout I have added
agptop1 < styles.content.get
agptop1.select.where = colPos = 20
agptop2 < styles.content.get
agptop2.select.where = colPos = 21
etc which are the positions set in the layout manager.
Now I should specify the variable like agptop1 so I created a template file among the other bootstrap templates in typo3conf\ext\bootstrap_package\Resources\Private\Templates\Page
It is a copy of the default template with some things changed like...
<f:layout name="Default"/>
<f:section name="Main">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '3'}"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '20'}"/>
<f:format.raw>{agptop1}</f:format.raw>
</div>
...like the line
<f:format.raw>
and the colPos. I suppose this is correct? I have found this somewhere here on SO.
But when I use this as a template directly in template editor of the page I need it for I only get blank page.
I cannot find out how are the default bootstrap templates linked to the Default.html and to manu configuration and how is this all linked to Backend Layout. I need to pick a backend layout, fill in the content, then something1 must tell something2 that I want to load standart page, standart menu but a specific template with the variables defined. How can this be done?
I'm sorry if it's too basic but it's my first day in typo3 and there is no manual for the new version.
The spaces on colPos = 20 are a problem in Typoscript. Using this should help:
agptop1.select.where = colPos=20
From your answer I assume, that your are using the plugin bootstrap_package. This plugin comes with some new predefined templates and you want to add one more, right?
Step 1 adding a new backendlayout
To add another option to your backend page-options, have a look into
BackendLayouts
Each file contains the description of one backend layout and each file is built the same way:
1. Defining a title (no need of using a language file here)
2. Defining the alignment (rows cols) of the content-container in the backend
3. Defining a icon
Just copy one of these files and modify it. These files have to be included in the page-layout and bootstrap_package does it automatically when it is installed. You can turn of this behaviour in the extension setting and include all backend layouts by your own. Therefor copy the file BackendLayouts.txt from bootstrap_package to your fileadmin, add your custom new layout and include the file in you pagets-config like so:
<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/template/typoscript/BackendLayouts.txt">
Note 1: For single files use 'FILE:' for Directories use 'DIR:'
Note 2: For pagets-config go to your root-page, edit it, got to resources and scroll down. Here it is. Enter code here.
If you have done it right you could now select your new layout from backend.
Step 2 Creating your own template
Copy one of the bootstrap_package template files and modify it, by only adding new cObject elements and what you need for your alignment.
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '2'}"/>
In addition copy the hole dir /typo3conf/ext/bootstrap_package/Resources/Private to the fileadmin and put your own template in the subdir 'Templates'
Step 3 Bring it together
As the last step you have to modify the typoscript-setup. I recommend to copy the bootstrap setup-files and include it manually rather then import it by static template.
So remove your static template "Boostrap Package (bootstrap_package)" copy the setup.txt and constant.txt from
/typo3conf/ext/bootstrap_package/Configuration/TypoScript/
to your fileadmin dir and include it like so:
Constants:
<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/template/typoscript/constants.txt">
Setup:
<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/template/typoscript/setup.txt">
After all you have to open your custom constant.txt file and add your own paths:
page {
...
fluidtemplate {
# cat=bootstrap package: advanced/100/100; type=string; label=Layout Root Path: Path to layouts
layoutRootPath = fileadmin/template/Private/Layouts/Page/
# cat=bootstrap package: advanced/100/110; type=string; label=Partial Root Path: Path to partials
partialRootPath = fileadmin/template/Private/Partials/Page/
# cat=bootstrap package: advanced/100/120; type=string; label=Template Root Path: Path to templates
templateRootPath = fileadmin/template/Private/Templates/Page/
}
...
}
And for the last step add your new template in the config.txt into the fluidtemplate-part 'page.10.templateName ...' doing some pattern-matching =)
10 = FLUIDTEMPLATE
10 {
templateName = TEXT
templateName.stdWrap.cObject = CASE
templateName.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
pagets__default_clean = TEXT
pagets__default_clean.value = DefaultClean
pagets__default_2_columns = TEXT
pagets__default_2_columns.value = Default2Columns
...
I hope, that i have described everything important. If you have trouble, have deep look into bootrack_package's source code. You can learn everything by miming what they have done.
Good luck
I am trying to import a matplotlib to html with xkcd theme. My code is as follows (no data,just a fig)
fig = plt.figure(facecolor = '#eee8d5')
#plt.matplotlib.rcdefaults()
with plt.xkcd():
ax = fig.add_subplot(111)
ax.set_axis_bgcolor('#eee8d5') #set_color('#fdf6e3')
ax.title.set_color('#d33682') # Magenta
ax.tick_params(axis='x', colors='#657b83')
ax.tick_params(axis='y', colors='#657b83')
ax.spines['bottom'].set_color('#657b83')
ax.spines['left'].set_color('#657b83')
ax.spines['right'].set_color('none')
ax.spines['top'].set_color('none')
ax.set_title('Title', fontsize = 18);
html = mpld3.fig_to_html(fig)
Html_file= open("CumPrctWordFrq.html","w")
Html_file.write(html)
Html_file.close()
So far so good -- everything renders correctly in the python notebook. However when I paste the html on a website (squarespace), the fig loses all the xkcd properties. Eventually I would like to make this interactive. The idea is eventually to produce a xkcd -> solarized -> interactive plot.
mpld3 does not yet support the plt.xkcd() mode. If this is something you want, you should creat an issue in the mpld3 issue tracker, and see if someone is inspired to work on it.