Ajax a Google chart – vykreslení grafu

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Namespace
Člen | 80
+
0
-

Ahoj,
chtěl bych poprosit o pomoc či radu. Jsem už několik dní zaseknutý a nevím, kudy dál.

Mám formulář složený z dependent selectboxů s tím, že poslední select box ovlivňuje snippet v šabloně, kde je umístěná konfigurace Google Chart

<?php
{snippet graph}
?>
<script>
<script type="text/javascript">
        google.load("visualization", "1.1", { packages:["bar"]});
		google.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Popis grafu', 'Popis grafu', 'Popis grafu'],
                    ['Hodnota 1', {$data['statistic_data'][0]['q1g']}, {$data['statistic_data'][0]['q1c']}],
                 ]);

                var options = {
                    chart: {
                        title: 'Title',
                        subtitle: 'Subtitle',
                    },
                    bars: 'horizontal'
                };

                var chart = new google.charts.Bar(document.getElementById('chart'));
                chart.draw(data, options);


</script>
<?php
<div id="chart" style="width: 950px; height: 600px;"></div>
</snippet>
?>

Celé to funguje správně, až na to, že se mi nevykreslí ten graf. Proměnná $data je po odeslání ajax požadavku v šabloně přístupná. Lze ji dumpnout a dál s ní pracovat.

Pokud to udělám celé „neajaxově“ a normálně zpracuji formulář a celou stránku znovu vyrenderuji, tak se vše zobrazí korektně.

Mám teorii, že se graf nezobrazí, protože <div id=„chart“></div> v době renderování celé stránky vlastně neexistuje a je tam dodán až po ajaxovém požadavku.

Js pro obsluhu ajaxu vypadá takto:

<script>
{define #jsGraph}

$('#frm-selectForm-fourth').on('change', function() {
    link = '{link $link."!"}';
    link = link.replace("&amp;","&");
    $.nette.ajax({
        type: 'GET',
        url: link,
        data: {
            'value': $(this).val(),
            'year': $("#frm-selectForm-first>option:selected").html(),
        },
     }
    });
});
{/define}
</script>

Presenter:

<?php
public function handleGraphChange($value, $year){
   //... nejaka logika pro ziskani dat
   $this->template->data = $data;
   $this->redrawControl('graph');

}
?>

Bohužel jsem v js celkem amatér začátečník, tak netuším, kde dělám chybu a jak (a zda vůbec) to lze řešit.

Nevěděl by někdo, co s tím?

Mnohokrát děkuji

akadlec
Člen | 1326
+
+1
-

Poslední dobou se tu ty dotazy nějak množí :( tohle se týká JS, a ve zkratce, když provedeš AJAX požadavek tak se ti jednoduše samy nespusti metody co ty google grafy vykreslí. To musíš udělat ty v nějaké onSuccess metodě toho ajaxu. Zavoláš si nějakou init metodu google grafů.....

Vojtěch Dobeš
Gold Partner | 1316
+
+2
-
$.nette.ajax({
	// ...
}).done(function() {
	drawChart();
});
Namespace
Člen | 80
+
0
-

Děkuju! :-)