Cross-post on Bokeh forums: https://discourse.bokeh.org/t/display-json-item-serialized-json-in-jupyter-notebook/7245/3
I've serialized my Bokeh plot to json using bokeh.embed.json_item, as described in the documentation: https://docs.bokeh.org/en/latest/docs/reference/embed.html#bokeh.embed.json_item
I now want to load it again in Python (Jupyter notebook). How do I do so? The documentation only mentions loading it using JavaScript and embedding it on a webpage: https://docs.bokeh.org/en/latest/docs/user_guide/embed.html
One way to do it is by displaying an HTML object in the IPython notebook as follows:
from IPython.core.display import display, HTML
html_plot = f'''
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.3.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.3.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.3.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<div id="myplot"></div>
<script>
item = {plot_json}
Bokeh.embed.embed_item(item, "myplot");
</script>
</body>
'''
display(HTML(html_plot))
However, this does not get me back the bokeh Figure object which I can manipulate.
As of Bokeh 2.3 re-ingesting the exported JSON back in to Python is still an open issue.
Related
I have a bunch of data from which i'm generating a text file to encode a mermaid diagram.
But since this text file so big: 2000 lines. It won't generate an svg on the live version of https://mermaid.live/edit.
I then tried to install the mermaid http-server using docker, with no success (https://github.com/TomWright/mermaid-server).
Then, I wanted to try to use a local client but I have the same error: "Maximum text size diagram exceeded". (https://github.com/mermaid-js/mermaid-cli)
So the prblem is that I can't generate an SVG file from my data.
I try to check if there were a configuration file in any of those mermaid "implementations" but i couldn't find one.
I checked previously asked similar questions on Stackoverflow, but they are outdated unfortunatly.
So by using this template and pasting the graph text inside the "mermaid" beacons: it works because the maxTextSize has been set to 10000000000.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<pre class="mermaid">
...
...
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid#9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', maxTextSize: 10000000000,});
</script>
</body>
</html>
`
I am trying to componentize some of my html pages to make them ractive components and load them using ractive-load. I don't use any build system or "tools" (i.e. grunt, browserify, require, etc)
I am getting the error:
You can only have one <script> tag per component file
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Title</title>
<!-- Javascript -->
<script src="static/jquery-2.1.4/jquery-2.1.4.min.js"></script>
<script src='static/ractive-0.7.3/ractive.js'></script>
<script src='static/ractiveload/ractive-load.js' ></script> -->
<script src='static/app.js' ></script>
</head>
<body>
<header>
<a href='/'>My Title</a>
</header>
<!-- This is a dynamic div that is loaded on-demand by ractive. -->
<div class='wrapper' id='mainPanel'>
</div>
</body>
</html>
app.js:
$(document).ready(function(){
Ractive.load('views/control.html').then( function(Control){
var ractive = new Control({
el: "#mainPanel",
});
}).
views/control.html:
<script type='text/javascript' src="static/some/lib.js"></script>
<script type='text/javascript' src="static/some/otherlib.js"></script>
<div>This is a test</div>
How do I load additional JavaScript libraries into a Ractive component?
When using single-file components, you use the special require function. Note that this function is not, in any way, tied to any tool's implementation. It may, however, be an abstraction of the underlying tool's implementation.
But the component spec mentions that require's behavior is dependent on the loader being used. In the case of ractive-load, its dependency management is not very sophisticated. Its behavior is to find the dependency in Ractive.load.modules or the global window if it's not found in the previous. This can only mean that your dependencies must exist in either of the two places before your app loads. In the case of loading from window, adding your dependency as a regular <script> tag should work.
If you're looking for a more advanced form of dependency management for component files without the need for cli tooling, you can take a look at rvc which runs on top of RequireJS.
I put the following (copied from the cdn website) in a file then opened it in FireFox A textarea is displayed rather than ckeditor. Is that expected behavior?
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
Try this tutorial on how to setup and configure CKEditor in different environments, or get the demos' source code straight from github
I believe i have everything coded right ,as Dreamweaver shows no Syntax errors, however the fullcalendar UI is not displaying either in Dreamweavers' preview pane, it does however display the div, or in Mozilla Firefox.
<!doctype html>
<html>
<head><link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<script src="fullcalendar/fullcalendar.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
all files are local
Dreamweaver CC 2014 1.1 and Firefox 36.0.4
You are missing one css file fullcalendar.print.css please include it. you can use the cdn path //cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css
Check console there might be error of jquery not defined. Include the file in that case.
cdn path https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js
For full download fullcalendar Click here..
Include your files in this sequence.
Moment js
jQuery js
Fullcalendar js
P.s: And make sure each of the file is included properly.
I have created a jsfiddle link on the left menu click on external sources. Click here for jsfiddle
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...