I am trying to use the mpld3-flask example ( https://github.com/nipunreddevil/mpld3-flask ) as a template to achieve a certain behavior. What I would like, is to add links on the header bar to different plots, rather than having a radio button query form.
Right now, the example code above, in templates/index.html, makes a container and then populates it with a plot when the user submits a query by clicking the "View Plot" button. That happens in this code, as far as I can tell, in index.html:
$("#query").click(function() {
$("#loading-div-background").show();
$("#container").hide();
var plot_type = $('input:radio[name=plot_type]:checked').val();
var qu = {"plot_type":plot_type}
$.ajax({
type: "POST",
async:true,
contentType: "application/json; charset=utf-8",
url: "/query",
data: JSON.stringify(qu),
success: function (data) {
var graph = $("#container");
graph.html(data);
$("#loading-div-background").hide();
$("#container").show();
},
dataType: "html"
});
});
What I would like instead is to add to the header bar that currently has "Home" in it, and bring up each example plot in a different page. I would route to a different link, and then populate the template html code with the data for the plot, without requiring a user query.
I am a bit of a novice with html and essentially know nothing about JavaScript at this point. My sense here is that there is some relatively easy way to use flask + jinja2 to do this, but I haven't been able to figure it out.
I am having some trouble with the sort of unclear namespaces that result from combining all of these languages. I am usually very strict with namespaces in my own python programming (ie I never, ever use 'from ____ import *') so this is driving me a little crazy.
After working for a while, I have found a solution that seems to work and achieve the behavior I want. Note that I am using the twitter bootstrap css and javascript packages.
Basically, I make a button group:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="home"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
Then in the javascript from the mpld3-flask example I use:
$('.btn-primary').on('click', function(){
var qu = {"plot_type":$(this).find('input').attr('id')}
$(this).addClass('active').siblings().removeClass('active');
$.ajax({
type: "POST",
async:true,
contentType: "application/json; charset=utf-8",
url: "/query",
data: JSON.stringify(qu),
success: function (data) {
var graph = $("#container");
graph.html(data);
$("#container").show();
},
dataType: "html"
});
});
Now I have a radio-button bar, with the currently active plot button set to 'active', which only requires one click on one of the buttons to draw a new plot.
EDIT: After learning more about flask and Jinja2, it is also easy to pass the mpld3-generated html to aa template, but there is a slight gotcha; it looks something like this
In the return of your python routing function:
return render_template('index.html', plot=mpld3_html)
Then in the html template you can reference this html with
{{plot|safe}}
Hope this helps someone else.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.