Come posizionare un grafico matplotlib in un contenitore html usando mpld3 e il pallone

Question

Sto provando a usare l'esempio mpld3-flask (https://github.com/nipunreddevil/mpld3-flask) come modello per ottenere un determinato comportamento. Quello che vorrei, è aggiungere link nella barra di intestazione a grafici diversi, piuttosto che avere un modulo di query per i pulsanti radio.

In questo momento, il codice di esempio sopra, in templates/index.html, crea un contenitore e poi lo popola con un grafico quando l'utente invia una query facendo clic sul pulsante "Visualizza grafico". Questo accade in questo codice, per quanto posso dire, 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" 
}); 
}); 

Quello che vorrei invece è quello di aggiungere la barra di intestazione che ha attualmente "casa" in esso, e portare ogni esempio di trama in una pagina diversa. Vorrei indirizzare a un altro link e quindi compilare il codice html del modello con i dati per la trama, senza richiedere una query utente.

Sono un po 'novizio con html e sostanzialmente non so nulla di JavaScript a questo punto. Il mio senso ecco che c'è un modo relativamente semplice per usare flask + jinja2 per fare questo, ma non sono stato in grado di capirlo.

Ho problemi con il tipo di spazi dei nomi non chiari che derivano dalla combinazione di tutte queste lingue. Di solito sono molto severo con gli spazi dei nomi nella mia programmazione Python (cioè non uso mai, mai "da ____ import *") quindi questo mi sta facendo diventare un po 'pazzo.

Answer 1

Dopo aver lavorato per un po ', ho trovato una soluzione che sembra funzionare e ottenere il comportamento che voglio. Nota che sto usando i pacchetti css di bootstrap e javascript di Twitter.

Fondamentalmente, io fare un gruppo di pulsanti:

<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> 

Poi nel javascript dall'esempio mpld3-pallone che uso:

$('.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" 
    }); 
}); 

ora ho un radio-button barra, con il pulsante di trama attualmente attivo impostato su 'attivo', che richiede solo un clic su uno dei pulsanti per disegnare un nuovo grafico.

MODIFICA: dopo aver appreso di più su flask e Jinja2, è anche facile passare l'html generato da mpld3 a un modello, ma c'è un leggero trucchetto; sembra qualcosa di simile

Nel ritorno del vostro funzione di routing pitone:

return render_template('index.html', plot=mpld3_html)

Poi nel modello HTML si può fare riferimento a questo html con

{{plot|safe}}

Spero che questo aiuti qualcun altro.