How to place matplotlib graph in html container using mpld3 and flask

Question

I am trying to use the mpld3 bulb example ( https://github.com/nipunreddevil/mpld3-flask ) as a template to achieve certain behavior. I would like to add links in the title bar to different graphs, instead of having a button request form.

Currently, the above example in the /index.html templates creates a container and then fills it with a schedule when the user sends a request by clicking the "View Plot" button. This 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" }); }); 

Instead, I would like to add to the title bar, which currently has a “Home”, and display each sample graph on a different page. I would direct to another link, and then fill in the HTML-code of the template with data for the chart, without requiring a user request.

I'm starting a bit with html and currently don't know anything about JavaScript. My point is that there is a relatively simple way to use + jinja2 flask to do this, but I could not figure it out.

I'm having some problems with fuzzy namespaces that result from combining all of these languages. I am usually very strict with namespaces in my own python programming (i.e. I never used "from ____ imports"), so this makes me a little crazy.

Answer 1

After working a while, I found a solution that seems to work and achieve the behavior that I want. Please note that I use twitter bootstrap css and javascript packages.

Basically, I make a group of buttons:

  <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 javascript from the mpld3 bulb 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 panel with radio buttons, with the active scene mode button set to “active”, which requires only one click on one of the buttons to draw a new storyline.

EDIT: After learning more about the jar and Jinja2, it is also easy to pass the mpld3-generated html to the template, but there is a small getcha; it looks something like this.

In returning 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.