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.
Related
I am using 'recharts' to create graphs for my project,
and 'react-pdf' for generating a report.
'Recharts' creates a svg on the DOM when using it and a graph is displayed.
Is there a way I can use these two together, and add my 'recharts' component to my report via react-pdf?
for example - inside a <Document/> tag.
react-pdf link to website
recharts link to website
I have seen a solution which offers to convert the rechart's svg to a png, save it locally and then import it and use via <Image/> component in react-pdf.
Looking for a more straightforward approach to this issue.
Here is how I solved it :
I have used this article -
https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf
It recommends using html-to-image package.
So I've given an id to the container of the rechart component,
and selected it with docoument.getElementById().
Then, used the selected id when querying html-to-image, like so -
const response = await htmlToImage.toPng(myId);
The response then contained a url,
which was used as an src for the react-pdf Image component.
I have a .NET core application with a jquery pageguide in it. The colors of the application, for example the menubars, can be configured by the user.
To achieve this, I add a HtmlString with a <style> tag from a Controller. In the tag are the user specific colors in classes.
var primaryColor = "rgb(28,67,104)"; //will be configurable
return new HtmlString(($".primarycolor{{background-color:{primaryColor}; }}"));
I want to make the colors of the jquery pageguide configurable by the user, but the color values in the pageguide.css file can't obviously be modified. I read about LESS, but i cant (and shouldn't) compile it on runtime.
How can I add dynamic color support to the pageguide? Is there an relative easy way to do this with js or server side code?
Read the users input by sending it to your .NET application
when rendering your page, overwrite it by generating a CSS-file or <style> tag which you can then implement on your HTML file. That CSS overwrites the default colors.
I have some charts that are created client-side using Javascript. I would like them to use data queried and calculated server-side in my .net codebehind.
Each chart only needs passed 2 numbers, and I suppose a third variable (its name).
This is proving harder than I expected as I haven't found a working answer by googling?
I know I could create some hidden values on the page, but since the chart drawing script is in the head of the document surely it would try to create the charts before reading these values
If you are using ASP.NET MVC and Razor, you could use the following method
1. Calculate the needed values for the charts in code behind and assign it to model properties.
2. Put Razor code to render chart variables above the chart drawing script.
<!-- Render chart variables -->
<script type="text/javascript">
var chartVariable1 = #Html.Raw(#Model.ChartVariable1);
</script>
<!-- Chart drawing script -->
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
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.