Need example embedding plot with bokeh - javascript

Could anybody give me a brief example of how to use bokeh's embed tool? I've had a little bit of luck with the create_html_snippet() but I need a method that will support the use of hovertool for a barchart. I want absolute basics if possible, just any example or anything.
My situation:
novice at Javascript (do I need to do an import statement in my html?)
novice at html (haven't made a site for years)
still pretty beginner with bokeh too.
not running bokeh server, just want to embed static html like I receive from the save() method.
EDIT: none of the resources I found were super helpful but for others who stumble upon this this might help.
bokeh.embed.autoload_static(plot_object=myplot, resources=Resources('cdn'), script_path='embed.js)
This returns 2 items the first goes in that embed.js file. The second goes straight onto your html.

I've just stumbled upon the deprecated create_html_snippet myself, after updating to the new bokeh and breaking my code. After going through the docs about embedding I managed to get it to work again, and here's a simple example code which works for me.

As you said in your comment, we have a new Bokeh embed API since 0.5 release.
You can see some embedding examples here:
https://github.com/bokeh/bokeh/tree/master/examples/embed
And you have here a little bit of docs about embedding:
https://docs.bokeh.org/en/latest/docs/user_guide/embed.html
Let's know if you need additional help to work on this...

Related

How do I create page transitions?

I want to create a circular page transition as shown in the navigation of this site I know I need to use barba.js however I have no idea where to start I've spent all day looking for a tutorial on how to achieve this but I have found nothing. Can anyone please suggest where to start looking on how to create this I have never used javascript before and am quite new to HTML and css
EDIT: apologies I should've mentioned I already have my site done with separate pages now I would like to sort out the transitions between them.
to use a javascript library is a difficult thing if you have never seen javascript, but if you are familiar with coding in other languages you could start by scripting simple tests and see how it works, watch some short tutorial or see examples, and then look to specific documentation on how to use barba.js
Instead if you haven't programmed anything yet start from the basis, learn about the logic of programming (using tutorials for beginners and trying small projects yourself), at some point you'll be ready to create using a library :)
I would recommend getting a solid fundamental understanding of HTML, CSS, and JavaScript before implementing a JavaScript library like barba.js. barbra.js is implemented in JavaScript so it will be confusing to try to understand where the library ends and pure Javascript starts. https://www.w3schools.com/js/default.asp is a great resource to get a solid fundemental in js. Here is the link to a barba.js tutorial if you still want to go ahead with it https://barba.js.org/docs/getstarted/basic-transition/
Perhaps make a new page, then transition from there. I haven't been doing HTML for a bit, so I've lost the code. Perhaps, use from transfering one page to another.

What's the best way to create a pdf document with charts and in a decent quality?

First of all, I want to apologize for my English, I know my grammar is not the best, I'm not a native speaker so sometimes I have a hard time finding the right words or trying to explain the things I have in mind. So if you have a problem understanding what I want, please let me know and I'll try to be clearer.
I'm making a web app, the backend is made in PHP.
I need to create some kind of pdf-report for the users with charts, tables, pictures, and I need it to be decent (Quality and Style)
I don't know if the best option is a javascript library, 'cause I've found some libraries, but these make not really good looking pdfs.
So I was looking for a javascript library, but nothing seems to fit my requeriments.
I'll give you some pictures in order for you to have a better idea about what I want:
Sales report: This was the closest I could find to what I want.
Another sales report Something like this
Invoice I need something that allows me to make a really good looking design for the document, similar to this invoice
I'm really getting tired of looking and found nothing... It's been almost 2 months now, maybe more.
So my first idea was to use a javascript library that could convert html to pdf, but I was so naive and I didn't know how hard it was to convert html to pdf and without messing with the structure of the elements (The visual organization)
I first tried jsPDF by MrRio, but it doesn't support css (Something that I really need) or the charts (If the charts are pictures, it works fine, but if they are generated with a library like chartJS or highcharts it won't work).
I tried with some similar plugins but all of them had similar problems
Here is the link for jsPDF and their git
Then I found jsreport, I did a really nice thing in their playground and it worked perfectly. The problem is it needs NodeJS and my Site is made in nodeJS, and I don't know if there is a way to use jsreport with php and if there is I'm not sure if it will work as nice as it did in their playground.
Something that I just tought about if there will be a way that use nodeJS only for this feature, I don't know it is not recommended or something, need to find more about this, idk what you guys think.
Jsreport can use multiple recipes like PhantomJS to generate the PDF
I've found other plugins but they are also for nodeJS only.
Here is jsreport site
Then I tried again jsPDF but this time using it along with html2canvas and it worked almost fine, but the quality decreases a lot and the text cannot be selected or copied. I managed to increase the quality a bit, but nothing further that.
I have other ideas, something related to the print option from the browsers, but haven't found anything good.
The other idea that I don't know if it possible, it's making some kind of document like a template and then somehow add the user data inside that template, to finally have a pdf but with the users data.
Read this, here is some related info.
So, the reason I want this feature it's because most of the clients that use my Web App, require this function. So I can't migrate my app to Node or Rails, because it will take a really long time, and I don't have that time right now, so I don't know what are my options. The solution doesn't need to be free, but if it is, it will be great, because I don't have a big budget for a really expensive plugin.
Thank you for reading my question, I really need help with this, so let me know everything you have in mind, every answer is appreciated even if I've already tried it, because maybe you can came up with a different solution using something that I have used already.
Prepare your Html page with Highcharts or whatever charts you want to get and then use this tool WkHtmltoPDF

JavaScript Hidden iFrame comet

I need to implement comet, preferably with the hidden "forever iFrame" technique using PHP to instantly update a file on the server and get data from that file (and then JavaScript would use that data to manipulate the webpage). I have been searching for a detailed example for how to do something like this. Much of what I have found I do not understand or I think is not applicable. I am not fluent in PHP, yet.
If anyone knows or knows how to find a detailed example of this or could make one, I would be much obliged.
I'm sure this is close to what you want:
http://code.jenseng.com/jenChat/
The guy even mocks the technique as preposterously outdated, but it's exactly what you need. Be warned, as I seem to remember, there's a little bug in the actual code which stops it from working out the box, like some erroneous filehandle.
Get back to me here if you can't spot it. I can assure you the code works perfectly once the error is spotted. I think it's in chat.php, I'm checking.

Display Comic Book files on a webpage?

I'm thinking about creating a webpage and I'm trying to brainstorm some ways to display them in the page.
If i wanted to get dirty and create everything myself, i think i could do it with html5, CSS3, and javascript/jquery. Just do some kind of page buttons with an image tag and maybe get into some more detailed stuff as it comes up (i dont know how i would do zooming and multiple pages).
But wahat i really want to know is if there is already some way to do this? I've looked around for a bit and cant seem to find any sort of plugin that would read a cbz file or display an set of images with the 'e-reader' type of tools in mind. Just wondering if anyone knows of anything?
Thanks
I used to use an online reader for a long time so I started an experiment to build one myself a while back: netcomix
It's open source so you can see if you find anything appealing in what I did. I figured I'd do all the real UI work client side with HTML, CSS, and JavaScript and the server was strictly responsible for acting as a service (for example, to supply a list of comics or a list of all the pages in a particular issue) and serving up the individual JPG/PNG/GIF files. That compartmentalized things nicely and I was very pleased with how jQuery BBQ gave me a history that I could back through even though I stayed on one page the whole time.
Now if I were to do the same experiment again, I'd use Backbone.js to give some structure to the client side and obviously it needs a lot of love because the server side really does nothing at the moment. Early versions were strictly hard coded although I started putting in some simple SQL stuff in there in the latest version. It's nothing more than an experiment though and should be treated as such. It's there for ideas and little else. If you find it interesting and want some more ideas contact me and I'll be happy to let you know all my wacky ideas for such a program.
I know this is an old question. But web technologies have gotten better in the last few years. There are several comic book readers that can work in the browser using pure HTML and JavaScript. I wrote one called: http://comic-book-reader.com .
If you want to see a very simple example of how to read CBR and CBZ files in the browser. You should check out http://workhorsy.github.io/uncompress.js/examples/simple/index.html which uses the JavaScript library https://github.com/workhorsy/uncompress.js

JavaScript/jQuery google style website preview

I remember following a like off of here a little while ago for something called shark.js or sharpe.js (but I might be wrong on the name). I've tried googling it, looking through here, my browser history and I have had no luck. It wasn't wkhtmltopdf, I know that much. Does anybody know what it might be called or what I am talking about? Have you got a link to it please?
Stack overflow Question: jQuery Webpage Preview
From the second answer:
http://craigsworks.com/projects/qtip/demos/content/thumbnail
That should be what your looking for, don't know if it's the exact same thing, but same functionality.
Not sure how this can be done in client side javascript in real-time. However, I bet Google uses a server-side process to capture a screenshot and then uses javascript to request an image to display to the client.

Categories

Resources