Utilisation de chart.min.js

[valentin8709]

Salut Idle! Alors suite à tes conseils, j'ai changé mes petits graphiques dégueus fais mains par l'utilisation de chart.js, et ça déchire =D Seulement, j'ai un petit soucis:

• soit j'écris dans le fichier du plugin un: <script src="./templates/default/js/chart.min.js"></script> les graphes fonctionnent, mais je n'ai plus de widget sur la dashboard...
• soit je n'écris pas la petite ligne de code, qui est normalement déjà intégrée (elle apparaît dans le code source de chaque page donc bon...), les dashboards fonctionnent comme il faut, mais mes graphes ne s'affichent plus...

Aurais-tu une idée d'où cela peut provenir? Merci bien =)

[valentin8709]

Nouvelles infos: si je met la parti javascript du footer dans le header, tout fonctionne. Mon code ne fonctionne pas vu que le js chart.min.js est appelé en fin de page, donc pas encore déclaré lorsque j'essaye de dessiner mes graphs, mais je ne sais pas comment corriger ça (j'ai bien essayé de m'inspirer du widget RAM mais sans succès, je suis pas un très bon dev =/). Voilà mon code:

        <script>
                Chart.defaults.global.responsive = true;
                 var tempData = {
                        labels : [<?php $i=11; while($i >= 0) { echo "\"" . date('d/m', strtotime('-'.$i.' day')) . "\", "; $i-=1; }?>],
                        datasets : [
                                        {
                                        fillColor : "rgba(223,58,1,0.4)",
                                        strokeColor : "#B40404",
                                        pointColor : "#fff",
                                        pointStrokeColor : "#9DB86D",
                                        data : [<?php $i = 0; while($i < 12) { echo $data[$i] . ", "; $i+=1; } ?>]
                                }
                        ]
                }

                var temperature = document.getElementById('temperature').getContext('2d');
                new Chart(temperature).Line(tempData);
        </script>

Si quelqu'un pouvait m'aider, ce serait cool =) Il suffit certainement d'ajouter un ".chart" quelque part, mais en essayant plusieurs trucs j'ai pas réussi...

[ldleman]

Normalement tu ne dois pas intégrer qui est effectivement dispo sur chaques pages.

Le fichier est effectivement dans le footer mais ça devrais marcher quand même puisque ton widget est lancé une fois la page mère complétement chargée, c'est pourquoi le plugin RAM fonctionne.

La question c'est ou mets tu ton code javascript actuellement ? Ton ton js de plugin ? En inline dans le widget ? Ailleurs ?

[valentin8709]

Alors pour le coup ce n'est pas un widget, c'est une page d'un plugin c'est peut être pour ça que ça ne fonctionne pas (si la page est chargée avant l'appel du JS). Sinon le code js est dans le plugin.php, le fichier principal. C'est ça qui poserait problème?

[ldleman]

tu pourrais m'envoyer ton plugin que je regarde ça plus en détail ?

[valentin8709]

Voilà la bête =P Si au passage tu vois des bouts de code dégueu, hésite pas à me le dire que je corrige ça. Si tu ne m'avais jamais parlé de chart.js je serai encore avec mes historiques très moyens! (J'ai du renommer le .php en .txt pour le passer à la moulinette github)

potager.plugin.disabled.txt

[ldleman]

Tu execute le js lors du chargement et non lorsque la page est complete, je pense que le pb viens de là.

Essaye avec $(document).ready()

<script type="text/javascript">
       $(document).ready(function(){
        Chart.defaults.global.responsive = true;
         var tempData = {
            labels : [<?php $i=11; while($i >= 0) { echo "\"" . date('d/m', strtotime('-'.$i.' day')) . "\", "; $i-=1; }?>],
            datasets : [
                    {
                    fillColor : "rgba(223,58,1,0.4)",
                    strokeColor : "#B40404",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [<?php $i = 0; while($i < 12) { echo $data[$i] . ", "; $i+=1; } ?>]
                }
            ]
        }

        var temperature = document.getElementById('temperature').getContext('2d');
        new Chart(temperature).Line(tempData);
});
    </script>

[ldleman]

Tu n'as plus besoin de mettre le .disabled dans le nom du fichier plugin

[ldleman]

La section

$file = fopen('plugins/potager/data/history_l.txt', 'r');
        if ($file) {
            $i = 0;
            while(!feof($file) && $i < 12) {
                    $buffer = fgets($file);
                    $data[$i] = (float)$buffer;
                    $i+=1;
            }
        }
        fclose($file);

peut être remplacée par $data = file_get_contents(__DIR__.'/data/history_l.txt')

[ldleman]

Les dirname(__FILE__) peuvent être remplacé par __DIR__

[ldleman]

Les trois/quatre menus

<div class="span3 bs-docs-sidebar"><br />
      <ul class="nav nav-tabs nav-stacked">
        <li><a href="./index.php?module=flower&bloc=sensors"><i class="fa fa-angle-right"></i> 1. Capteurs</a></li>
        <li class="active"><a href="./index.php?module=flower&bloc=histo"><i class="fa fa-angle-right"></i> 2. Historiques </a></li>
        <li><a href="./index.php?module=flower&bloc=actions"><i class="fa fa-angle-right"></i> 3. Actions </a></li>
        <li><a href="./index.php?module=flower&bloc=infos"><i class="fa fa-angle-right"></i> 4. Informations </a></li>
        <li><a href="./index.php?module=flower&bloc=help"><i class="fa fa-angle-right"></i> 5. Aide installation </a></li>
      </ul>
    </div>

doivent pourvoir être mutualisés étant donné leurs nombreux points communs

[ldleman]

Le <?php $i=11; while($i >= 0) { echo "\"" . date('d/m', strtotime('-'.$i.' day')) . "\", "; $i-=1; }?> est généralement mieux matérialisé avec un for : <?php for($i=11;$i >= 0;$i--) echo "\"" . date('d/m', strtotime('-'.$i.' day')) . "\", "; ?>

[ldleman]

Les document.getElementById('engrais') peuvent être récupéré en jquery par $('#engrais')

[ldleman]

En dehors de ça tu as pas mal de fonctions qui ne servent pas et de valeur en dur mais sinon je ne vois rien de choquant :)

[valentin8709]

Wah un grand merci pour toutes ces infos! Je prend ça en compte et te fais un retour dès que ce sera fait =)

Pour le nombre de fonctions qui servent à rien, c'est normal pour l'instant je me suis basé sur le plugin modele et étant donné que j'ai encore pas mal de fonctionnalités à ajouter au plugin, je les garde de côté pour prendre exemple dessus avant de les virer.

Par la même occasion je mettrai à jour mes autres plugins, en utilisant les bonnes pratiques que tu viens de me passer!

[valentin8709]

Ca y est j'ai mis à jour le code, c'est plus propre maintenant =) par contre, même avec le

<script type="text/javascript">
       $(document).ready(function(){
              ...
        });
</script>

les graphes ne s'affichent pas si la partie JS du footer.html n'est pas déplacée dans le header.html... =/