Ajax a Google chart – vykreslení grafu
- Namespace
- Člen | 80
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("&","&");
$.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
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ů.....