I'm trying to display a small picture when hovering over a specific bar of a bar-chart. This using plotly inside a IPython notebook.
Plot.ly have a nice example of this using javascript here.
I can easily embed this example inside the notebook using the approach shown here, but I really would like to use the plot from the notebook.
I think I am almost there:
iplot({'data':data, 'layout':layout})
is the python code to generate the plot; it embeds directly a svg in the cell.
In the javascript example, an iframe is generated:
<iframe id="plot" src="..." seamless></iframe>`
The javascript can then get the iframe by id:
Plot.iframe = document.getElementById("plot");
I've tried a few things without success; the iplot doesn't create any iframe. How can I link the javascript to the python code?
i.e. what 'id' can I use?
Thanks,
N
Related
Is there a way to use the Outline tab in VS code to display a ToC of the current javascript document based on some tag used to indicate sections and subsections?
I am looking for something similar to Creating Table of Contents in VS code Jupyter Notebook or https://code.visualstudio.com/docs/languages/markdown (Outline view) but for javascript code.
I have read through this question:
What's the command to "reset" a bokeh plot?
Which is close to what I'm trying to do. Except I'm trying to use an HTML button and have the JavaScript reset the bokeh plot, rather than creating a button in Python and tying the JS Callback to that python button. How can I pass the reference of the bokeh plot up to the javascript?
If you have plot with a glyph in Python like this:
p = figure()
renderer = p.line(x=[1,2], y=[1,2], name='lines')
Then you can access the renderer model in JavaScript as follows:
renderer = Bokeh.documents[0].get_model_by_name('lines')
You can do it in Bokeh callbacks as well as in any 3rd party JS libraries you are using in your Bokeh app.
However, if you want just to reset the plot using the ResetTool you could do so in JS just by clicking on the ResetTool icon in the toolbar and without referencing to plot model like this:
reset_btn = document.getElementsByClassName('bk-tool-icon-reset')
reset_btn[0].click()
The above works for Bokeh v1.3.0 and is not guaranteed to work in the future versions as Bokeh CSS library can change.
Bokeh populates a global Bokeh.index structure with all the views that are renderered on a page, and an Bokeh.documents structure with all the documents on a page. You will need to sift through one of those to find the Bokeh model that you are looking for. Typically setting name on the Python side will make this easier, so that you can search for the object with that name value.
Current libraries for making "interactive SVGs" in the web-browser are actually using javascript to manipulate a svg object in the page dynamically but don't actually embed the full javascript needed to animate the SVG in the svg tag itself. Libraries like d3.js, protovis, svg.js, etc.
But it's possible to create standalone interactive SVGs, for example Brendan Gregg's flamegraph tool, example:
http://www.brendangregg.com/FlameGraphs/cpu-bash-flamegraph.svg
Is there any way to create a standalone, interactive SVG in a webpage? Of course, you could generate the interactive SVG serverside (for example, Brendan uses a Perl library to generate the interactive SVG) and then serve that to the user. But I'd prefer to generate the SVG as part of generating the webpage itself, i.e. in Php or Ruby or, even better, client-side with a Javascript library. In either case, the key feature goal is to be able to right-click-download the custom-made interactive SVG.
Note: The benefit of the d3.js approach is that the animation can be integrated between the SVG and other DOM elements on the page, or have interaction with the SVG trigger dynamic AJAX requests. I'm not expecting the stand-alone SVG to be able to do these things.
As mentioned in the comments, You can inline an interactive SVG into the src= of an <embed> DOM element using a data: URI.
Unfortunately, current web browsers don't have right click -> download for <embed> elements, only for <img> tags. We can't use <img> because that tag won't run the javascript code inside the SVG for security reasons.
Luckily, we can hack in our own download link using javascript as follows:
<embed class="mygraph" src="data:image/svg+xml;utf8, ... svg code ...>
<a download class="downloadLink">Download this graph.</a>
<script>
document.querySelector(".downloadLink").href = document.querySelector(".mygraph").src;
</script>
If you try to use this technique to make standalone SVGs using popular libraries like d3.js you'll need to change a few things that are browser specific to work inside the SVG context. It took around 4 lines of code change to use d3.v5.js inside a standalone SVG without errors.
You can see an example of it here:
https://github.com/bjmnbraun/d3-standalone
I'd like to use CKEditor's Image plug-in separately from the rest of CKEditor.
Basically I'm creating a simple tool to edit webpages. Some parts of the webpage will be HTML and thus require the full CKEditor. But some parts will be images, and I don't need the full HTML editor, just the Image plug-in.
Is this possible to do, and what would be the "cleanest" way to do so?
CKEditor doesn't provide an image browser by itself, so you must research how to use the file browser component that you have picked by itself.
If you're using CKFinder look at the standalone.html sample, like shown in the "enhancing html forms" here: http://ckfinder.com/demo
I have been trying to sort out an issue with printing certain areas of a web app i am working on. The issue is with highcharts js which renders its bar charts as <rect ... />.
On calling the window.print() on load the print call acts just like the background image issue where the background image/colour always disappear. However, when i print the page from the browser menu its displaying as it should be. Any idea why it won't print <rect /> ?
Might be a timing problem. Try something like
window.onload = function() {
window.focus();
window.print();
}
You cannot print SVG from all browsers and from the ones you can, the svg needs to have rendered before you try to print it.
I read here an alternative
From version 2.0 an exporting module
is available for Highcharts, which
allows users to download images or
PDF's of your charts. This module
consists of an extra JavaScript file,
exporting.js, and a web service or
server module written in PHP.
Highslide Software offers the
exporting web service free of charge.
If you include the exporting module in
your charts, two buttons will appear
in the upper right. One button prints
the chart, which is done on the client
side only. The other button handles
exporting. By default, an SVG
representation of the chart is sent by
POST to http://export.highcharts.com,
where it is converted using Apache's
Batik converter to PDF, PNG or JPEG.