Forum : google charts

j'essai d'implementer un diagramme avec l'outil google charts mais ça ne marche pas rien ne s'affiche, je developpe sous cakephp. je sais pas si je procède mal, je voudrais avoir l'avis de quelqu'un, merci .
Voici le code de mon controller

public function dashboard() {
$profiler=$this->Profiler->find('all', array('conditions'=>array('user_page'=>$user_id),'order'=>'Profiler.date DESC'));
        foreach($profiler as $key){
            $date_visit=$key['Profiler']['date'];
            $visit=$this->Profiler->find('count',array('conditions'=>array('user_page'=>$user_id,'date'=>$date_visit)));
            $datevisit[]=$date_visit;
           }
           $this->set('visit',$visit);
           $this->set('datevisit',$datevisit);

    }

le code de ma view

<div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class='fa fa-line-chart fa-lg'></i> <?php echo __('My popularity rating',true); ?></h3>
      </div>
      <div class="visitors panel-body">
        <div id="chart_div"></div>
      </div>
    </div>
  </div>

<?php echo $this->Html->script('https://www.google.com/jsapi');?>

<script type="text/javascript">
google.load("visualization", "1", {packages:["Columnchart"]});
google.setOnLoadCallback(<?php echo $name_chart; ?>);
function <?php echo $name_chart; ?>() {
  var data = new google.visualization.DataTable();
    // Nous n'avons que 2 légendes : le nom d'utilisateur (type string) et son nombre de posts (type number)
    data.addColumn('date', 'datevisite');
    data.addColumn('number', 'visit');
    data.addRows([
     ['$datevisit', $visit],

      ]);
    // Modifiez les options à votre convenance
    var options = {
      width: 450, height: 300,
      title: 'nombre de visite sur votre profile'
    };

    // Affichage du camembert généré dans le div défini au début
    var chart = new google.visualization.PieChart(document.getElementById('<?php echo $name_chart; ?>'));
    chart.draw(data, options);
  }
</script>

Romano83

Dans ton data.addRows tu mets :

data.addRows([
['$datavisit', $visit],
]);

Je pense que se serait plus comme ça :

data.addRows([
[<?= $datavisit ?>, <?= $visit ?>],
]);

wenz

Auteur

bonjour romano83 pour ta réponse, mais ça ne marche toujours pas, quelqu'un à une idée de comment passer les variables?
Merci

Romano83

Je viens de voir un petit détail de ta fonction dashboard. Tu fais un foreach pour récupérer tes variables $visitset $datavisit.
Ce que je n'avais pas vu c'est que pour ta variable $visit, tu vas toujours récupérer la dernière valeur de ton foreach, la variable étant érasée à chaque itération du foreach.
Le plus simple pour envoyer tes données à ta vue (et d'après la doc de Google Chart), c'est de construire un tableau du style ('legende', 'value') :

foreach($profiler as $key){
            $date_visit=$key['Profiler']['date'];
            $visit=$this->Profiler->find('count',array('conditions'=>array('user_page'=>$user_id,'date'=>$date_visit)));
            $datevisit[$date_visit] = $visit;
}
$this->set('datevisit', $datevisit);

Ensuite, dans ta vue :

var data = new google.visualization.DataTable();
    // Nous n'avons que 2 légendes : le nom d'utilisateur (type string) et son nombre de posts (type number)
    data.addColumn('date', 'datevisite');
    data.addColumn('number', 'visit');
    data.addRows([
    <?php foreach ($datevisit as $key => $value) : ?>
            [<?= $key ?>,  <?= $value ?>],
   <?php endforeach; ?>
      ]);

C'est certainement à adapter mais ce doit être proche de la solution !

EDIT : tu veux faire quoi comme graph ? Un graph avec des colonnes ou en forme de camembert ?
Je n'avais pas vu mais tu charges le package 'columnChart' mais tu souhaites rendre un camembert !!! Si tu veux faire un camembert, il faut que tu charge le package corechart (lien)

wenz

Auteur

Bonjour Romano, le diagramme ne s'affiche toujours pas , mais quand je verifie dans le console j'ai l'erreur suivante :SyntaxError: expected expression, got '<' dashboard:395:17 mais je n'ai laissé aucun caractère de genre

Romano83

Peux tu nous faire voir ce qu'il y a à la ligne 395 ? Ainsi que l'erreur telle que affichée dans ta console STP ?

wenz

Auteur

voici ce qui est à la ligne [<?= $key ?>, <?= $value ?>],
l'erreur telle que affichée dans le console: SyntaxError: expected expression, got '<'
Merci

Azorgh

Il faut rajouter des quotes pour qu'il n'y ai pas d'erreurs de JS :

["<?= $key ?>", "<?= $value ?>"],

Pense a regarder ce que donne le JS en inspectant le code source !

wenz

Auteur

j'ai toujours la même erreur

wenz

Auteur

C'est reglé, j'ai transformé la variable en string avant de passer ça au javascript voici le code:

<?php 

$donnee="";
foreach($datevisit as $key=>$value){
  if($donnee!="")$donnee=$donnee.",";
$donnee=$donnee."['".$key."',".$value."]";
}

?>

et ça marche bien, mais j'ai un autre problème, j'ai mis la div qui traduit le graph c'est à dire ```
<div id="chart_div"></div>

google charts

9 réponses