Forum : php et chart.js

Réponse acceptée

Alors soit tu traites ton array côté PHP, soit côté JS, sachant qu'à l'arrivée il te faut un array qui aura ce formatage (http://www.chartjs.org/docs/#line-chart-data-structure/) :

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

Ce que tu peux faire c'est construire deux arrays distincts JS à partir du JSON récupéré:


var monthes = [];
var values = [];

$.each(response, function(month, value){
    monthes.push(month);
    values.push(value);
});

var data = {
    labels: monthes,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: values
        }
    ]
};

Le tour est joué ;)

shinix

Salut,

Euh, il n'y a rien de très compliquer.

Si on prend le graphique suivant : http://www.chartjs.org/docs/#line-chart-data-structure

Dans la config du script tu as juste à mettre :
labels: <?php $tes_labels ?>
data: <?php $tes_donnees ?>

C'est aussi simple que ça.
Tu as juste a traiter ton code PHP pour qu'il ressorte pareil que les valeurs par défaut du script JS.

Defy

Auteur

Non mais merci ca j'avait compris, seulement le soucie c'sest que j'utilise smarty , je n'ai donc aucune donnée php dans ma page, le code JS est dans un dossier JS consacré au Chart.
Le soucie c'est comment j'envoie les donnée de php vers mon script JS? c'est pas magique ca marche pas tout seul ( je pense )

betaWeb

Il te faut faire un appel en AJAX (via jQuery c'est plus simple) afin de récupérer les données générées par son script PHP. Typiquement ça donne quelque chose comme ça:

function getChart(datas) {
    // Ton process de génération du graph ici
}

$.ajax({
    method: 'GET',
    url: 'mon_script.php',
    dataType: 'json',
    success: function(response) {
        if (!response.length) {
            console.log('une erreur est survenue');
            return false;
         }
         getChart(response);
    },
    error: function() {
        console.log('une erreur est survenue');
        return false;
    }
});

// OU VERSION COURTE

$.get('mon_script.php', function(response) {
    if (!response.length) {
        console.log('une erreur est survenue');
        return false;
     }
     getChart(response);
}, 'json');

Et surtout, n'oublies pas d'encoder ton array contenant les datas en JSON côté PHP, et aussi de faire un echo, sans quoi le résultat ne pourra pas être récupéré côté JS:

echo json_encode($datas);

S'il y a des points qui ne sont pas clairs, n'hésites pas ;)

Defy

Auteur

Bon deja ca marche bien ^^ je recupère mon Json mais je n'arrive pas a afficher correctement mes donnée, je recupère un Json comme ceci:

{
"janvier":0,
"fevrier":0,
"mars":0,
"avril":0,
"mai":1,
"juin ":16,
"juillet":2,
"aout":0,
"septembre":0,
"octobre":0,
"novembre":0,
"decembre":0
}

Comment parcouri le tableau pour fair coincidé l'absice janvier de mon graph avec le janvier du json etc etc

Defy

Auteur

Merci :-) nickel chrome!!!! c'est plus facile que ca en a l'air ^^

betaWeb

@Defy: Je t'en prie ;)
Oui, généralement on cherche compliqué alors qu'en définitive la solution est souvent simple, et ça m'arrive encore fréquemment sur mes projets :)

php et chart.js

7 réponses