Google Chart not display data

Question

I have a problem with Google Chart, Twig ans Symfony. I make an ajax call to a function which send data to the js function drawing chart. I displayed data outside of the chart and it's working well. I also tried to display a chart with data hard-coded in it and it also displays well. It's only when I put datas from my Controller in chart's datatable that it's not working.

I don't show my Controller because it's sending datas correctly.

Here's my code :

Drawing function :

function drawGraphRepNoteOfColle() {
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Notes', 'Nombre'],
                {% for r in repartitionsColle %}
                    [{{ r.note }}, {{ r.nombre }}],
                {% endfor %}
            ]);

            var options = {
                chart: {
                    title: 'Company Performance',
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017'
                }
            };

            var chart = new google.charts.Bar(document.getElementById('graphRepNoteColle'));

            chart.draw(data, options);
        }
    }

Ajax Call :

function rechargerColleStats() {
        var groupes = document.getElementsByClassName("filled-in");
        var groupesSelected = getSelectedGroupesOf(groupes);
        var colleId = document.getElementById('collapside_colle_form_colles').value;
        var numAdherent = document.getElementById('numAdherent').value;

        var DATA = {groupesSelected: groupesSelected, idColle: colleId, numAdherent: numAdherent};
        var request = $.ajax({
            type: "POST",
            url: "{{ path('paces_statistique_calculstatistique_getstatscolle') }}",
            datatype: "html",
            data: DATA,
            success: function (response) {
                document.getElementById("bodyColapColle").innerHTML = response;
                drawGraphRepNoteOfColle();
                document.getElementById("tableauQ").reload(true);
            }
        });
    }

index.html.twig :

<nav class="top-nav panel-title">Statistiques</nav>
<div class="card-panel hoverable">
   // Groupes selected field (checkboxes)
   <div id="bodyColapGroupes">
      {% include 'PACESStatistiqueBundle:Default:groupesCheckBoxes.html.twig' %}
   </div>

   // Form to get colleId
   <fieldset style='display: inline; border: 2px solid deepskyblue;'>
       <legend> Choix de la colle</legend>
       {{ form_start(formColle) }}
       {{ form_end(formColle) }}
   </fieldset>
</div>

<div class="card-panel hoverable">
    Colles
    <div id="bodyColapColle">
       {% include 'PACESStatistiqueBundle:Default:collapsideColle.html.twig' %}
    </div>
</div>

collapsibleColle.html.twig :

<div id="colles">
    <fieldset style='display: inline; border: 2px solid deepskyblue;'>
        <legend> Minor </legend>
        {% if minor is defined %}
            {{ minor }} / {% if typeColle == 'QC' %}{{ nbQc }}{% else %}20{% endif %}
        {% endif %}
    </fieldset>
    <div class="center">
        <fieldset id="fieldchartA"  style='height:100%; width: 100%  ;border: 2px solid deepskyblue;'>
            <legend> Chart1</legend>
            <div id="graphRepNoteColle"></div>
        </fieldset>
    </div>
</div>

getStatsColleAction in Controller :

$repartitionsColles=$em->getRepository( RepartitionColle::class )->findBy(['idStatColle'=>$statsColle]);

            //on en recupere les données minor, major, medianne
            $notes=array();
            $nbRepartition = 0;
            foreach($repartitionsColles as $repartitionsColle){

                $repartition[$nbRepartition]['note'] = $repartitionsColle->getNote();
                $repartition[$nbRepartition]['nombre'] = $repartitionsColle->getNombre();

                $nbRepartition++;
            }
            array_multisort(array_column($repartition, 'note'), SORT_ASC, SORT_NUMERIC, $repartition);

Array sent is $repartition. getNote() is a float and getNombre is an integer.

Drawing function and Ajax call are in index.html.twig.

GetStatsColle (function called with AJAX) returns collapsideColle.html.twig with required datas.

Ajax is working : I send other infos with the same call and it is rendered.

Answer 1

i would recommend not relying on google.charts.setOnLoadCallback to draw the chart everytime,
especially if you plan to draw multiple charts, it should only be called once per page

instead, swap the order of things and start with google.chart.load first,
then you can draw the chart directly from the ajax call

you can include the callback in the load statement as well...

try something like...

google.charts.load('current', {
  callback: rechargerColleStats,
  packages:['bar']
});

function drawGraphRepNoteOfColle() {
    var data = google.visualization.arrayToDataTable([
        ['Notes', 'Nombre'],
        {% for r in repartitionsColle %}
            [{{ r.note }}, {{ r.nombre }}],
        {% endfor %}
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017'
        }
    };

    var chart = new google.charts.Bar(document.getElementById('graphRepNoteColle'));

    chart.draw(data, options);
}

function rechargerColleStats() {
    var groupes = document.getElementsByClassName("filled-in");
    var groupesSelected = getSelectedGroupesOf(groupes);
    var colleId = document.getElementById('collapside_colle_form_colles').value;
    var numAdherent = document.getElementById('numAdherent').value;

    var DATA = {groupesSelected: groupesSelected, idColle: colleId, numAdherent: numAdherent};
    var request = $.ajax({
        type: "POST",
        url: "{{ path('paces_statistique_calculstatistique_getstatscolle') }}",
        datatype: "html",
        data: DATA,
        success: function (response) {
            document.getElementById("bodyColapColle").innerHTML = response;
            drawGraphRepNoteOfColle();
            document.getElementById("tableauQ").reload(true);
        }
    });
}