Comment faire pour qu'un graphique en flotteur utilise les valeurs d'une base de données ?

Question

Je veux lier le graphique à barres empilées avec certaines valeurs de la base de données. J'ai réussi à le faire fonctionner en utilisant des valeurs codées en dur. Comment faire pour qu'il utilise les valeurs d'une base de données ?

Pour l'instant, j'ai placé ce code dans un fichier JavaScript :

$(function () {
    var css_id = "#placeholder";
    var data = [
        {label: 'Strong', data: [[1,250], [2,250], [3,250], [4,250], [5,250], [6,250], [7,250], [8,250], [9,250], [10,250], [11,250], [12,250]]},        
         {label: 'Weak', data: [[1,200], [2,200], [3,200], [4,200], [5,200], [6,200], [7,200], [8,200], [9,200], [10,200], [11,200], [12,200]]},        
          {label: 'Medium', data: [[1,50], [2,50], [3,50], [4,50], [5,50], [6,50], [7,50], [8,50], [9,50], [10,50], [11,50], [12,50]]},        
    ];
    var options = {
        series: {stack: 0,
                 lines: {show: false, steps: false },
                 bars:  {show: true, barWidth: 0.9, align: 'center'},
                },
        xaxis: {ticks: [[1,'Jan'], [2,'Feb'], [3,'March'], [4,'April'], [5,'May'],[6,'June'],[7,'July'],[8,'August'],[9,'Sept'],[10,'Oct'] ,[11,'Nov'],[12,'Dec'] ]},
    };

    $.plot($(css_id), data, options);
});

Answer 1

Le moyen le plus simple est de générer ce fichier du côté du serveur. Cela signifie que votre code PHP fait l'écho de tout ce qu'il y a à faire, en récupérant les chiffres dans la base de données.

Faites une copie de ce fichier js et remplacez les chiffres par des caractères de substitution, pour en faire un modèle :

{label : 'Strong', data : [[1,#STRONG_1], [2,#STRONG_2]...]}

C'est de là que vient votre programme PHP (ou le langage côté serveur que vous utilisez) :

1. Chargez votre modèle
2. Lire les données de la base de données
3. Remplacer les caractères de remplacement par des valeurs dans le modèle
4. L'écho

Vous pouvez utiliser le paramètre URL pour indiquer au programme les données qu'il doit lire, par exemple : mygraph.php?date=20100629

Aussi, vous devez insérer ce code (étape 1-4.) dans votre générateur de page script. N'oubliez pas d'ajouter les balises d'ouverture et de fermeture "script" avant et après votre code JS.

Si vous avez fait cela, vous devriez apprendre à faire le même travail avec AJAX.