CakePHP,谷歌图表插件和JsHelper

时间:2013-05-27 15:57:26

标签: cakephp

我希望选择下拉列表的一个元素(选择一个项目),并使用JSHELPER(ajax)更新显示此项目统计信息的GRAPH。

我可以选择项目并通过' POST'我可以生成数组图,但我无法显示GRAPH。我在没有JSHELPER的情况下进行了测试并显示了我的图表。

我的观看代码:

    <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
            ))
)));

&GT?; 我的观点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'));
        }
    }

我没有放置控制器的代码,因为已经过单独测试并正在运行。

由于

1 个答案:

答案 0 :(得分: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');
                }
     })
})
        });

Enãesqueçadecolocar $this->layout = false无控制器