CakePHP，Google Charts插件和JsHelper [英] CakePHP, Google Charts Plugin and JsHelper

问题描述

我希望选择一个dropdownlist（选择一个项目）的元素，并使用JSHELPER（ajax）更新显示此项目的统计信息的GRAPH。

i wish select an element of dropdownlist (choose a Project) and with JSHELPER (ajax) update the GRAPH that show statistics of this Project.

项目和通过'POST'我可以生成数组图，但我不能显示GRAPH。我在没有JSHELPER的情况下测试并显示我的图表。

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.

我的视图代码：

    <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

?> MY VIEW TIME_PER_PROJECT_ISSUE_TYPE_CHART

<div id="chart_div" > 
<?php

            echo $this->GoogleChart->createJsChart($timePerProjectIssueTypeChart);
            ?>

</div>

CONTROLLER

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.

感谢

推荐答案

Teste com ajax ，sem o JS helper：

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

$ this-> layout = false 无控制器

E não esqueça de colocar $this->layout = false no controller

这篇关于CakePHP，Google Charts插件和JsHelper的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！