Comment utiliser des données récupérées avec ajax

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:

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:

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:

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:

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:

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