Recupérer les données pour JavaScript

Pré-requis

Nous supposons que vous utilisez Zend Framework. Donc, nous n'aborderons pas les détails de la connexion à votre base de données.

Si vous n'utilisez pas Zend Framework, les scripts décrits ci-après sont néanmoins facilement adaptables à votre configuration.

La base de données

Pour notre exemple, nous avons une base de données et une table intitulée frequentation. Cette table enregistre l'accès à chaque rubrique d'un site web, ce pour analyser la popularité de ces rubriques.

CREATE TABLE IF NOT EXISTS `frequentation` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nom_script` varchar(64) NOT NULL DEFAULT '',
  `intervalle` varchar(14) DEFAULT NULL,
  `visites` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id_frequentation`),
  UNIQUE KEY `nom_script` (`nom_site`,`nom_script`,`intervalle`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Dans cette table, nous avons quatre champs:

id numéro de l'enregistrement, incrémentation automatique
nom_script qui mémorisera le nom de la rubrique à laquelle on accède, exemple: annonces, forum, articles, etc...
intervalle qui mémorise l'intervalle de temps souhaité pour mémoriser une fiche de fréquentation, exemple 2014-02-03 si on veut une fiche par jour, 2014-02 si on veut une fiche par mois....
visites qui mémorise le nombre d'accès à une rubrique dans l'intervalle de temps souhaité

On a dans le site un script qui enregistre l'accès à chaque rubrique. Par exemple, si un visiteur souhaite voir les annonces, il clique sur annonces. Le script cherche une fiche avec nom-scipt='annonces' et avec l'intervalle correspondant à la date souhaitée DATE("Y-m-d") par exemple pour la date du jour:

si cette fiche n'existe pas, crée la fiche et met 1 comme valeur de visites
si cette fiche existe, incrémente la valeur de visites

Donc, si tout fonctionne bien, on se retrouve au bout d'un certain temps avec un historique des rubriques avec un enregistrement par jour et par site.

Voici donc une requête type sur cette table pour récupérer un état statistique:

SELECT sum(visites) AS nb, nom_site
FROM frequentation
GROUP BY nom_site
ORDER BY nb DESC

On rajoutera une clause WHERE.... si nécessaire pour borner l'intervalle de temps à analyser.

Pour notre exemple, nous allons nous contenter d'un résultat global.

Notre modèle d'accès aux données

Avec Zend Framework, tout est objet.

Pour accéder aux données de notre table frequentation, on définit une nouvelle classe qui contiendra cette méthode:

    /**
     * renvoie les stats de visites d'un site web
     * @return array
     */
    public function getStatsVisitesSites() {
        $sql = "SELECT sum(visites) AS nb, nom_site "
        . "FROM `frequentation` "
        . "GROUP BY nom_site "
        . "ORDER BY nb DESC";
        return $this->_db->query($sql)->fetchAll();
    }

Si vous n'utilisez pas Zend Framework, à vous d'adapter cette ligne de code:

        return $this->_db->query($sql)->fetchAll();

Exemple de résultat obtenu avec cette requête visualisée à l'aide de la fonction var_dump();

array (size=4)
  0 => 
    array (size=2)
      'nb' => string '17701' (length=5)
      'nom_rubrique' => string 'annonces' (length=8)
  1 => 
    array (size=2)
      'nb' => string '6936' (length=4)
      'nom_rubrique' => string 'forum' (length=5)
  2 => 
    array (size=2)
      'nb' => string '6482' (length=4)
      'nom_rubrique' => string 'agenda' (length=6)
  3 => 
    array (size=2)
      'nb' => string '5726' (length=4)
      'nom_rubrique' => string 'articles' (length=8)

Une classe RGraph pour adapter les données

Il nous faut maintenant adapter ces données pour que RGraph qui est une librairie JavaScript puisse les traiter correctement.

C'est donc un script PHP qui va faire ce travail. Pour celà, nous créons une nouvelle classe Rgraph dans le répertoire application/models:

<?php
class Application_Model_Rgraph
{
    /**
     * Extraction données d'un champ et mise en forme pour RGraph
     * @param array  $result   tableau données issues de SQL
     * @param string $field    nom du champ dont les données sont à extraire
     * @return string
     */
    public function getValuesForGraph($result, $field) {
        $outArray = array();
        foreach($result AS $row) {
            $outArray[] = $row[$field];
        }
        return '['.implode(',', $outArray).']';
    }
 
    /**
     * Extraction données d'un champ et mise en forme pour labels RGraph
     * @param array  $result   tableau données issues de SQL
     * @param string $field    nom du champ dont les données sont à extraire
     * @return string
     */
    public function getLabelsForGraph($result, $field) {
        $outArray = array();
        foreach($result AS $row) {
            $outArray[] = $row[$field];
        }
        return "['".implode("','", $outArray)."']";
    }
 
}

Les deux méthodes sont quasiment semblables. la première, getValuesForGraph va extraire les valeurs numériques du tableau et les mettre en forme:

// on récupère les données de fréquentation
$Frequentation = new Application_Model_Frequentation();
$resultat = $Frequentation->getStatsVisiteRubriques();
 
$Rgraph = new Application_Model_Rgraph();
$values = $Rgraph->getValuesForGraph($resultat, 'nb');

La variable $values va contenir ceci:

string '[17701,6936,6482,5726]' (length=22)

la seconde méthode getLabelsForGraph va récupérer les labels:

$labels = $Rgraph->getLabelsForGraph($resultat, 'nom_rubrique');

La variable $labels va contenir ceci:

string '['annonces','forum','agenda','articles']' (length=41)

Intégration au contrôleur

Voici un exemple de contrôleur minimal que l'on va nommer frequentationGlobaleAction:

    public function frequentationGlobaleAction() {
        // on récupère les données de fréquentation
        $Frequentation = new Application_Model_Frequentation();
        $resultat = $Frequentation->getStatsVisiteRubriques();
        // envoi des données mises en forme vers la vue
        $Rgraph = new Application_Model_Rgraph();
        $this->view->rgraphValues = $Rgraph->getValuesForGraph($resultat, 'nb');
        $this->view->rgraphLabels = $Rgraph->getLabelsForGraph($resultat, 'nom_rubrique');
    }

On envoie deux données vers la vue: rgraphValues qui est la chaîne contenant les valeurs du graphe, rgraphLabels qui est la chaîne contenant les labels du graphe. Ces deux chaînes sont exploitables sans autre traitement au sein de la vue frequentation-globale

Intégration à la vue

On crée maintenant dans le répertoire views/scripts et sous-répertoire adéquat notre vue frequentation-globale.phtml

<canvas id="myCanvas" width="500" height="250">[No canvas support]</canvas>
 
<script>
    window.onload = function ()
    {
        var data = <?php echo $this->rgraphValues; ?>;
 
        var bar = new RGraph.Bar('myCanvas', data)
            .Set('labels', <?php echo $this->rgraphLabels; ?>)
            .Set('colors', ['red'])
            .Set('gutter.left',50)
            .Draw();
    }
</script>

Résultat:

notre premier graphe interfacé à la base de données

Maintenant que nous savons faire la jonction entre RGraph et notre base de données, voyons comment faire des graphes en camembert

HTML5 - CSS 2.x/3
PHP / MySQL
FORTH ...