web-dev-qa-db-fra.com

Redessiner Google Chart après chaque appel Ajax

Lorsque le graphique se charge la première fois avec la réponse Ajax par défaut initiale, cela fonctionne correctement. Si j'ajoute dans console.log (chart_data), je vois mes données par défaut, puis après ma soumission, je vois les nouvelles données. Le seul problème est que le graphique ne se dessine plus. Je sais que la fonction drawChart n'est pas exécutée une deuxième fois, je ne sais tout simplement pas pourquoi. Je suppose que si c'est le cas, le graphique se redessinera. Désolé si la réponse est évidente; Je suis très nouveau sur jQuery/Ajax.

var chart_data;
var startdate = "default";
var enddate = "default";

function load_page_data(){
    $.ajax({
        url: 'get_data.php',
        data: {'startdate':startdate,'enddate':enddate},
        async: false,
        success: function(data){
            if(data){
                chart_data = $.parseJSON(data);
                google.load("visualization", "1", {packages:["corechart"]});
                google.setOnLoadCallback(function(){ drawChart(chart_data, "My Chart", "Data") })
            }
        },
    });
}

load_page_data();

function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
    var chart1_data = new google.visualization.DataTable(chart_data);
    var chart1_options = {
        title: chart1_main_title,
        vAxis: {title: chart1_vaxis_title,  titleTextStyle: {color: 'red'}}
    };

    var chart1_chart = new google.visualization.BarChart(document.getElementById('chart1_div'));
    chart1_chart.draw(chart1_data, chart1_options);
}

Toute aide serait appréciée. Merci!

jqueryajaxgoogle-visualization
23
Robert

vous ne devez faire google.load qu'une seule fois sur une page. Le fait que vous chargiez des données complique un peu les choses, mais pas beaucoup. Je vous recommande de faire google.load une fois en haut de votre javascript et de définir load_page_data comme rappel. Ensuite, vous appelez drawChart à partir de là. Le code modifié ressemblerait à ceci:

var chart_data;
var startdate = "default";
var enddate = "default";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(load_page_data);

function load_page_data(){
    $.ajax({
        url: 'get_data.php',
        data: {'startdate':startdate,'enddate':enddate},
        async: false,
        success: function(data){
            if(data){
                chart_data = $.parseJSON(data);
                drawChart(chart_data, "My Chart", "Data");
            }
        },
    });
}

function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
    var chart1_data = new google.visualization.DataTable(chart_data);
    var chart1_options = {
        title: chart1_main_title,
        vAxis: {title: chart1_vaxis_title,  titleTextStyle: {color: 'red'}}
    };

    var chart1_chart = new google.visualization.BarChart(document.getElementById('chart1_div'));
    chart1_chart.draw(chart1_data, chart1_options);
}
32
Sergey G

Si vous avez déjà déterminé que la fonction ne se déclenche pas la deuxième fois par un console.log ou quelque chose d'autre, vous pouvez essayer de supprimer les paramètres de votre fonction et de l'appeler comme Google le fait dans leurs exemples:

google.setOnLoadCallback(drawChart);

Votre code me semble bien mais je ne sais pas comment setOnLoadCallback prépare les paramètres car je ne suis pas très familier avec les bibliothèques de graphiques.

https://developers.google.com/chart/interactive/docs/basic_load_libs

1
jphase