CakePhp + Smarty + OpenFlashChart 2

Pour un nouveau projet je voulais une librairie de graphes, Chart, qui « dépote », qui en mette plein la vue. J’ai donc testé une librairie Open Flash Chart qui utilise Flash, et dont les data peuvent être envoyées par PHP.

J’ai choisi Open Flash Chart car c’est sous licence LGPL.

Pour l’implémentation, j’ai quand même un peu galéré. Déjà utiliser Smarty avec CakePhp, les puristes vous diront que c’est pas bien. Mais je code 2 fois plus vite avec mes vues Smarty vu que je connais bien ce moteur de template.

Les exemples d’implémentation de sur le site de John Glazebrook, sont pour une utilisation classique sans framework MVC.

Vous trouverez sur CakePhp un tutoriel, sur un helper construit pour la version 1 de Open Flash Chart

Utiliser Open Flash Chart 2 sur Cake php avec Smarty :

  • J’ai pris les fichiers qui sont dans le dossier version2/php-ofc-library

app\webroot -> déposer open-flash-chart.swf

app\webroot\js -> déposer json2.js et swfobject.js (je n’ai pas voulu m’embeter avec encore un sous-répertoire pour le json, donc j’ai enlevé le répertoire intermédiaire)

vendors (à la racine de votre dossier) -> déposer le répertoire entier php-ofc-library. Il doit être possible de le mettre aussi dans app\vendors selon si vous voulez l’utiliser pour plusieurs appli ou juste pour celle-là.

Pas la peine d’utiliser le helper fourni sur CakePhp.

  • Dans une des fonctions de votre controller
class UsersController extends AppController {

    var $name = 'Users';
    var $helpers = array('xxx', 'xxx', 'xxx');
    var $uses = array('xxx', 'xxx');

    function home()
    {

Vous pouvez faire votre requête ou remplir un tableau de data qui va alimenter votre graph. J’ai repris l’exemple fourni sur les tutoriaux mentionnés plus haut

App::import('Vendor','php-ofc-library/open-flash-chart');

$title = new title( date("D M d Y") );

$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );

Maintenant il faut passer nos data à notre template Smarty

$this->set('chartData', $chart->toPrettyString());
  • Dans notre vue

Le plus compliqué a été de trouver pourquoi il ne récupérait pas les scripts js et l’objet swf au bon endroit, apparemment il faut lui indiquer les chemins suivants :

{literal}
<script type="text/javascript" src="../js/json2.js"></script>
<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("../open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

Ce n’est peut-être pas terrible mais ça marche.
Le problème étant que sans les 2 points, il croit que js est une fonction de notre controller. Sans les 2 points devant le swf, il ne se passe strictement rien à l’écran.

La suite :

<script type="text/javascript">

function ofc_ready()
{
    alert('ofc_ready');
}

function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}

var data = {/literal}{$chartData}{literal};
</script>{/literal}

Ne pas oublier les balises smarty literal, pour qu’il n’essaie pas d’interpréter le code js. Si vous avez une erreur du style Unrecognized tag alert, ça vient de là !

J’ai d’abord commencer par essayer d’intégrer la version 1 avec le helper, mais croyant que ça ne marchait pas, j’ai testé la 2.

Je pense que le problème était exactement le même : les chemins d’accés aux scripts et surtout au swf.

Pour les scripts, regarder le code source vous verrez de suite où il va les chercher, pour le swf par contre, il n’affiche rien à l’écran.

Bon courage !

Publicités