CakePHP, Google Charts Plugin and JsHelper - cakephp

Question

i wish select an element of dropdownlist (choose a Project) and with JSHELPER (ajax) update the GRAPH that show statistics of this Project.
I can choose the Project and through the 'POST' I can generate the array graph, but i cannot show the GRAPH. I tested without JSHELPER and show my Graph.
MY VIEW CODE:
<b>ESCOLHA O PROJETO: </b>
<?php
echo $this->Form->select('projects', array($projects), array('multiple' => false,
'class' => 'span2',
'id' => 'projectsTest'));
?>
</br>
<div id="chart_div" >
</div>
<?php
$this->Js->get('#projectsTest')->event('change', $this->Js->request(array(
'controller' => 'Registos',
'action' => 'timePerProjectIssueTypeChart'
), array(
'update' => '#chart_div',
'async' => true,
'method' => 'post',
'dataExpression' => true,
'data' => $this->Js->serializeForm(array(
'isForm' => true,
'inline' => true
))
)));
?>
MY VIEW TIME_PER_PROJECT_ISSUE_TYPE_CHART
<div id="chart_div" >
<?php
echo $this->GoogleChart->createJsChart($timePerProjectIssueTypeChart);
?>
</div>
CONTROLLER
function timePerProjectIssueTypeChart() {
if (!empty($this->request->data['projects'])) {
$id_project = $this->request->data['projects'];
$totalProject = $this->timeSpentPerProjectSpecific(10001, 'Registo.issuetype');
$timeSpent = $this->totalTimeSpentPerProject(10001);
//Setup data for chart
$timePerProjectIssueTypeChart = new GoogleChart();
$timePerProjectIssueTypeChart->type("PieChart");
$timePerProjectIssueTypeChart->options(array('title' => "Percentagem de Tempo (horas) investido em cada Tarefa",
'height' => 300, 'width' => 500));
$timePerProjectIssueTypeChart->columns(array(
//Each column key should correspond to a field in your data array
'issuetype' => array(
'type' => 'string',
'label' => 'Tipo Tarefa'
),
'tempoGasto' => array(
'type' => 'time',
'label' => '% horas'
)
));
//You can also use this way to loop through data and creates data rows:
foreach ($totalProject as $row) {
if ($timeSpent[0][0]['tempogasto'] != 0) {
$percentagemTempoGasto = ($this->timeToHour($row[0]['tempogasto']) / $timeSpent[0][0]['tempogasto']) * 100;
} else {
$percentagemTempoGasto = 0;
}
if (!empty($row['IssueType'])) {
$timePerProjectIssueTypeChart->addRow(array('tempoGasto' => $percentagemTempoGasto, 'issuetype' => $row['IssueType']['pname']));
} else {
$timePerProjectIssueTypeChart->addRow(array('tempoGasto' => $percentagemTempoGasto, 'issuetype' => 'Sem tarefa'));
}
}
//Set the chart for your view
$this->set('totalProject', $totalProject);
$this->set('timeSpent', $timeSpent);
$this->set(compact('timePerProjectIssueTypeChart'));
}
}
I do not put the code of the controllers, because individually tested and are working.
Thanks

Answer 1

Teste com ajax, sem o JS helper:
$(document).ready(function() {
$("#projectsTest").change(function(){
$.ajax({
type: 'POST',
data: { projects: $('#projectsTest').val()},
url: 'timePerProjectIssueTypeChart',
success: funcion() {
$("chart_div").load('timePerProjectIssueTypeChart');
}
})
})
});
E não esqueça de colocar $this->layout = false no controller