Discussion :

[pierrot10]

Bonjour à tous,

Je souhaite récupérer des données pour alimenter un graphique qui est fait avec Chart.j
http://www.chartjs.org/samples/latest/
J'ai réussi à faire des graph sans problème avec des données en durs

Maintenant, je dois extraire les données de ma base de donnée pour alimenter mes graph.

J'ai donc opter pour jquery et ajax, comme ceci mes graph seront mis à jours sans qu'on ait besoin de rafraichir la page, ect,

J'ai donc commencé par faire ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
$(document).ready(function(){
 
    	$.ajax({
    		url: "get_measures.php", 
    		data:'',
    		dataType: 'json',
    		type: 'POST',
    		error: function(){
    			$("#div1").html("error");
    		},
    		success: function(data){
        		$("#div1").html("Success");        		
        		//console.log(data);	
    		},
    		complete: function(xhr,status){
 
    			var measures = xhr.responseText;
    			console.log("measures");
				console.log(measures);
    		}
   		});
 
});

et ca macrhe bien car

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(measures);

m'affiche bien ce ue j'attends.

Maintenant je dois contruire mes graphique. Pour information, voilà l code qui s'affiche mes graphe (ca marche):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
var mixedChart = {
    type: 'bar',
    data: {
        datasets: [
        {
            label: 'Luminosité',
            fill: false,
            data: [10, 15, 17, 15],
            type: 'line',
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.yellow,
            backgroundColor: window.chartColors.yellow
            //borderColor: ['rgba(75, 192, 192, 1)'],
            //backgroundColor: ['rgba(75, 192, 192, 1)']
        }, {
            label: 'Temperature',
            fill: false,
            data: [35, 40, 20,30 ],
            type: 'line',
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.orange,
            backgroundColor: window.chartColors.orange
            },
            {
            label: 'Pression',
            fill: false,
            data: [7, 60, 20, 10],
            //borderDash: [3, 3],
            type: 'line',
            showLine: false,
            pointStyle: 'rect',
                       /*
                       'circle',
                        'triangle',
                        'rect',
                        'rectRounded',
                        'rectRot',
                        'cross',
                        'crossRot',
                        'star',
                        'line',
                        'dash'
                       */
 
            pointRadius: 15,
            pointHoverRadius: 10,
            borderColor: window.chartColors.blue,
            backgroundColor: window.chartColors.blue
            },
            {
            label: 'Humidité Air',
            fill: false,
            data: [20, 10, 30, 40],
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.red,
            backgroundColor: window.chartColors.red
            }, {
            label: 'Humidité sol',
            fill: false,
            borderDash: [2, 2],
            data: [20, 25, 56, 30],
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.green,
            backgroundColor: window.chartColors.green
            }
        ],
        labels: ['Lundi', 'Mardi', 'Mercredi', 'jeudi'],
    },
 
        options: {
            title:{
                display:true,
                text:'Module 2'
            },
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Jours'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Valeurs'
                    }/*,
                        ticks: {
                            beginAtZero:true
                        }*/
                }]
 
            } // End scale
        } // End option
 
};
 
window.onload = function() {
    var ctx = document.getElementById("module1");
    window.myLine = new Chart(ctx, mixedChart);
};

Le problème que j'ai c'est que j'arrive pas à "sortir" ma variable 'measures' de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(document).ready(function(){
$.ajax({
// CODE (voir ci-dessus
}
}

Voici mon code au complete qui se trouve dans scripts.js et je détaille ma question dans le code en MAJUSCULE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
$(document).ready(function(){
 
    	$.ajax({
    		url: "get_measures.php", 
    		data:'',
    		dataType: 'json',
    		type: 'POST',
    		error: function(){
    			$("#div1").html("error");
    		},
    		success: function(data){
        		$("#div1").html("Success");        		
        		//console.log(data);	
    		},
    		complete: function(xhr,status){
 
    			var measures = xhr.responseText;
    			console.log("measures");
				console.log(measures);
    		}
   		});
 
});
 
// ICI, J'AIMERAIS TRAITER LA VARIABLE measures
// MAIS SI JE FAIS UN CONSOLE.LOG(MEASURES) IL NE SE PASSE RIEN
//
// ENSUITE, J AIMERAIS FAIRE UNE LOOP DANS MEASURES POUR CREER 
UN ARRAY TEMPERATURE var te[];
// UN ARRAY DES HUNIDITE var hu[];
// UN ARRAY DES LUMINOSITE var lu[]
// ET ENSUITE LES PLACER DANS DATA CI-DESSOUS
 
var mixedChart = {
    type: 'bar',
    data: {
        datasets: [
        {
            label: 'Luminosité',
            fill: false,
            data: [10, 15, 17, 15],  // ICI IRA lu (var lu[])
            type: 'line',
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.yellow,
            backgroundColor: window.chartColors.yellow
            //borderColor: ['rgba(75, 192, 192, 1)'],
            //backgroundColor: ['rgba(75, 192, 192, 1)']
        }, {
            label: 'Temperature',
            fill: false,
            data: [35, 40, 20,30 ], // ICI IRA te
            type: 'line',
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.orange,
            backgroundColor: window.chartColors.orange
            },
            {
            label: 'Pression',
            fill: false,
            data: [7, 60, 20, 10], // et ainsi de suite
            //borderDash: [3, 3],
            type: 'line',
            showLine: false,
            pointStyle: 'rect',
                       /*
                       'circle',
                        'triangle',
                        'rect',
                        'rectRounded',
                        'rectRot',
                        'cross',
                        'crossRot',
                        'star',
                        'line',
                        'dash'
                       */
 
            pointRadius: 15,
            pointHoverRadius: 10,
            borderColor: window.chartColors.blue,
            backgroundColor: window.chartColors.blue
            },
            {
            label: 'Humidité Air',
            fill: false,
            data: [20, 10, 30, 40],
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.red,
            backgroundColor: window.chartColors.red
            }, {
            label: 'Humidité sol',
            fill: false,
            borderDash: [2, 2],
            data: [20, 25, 56, 30],
            pointRadius: 5,
            pointHoverRadius: 8,
            borderColor: window.chartColors.green,
            backgroundColor: window.chartColors.green
            }
        ],
        labels: ['Lundi', 'Mardi', 'Mercredi', 'jeudi'],
    },
 
        options: {
            title:{
                display:true,
                text:'Module 2'
            },
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Jours'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Valeurs'
                    }/*,
                        ticks: {
                            beginAtZero:true
                        }*/
                }]
 
            } // End scale
        } // End option
 
};
 
 
 
window.onload = function() {
    var ctx = document.getElementById("module1");
    window.myLine = new Chart(ctx, mixedChart);
};

Donc pour le moment, je n'arrive pas à exploiter la variable 'measures' en dehor du ajax()?

M'avez-vous compris? Pouvez-vous m'orienter?
Milles mercis

[CinePhil]

Bonjour,

Je ne suis pas un grand spécialiste d'Ajax mais si ça peut orienter vers la solution...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
success: function(data){
        		$("#div1").html("Success");        		
        		//console.log(data);

data représente le paquet de donné renvoyé par le programme php. C'est donc lui qu'il faut traiter à mon avis

Récemment, pour parser une liste de villes et alimenter un <select>, j'ai utilisé la fonction $.map :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
			success: function (liste_villes)
				{
					response($.map(liste_villes, function(item)
					{
						return {
							label: item.vilNom + '(' + item.vilDpt + ')',
							value: item.vilNom + '(' + item.vilDpt + ')'
						}
					}));
				}

Peut-être pouvez-vous faire un truc similaire pour alimenter les points de votre graphique.