I have a project with many scripts using Matplotlib. I'd like to build a web interface for this project.
How do you place a Bokeh chart within a Chameleon template? I'm using Pyramid and the Deform bootstrap if that matters.
Does anyone have a good example out there?
There are several different issues to address here.
If you are truly trying to port a lot of Matplotlib plots into interactive JS, then it's possible that the mpld3 project is a good fit for you. However, you should be aware that by using D3, there will be performance implications, depending on how many points are in your plot. Bokeh also does have basic Matplotlib support now, and will only be getting more. Jake is currently refactoring the mpld3 project into an explicit exporter and then D3 renderer, and we will also be potentially building off of this work for the Bokeh Matplotlib support.
To do this with Bokeh, you can grab the raw HTML for a plot by looking at how e.g. HTMLFileSession.dumps() is implemented: https://github.com/ContinuumIO/bokeh/blob/master/bokeh/session.py#L295. The default template is bokeh/templates/base.html; however, this is a full HTML file, and not a fragment. The dumps() method is pretty straightforward, as is the default template, so you should be able to get what you need from looking at those. Hopefully for the next release, we will have finished out a HTMLFragmentSession which will make it easier to embed.
You want to use plot.create_html_snippet. This function returns the code that you want to appear in the HTML, the function also writes out an embed file.
This is what an embed snippet looks like
<script src="http://localhost:5006/static/dc0c7cfd-e657-4c79-8150-6a66be4dccb8.embed.js" bokeh_plottype="embeddata" bokeh_modelid="dc0c7cfd-e657-4c79-8150-6a66be4dccb8" bokeh_modeltype="Plot" async="true"></script>
the following arguments control how the embed file is written out, and where the js code searches for the embed files.
embed_base_url controls the url path (it can be absolute or relative) that the javascript will search for the embed file in.
embed_save_loc controls the directory that python will write out the embed file in. embed_save_loc isn't necessary when server=True
static_path controls the url path (it can absolute or relative) that the javascript will use to construct URLS for bokeh.js and bokeh.css. It defaults to http://localhost:5006/static/, but could just as easily point to a CDN
When running the bokeh server, navigate to http://localhost:5006/bokeh/generate_embed/static . I think this requires you to be running on master because of a bug.
I hope this helps.
Related
I have an interactive graph generated by Plotly in Python that I saved to an html file using plotly.offline.plot(fig, filename='/tmp/interactiveGraph.html')
I am now trying to embed this interactive graph into some kind of webpage, using either Dash or Django. I'm leaning toward Django at the moment, given that I have an html version of the graph. Which would be better?
My code for the webpage is in a separate file from the code where I am creating the graph.
A lot of the tutorials I've found online just say to add a few lines to the template, but I don't know how to get those lines that they've described.
tl;dr: I'm looking for guidance as how to integrate an html file-for a Plotly interactive graph-with a web python script using Django or Dash
Side Question:
what is the difference between
plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
and what I have above?
Reference:
https://github.com/ricleal/DjangoPlotLy
https://www.pythonsetup.com/how-implement-data-visualization-django-and-plotly/
I would highly reccomend Django, its a great framework. As for this, the best option is to generate the data via JavaScript and Plotly has a great library for this. If you must use python, then Django can be used. Assuming you are familiar with Django, inside of your view you can collect your data and build your graph ( I would reccomend a celery task for something long running like this unless they are small graphs), and you can then collect the return from creating the graph in div format. This will return a string that holds all the needed html and css for the graphs. Put this inside of you get_context_data() method in your view and place it into the dictionary. You can the use that object inside of a template. I have done this before, if you are having a hard time feel free to DM me. Hope this helps some!
In regards to your side question, I believe having False for including JS will make the graph a bit smaller assuming you have an include for the plotly JS library. They might have done this in a newer release to make the graphs faster as they were significantly slower in the browser from python that the JS rendered one.
I am using bokeh to plot my math functions created with python/numpy.
I would like to use sliders as shown in
http://docs.bokeh.org/en/latest/docs/server_gallery/sliders_server.html
Once I create the html file with the plot, I would like to select different values on the sliders which modify the plot and then read back the chosen values in into python to use it for other manipulations.
What is the best way to read the chosen value on the slider from the html file back into python ?
I saw pyquery could be useful, but I cannot really figure that out.
Any suggestions would be appreciated based on above scenario.
There are two slider examples in the bokeh repo, where the slider is connected back to python via the bokeh server.
Sliders App
Taylor server
If this isn't what you were after, can you elaborate a little more?
A static HTML file and the state of the slider is inside a web browser and never reflected back to the HTML file. What you should be doing is to use bokeh-server - answered via bokeh-google group
I am working on generating some plots using python, but I am generating these plots using matplotlib which is saved as images. If I create an html page as a report with these plots, they are static images. I cannot zoom in or roll over on the plot to see more detailed or specific information on a time series plot.
My question is how can I make these plots dynamic? Can someone suggest the best way to get started and move forward from there?
You should use some additional libraries to achive your goal.
For example, there some good Python web frameworks wich you can use:
CherryPy - allows you to simply write web-app with Python and you can import your plot there.
Plotly Python API - it would simply generate interactive plot, but store it at Plotly platform, but they provide embeded-code option, so you can use it on your site.
I would suggest Plotly, because it is much simpler, but it depends on your needs.
You will definitely want to do it using javascript. It's by far your best option when it comes to quickly make interactive graphs that you can present to a lot of users. Any of these js libraries will do a great job.
You will then want python to provide the data. Depending on the js library you are using, you might be able to parse data from .json, .csv, etc...
If you don't need the data that makes up your plots to change (with user input, for example), then generating and saving flat files with python and having javascript parsing them from some directory might be just enough.
Otherwise, you want to take a look at a python web framework and use one as backend to serve the plots data by request (in that case .json is probably the right format).
Frameworks like Flask, CherryPy, Pyramid or even web2py might be the easier ones to start with.
The more research I do, the more grim the outlook becomes.
I am trying to Flat Save, or Static Save a webpage with Python. This means merging all the styles to inline properties, and changing all links to absolute URLs.
I've tried nearly every free conversion website, api, and even libraries on github. None are that impressive. The best python implementation I could find for flattening styles is https://github.com/davecranwell/inline-styler. I adapted that slightly for Flask, but the generated file isn't that great. Here's how it looks:
Obviously, it should look better. Here's what it should look like:
https://dzwonsemrish7.cloudfront.net/items/3U302I3Y1H0J1h1Z0t1V/Screen%20Shot%202012-12-19%20at%205.51.44%20PM.png?v=2d0e3d26
It seems like a neverending struggle dealing with Malformed html, unrecognized CSS properties, Unicode errors, etc. So does anyone have a suggestion on a better way to do this? I understand I can go to file -> save in my local browser, but when I am trying to do this en mass, and extract a particular xpath that's not really viable.
It looks like Evernote's web clipper uses iFrames, but that seems more complicated than I think it should be. But at least the clippings look decent on Evernote.
After walking away for a while, I managed to install a ruby library that flattens the CSS much much better than anything else I've used. It's the library behind the very slow web interface here http://premailer.dialect.ca/
Thank goodness they released the source on Github, it's the best hands down.
https://github.com/alexdunae/premailer
It flattens styles, creates absolute urls, works with a URL or string, and can even create plain text email templates. Very impressed with this library.
Update Nov 2013
I ended up writing my own bookmarklet that works purely client side. It is compatible with Webkit and FireFox only. It recurses through each node and adds inline styles then sends the flattened HTML to the clippy.in API to save to the user's dashboard.
Client Side Bookmarklet
It sounds like inline styles might be a deal-breaker for you, but if not, I suggest taking another look at Evernote Web Clipper. The desktop app has an Export HTML feature for web clips. The output is a bit messy as you'd expect with inline styles, but I've found the markup to be a reliable representation of the saved page.
Regarding inline vs. external styles, for something like this I don't see any way around inline if you're doing a lot of pages from different sites where class names would have conflicting style rules.
You mentioned that Web Clipper uses iFrames, but I haven't found this to be the case for the HTML output. You'd likely have to embed the static page as an iFrame if you're re-publishing on another site (legally I assume), but otherwise that shouldn't be an issue.
Some automation would certainly help so you could go straight from the browser to the HTML output, and perhaps for relocating the saved images to a single repo with updated src links in the HTML. If you end up working on something like this, I'd be grateful to try it out myself.
I want to Embed a chart in a Web Application developed using django.
I have come across Google charts API, ReportLab, PyChart, MatPlotLib and ChartDirector
I want to do it in the server side rather than send the AJAX request to Google chart APIs, as I also want to embed the chart into the PDF.
Which is the best option to use, and what are the relative merits and demerits of one over the other.
Another choice is CairoPlot.
We picked matplotlib over the others for some serious graphing inside one of our django apps, primarily because it was the only one that gave us exactly the kind of control we needed.
Performance generating PNG's was fine for us but... it was a highly specialized app with less than 10 logins a day.
Well, I'm involved in an open source project, Djime, that uses OpenFlashChart 2.
As you can see from our code, generating the JSON-data that OFC uses is a bit complex, but the output is very nice and user friendly, since you can add tooltips, etc. to the different elements.
Open Flash Chart 2
http://teethgrinder.co.uk/open-flash-chart-2/
python library http://btbytes.github.com/pyofc2/
kybi
One package I've wanted to try is graphite. It's a graphing server / platform built with Django. It's specialized for "numeric time-series data" though, like stock prices or bandwidth utilization. If that fits your need I would check it out. Here are some screenshots:
http://graphite.wikidot.com/screen-shots
I like client side charts because you can get full page plotting.
A good options seems to be Jquery Flot : http://code.google.com/p/flot/ which can load JSON data.
However, you won't get pdf support.
Perhaps you might want to have a look here: Django Plotting app.
The HowTo describes how to embed matplotlib plots into the admin interface and create a PDF view.
I have used FusionCharts Free with Django.
Its flash based, open source, multi-licensed and it's well documented. It's ActionScript 1, but AS version wasn't really a criteria for me, though it could be for others.