Création d'un graphique en AJAX

Version imprimable

Bonjour à tous,

Je me permet de solliciter votre aide concernant mon projet ajax.
Je suis novice dans ce domaine et je vous remercie d’avance pour votre patience et compréhension.
Mon projet est de réaliser un graphique avec ajax.
Mon graphique est un programme chartjs.
J’ai déjà réussi à générer un fichier xml avec php.
Aant de poster j’ai essayer beaucoup de tuto mais sans succ7s.
Voilà le code que je pense correct.
Plus qu’une solution je souhaite comprendre, merci pour vos commentaires.

Voici le texte xml généré

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<resultat>
  <jour>
    <dte>2020-09-14 00:00:00</dte>
    <etat>3</etat>
    <id>3</id>
  </jour>
  <jour>
    <dte>2020-09-15 00:00:00</dte>
    <etat>8</etat>
    <id>3</id>
  </jour>
  <jour>
    <dte>2020-09-16 00:00:00</dte>
    <etat>12</etat>
    <id>3</id>
  </jour>
</resultat>

et mon départ de fichier de traitement de données en js.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//---------------------------------------
//   Connect
//---------------------------------------
 
function xhr_connect(){
	var xhr = false
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest
	} else if (window.ActiveXObject) {
		var reussi = false
		var iexhr = new Array( "Msxml2.XMLHTTP.7.0","Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP")
		for (var i = 0; i < iexhr.length && !reussi; i++) {
			try {
				xhr = new ActiveXObject(iexhr[i])
				reussi = true
			} catch(e) {}
		}	
	}
  return xhr;
}

Voici aussi comment le graphique fonctionne non dynamiquement:

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
var ctx = document.getElementById('myChart').getContext('2d');
 
var chart = new Chart(ctx, {
    // The type of chart we want to create
	type: 'line',
 
	// recherche des données
 
 
 
    // The data for our dataset
    data: {
        labels: ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet','Aout','Septembre','Octobre','Novembre','Decembre'],
       	datasets: [{
            label: 'Suivi journalier',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 12, 14, 17,15,7,8,5,7]
        }]
    },
 
    // Configuration options go here
    options: {}
});

Merci de votre aide.
Cordialement.

Bonjour,
pour commencer, de nos jour un simple

Code:

const oXhr = new XMLHttpRequest();

et suffisant pour définir un objet XMLHttpRequest.

Il serait peut-être plus judicieux de retourner un objet JSON plutôt qu'un XML, plus facile à gérer côté client.
Exemple en JSON de ton XML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 const dataJSON = [{ "dte": "2020-09-14 00:00:00", "etat": "13", "id": "3" }, { "dte": "2020-09-15 00:00:00", "etat": "8", "id": "3" }, { "dte": "2020-09-16 00:00:00", "etat": "12", "id": "3" }];
La récupération des données pouvant se faire via la méthode map() des Array.

Pour récupérer les données label et data il suffit d'écrire
Code:

1 2 3 4 5 6 const tabLabels = dataJSON.map((o) => { return o.dte; // à formater éventuellement }); const tabDatas = dataJSON.map((o) => { return o.etat; });
et pour l’intégration dans la chart un simple
Code:

1 2 3 4 5 6 7 8 9 10 const chart = new Chart(ctx, { type: 'line', data: { labels: tabLabels, datasets: [{ label: 'Suivi journalier', data: tabDatas }] } });

Bonjour et merci de votre aide.

J'ai donv suivi vios conseils.
Je suis passe au json.
Je lance directement ma requete et pour tout envoyer j'ai fait comme suivant:

Code:

1
2
3
4
5
6
7
$id = $_SESSION['id_pat'];
$sql = "SELECT * from suivi_etat where patient_id_patient = $id order by suivi_etat_dte asc";
$requete = mysqli_query($conn, $sql);
$fetch = mysqli_fetch_all($requete);
 
$json = json_encode($fetch);
file_put_contents('graph.json',$json);

j'obtien le fichier json suivant:

Code:

1
2
3
4
5
6
[
    ["2","2020-09-14 00:00:00","1"],
    ["5","2020-09-15 00:00:00","1"],
    ["12","2020-09-16 00:00:00","1"],
    ["16","2020-09-17 00:00:00","1"]
]

Puis pour la partie graphique modifier comme tel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var request = new XMLHttpRequest();
var ret = request.open('GET', 'graph.json');
 
const tabLabels = ret.map((o) => {
	return o.dte;    // à formater éventuellement
  });
  const tabDatas = ret.map((o) => {
	return o.etat;
  });
 
  const chart = new Chart(ctx, {
	type: 'line',
	data: {
	  labels: tabLabels,
	  datasets: [{
		backgroundColor: 'rgb(255, 99, 132)',
		borderColor: 'rgb(255, 99, 132)',
		label: 'Suivi journalier',
		data: tabDatas
	  }]
	}
  });

malheureusement pas de retour le graphique ne fonctionne pas.
Pouvez-vous me difre ou est mon erreur.

Cordialement.

Il eut mieux valu obtenir l'objet JSON tel que je t'en ai montré une représentation, le code que je t'ai fournis tenant compte de ce format.

Ceci étant, il te suffit de modifier les deux codes de récupération et de les remplacer par
Code:

1 2 3 4 5 6 const tabLabels = ret.map((o) => { return o[1]; // à formater éventuellement }); const tabDatas = ret.map((o) => { return o[0]; });
Attention :
la technique Ajax est par défaut asynchrone donc les données ne sont pas disponibles immédiatement, il te faut exploiter le retour sur le onload par exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 function getAjaxData(url, callback) { const oXhr = new XMLHttpRequest(); oXhr.onload = function () { const dataJSON = JSON.parse(this.responseText); // ici les données sont disponibles // appel fonction de création de ton graphe createGraph( dataJSON); // par exemple } oXhr.open("GET", "graph.json", true); oXhr.send(null); }

pas pas

Bonjour NoSmoking,

Avant tout merci de prendre du temps pour les code et explication donnees.

J 'a tester avec le nouveu code et j' ai du rater une étape.
si je compàrend bien
ici on récipere le fichier graph.json:

Code:

1
2
3
4
5
6
7
8
9
10
function getAjaxData(url, callback) {
    const oXhr = new XMLHttpRequest();
    oXhr.onload = function () {
      const dataJSON =  JSON.parse(this.responseText);
      // ici les données sont disponibles
      // appel fonction de création de ton graphe
      createGraph( dataJSON);    // par exemple
    }
    oXhr.open("GET", "graph.json", true);
    oXhr.send(null);

ici on extrai les données:

Code:

1
2
3
4
5
6
const tabLabels = ret.map((o) => {
	return o[1];    // à formater éventuellement
  });
const tabDatas = ret.map((o) => {
	return o[0];
  });

et on affiche le graph

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
  var ctx = document.getElementById('myChart').getContext('2d');
  const chart = new Chart(ctx, {
	type: 'line',
	data: {
	  datasets: [{
		labels: tabLabels,
		label: 'Suivi journalier',
		backgroundColor: 'rgb(255, 99, 132)',
		borderColor: 'rgb(255, 99, 132)',
		data: tabDatas
	  }]
	}
  });

au final mon code ressemble à ca:

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
 
function getAjaxData(url, callback) {
    const oXhr = new XMLHttpRequest();
    oXhr.onload = function () {
      const dataJSON =  JSON.parse(this.responseText);
      // ici les données sont disponibles
      // appel fonction de création de ton graphe
      createGraph( dataJSON);    // par exemple
    }
    oXhr.open("GET", "graph.json", true);
    oXhr.send(null);
}
 
const tabLabels = ret.map((o) => {
	return o[1];    // à formater éventuellement
  });
const tabDatas = ret.map((o) => {
	return o[0];
  });
 
  var ctx = document.getElementById('myChart').getContext('2d');
  const chart = new Chart(ctx, {
	type: 'line',
	data: {
	  datasets: [{
		labels: tabLabels,
		label: 'Suivi journalier',
		backgroundColor: 'rgb(255, 99, 132)',
		borderColor: 'rgb(255, 99, 132)',
		data: tabDatas
	  }]
	}
  });

Merci de m'expliquer ce qui m'échappe?
Cordialement

Citation:

Merci de m'expliquer ce qui m'échappe?

tu as été un peu rapide en besogne, tu n'as pas créer de fonction createGraph dans laquelle tu récupères et traites les datas et où tu crées ton graphique.

Cela pourrait donner :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function createGraph(data) { // traitement des données au format JSON const tabLabels = data.map((o) => { return o[1]; }); const tabDatas = data.map((o) => { return o[0]; }); // création du graphique const ctx = document.getElementById('myChart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: { labels: tabLabels, datasets: [{ label: 'Suivi journalier', data: tabDatas }] } }); }
Nota :
Dans ce que j'ai écris ,function getAjaxData(url, callback), le paramètre callback ne sert pas, c'est l'habitude qui me l'a fait rajouter.

Bonjour,
Et merci pour votre éclaircissement,
j'ai modifier, mais malheureusement ca ne fonctionne pas.
j'ai modifier comme ci-dessous:

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
 
 function getAjaxData(url) {
    const oXhr = new XMLHttpRequest();
    oXhr.onload = function () {
        const dataJSON =  JSON.parse(this.responseText);
        // ici les données sont disponibles
        // appel fonction de création de ton graphe
        createGraph( dataJSON);    // par exemple
    }
    oXhr.open("GET", "graph.json", true);
    oXhr.send(null);
}
 
function createGraph(data) {
    // traitement des données au format JSON
    const tabLabels = data.map((o) => {
      return o[1];
    });
    const tabDatas = data.map((o) => {
      return o[0];
    });
    // création du graphique
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: tabLabels,
        datasets: [{
          label: 'Suivi journalier',
          data: tabDatas
        }]
      }
    });
  }

Une chose m'echappa,
comment les deus fonctions communiquent entre elle ?

merci de vote aide.

Citation:

j'ai modifier, mais malheureusement ca ne fonctionne pas.
j'ai modifier comme ci-dessous:

Je pense qu'il serait bon que tu lises Comprendre les mécanismes d'AJAX, afin de te familiariser avec le concept.

Nous n'avons pas le contexte général de ton application mais on va faire sans.

Dans la chronologie, on récupère les données puis on crée le graphique comme déjà mentionné.

Pour ce faire il faut que ton fichier graph.json existe déjà.
Dans ce que tu montres on ne sait pas à quel moment ce fichier est crée et disponible attendu que tu le génères en fonction d'une userID. Ceci est un point important quant à la démarche à suivre.

Comment et quand est donc définie/récupérée cette userID, il serait bon dans ce cas de la passer lors de la requête afin d'obtenir les données voulues.

Citation:

Une chose m'echappa,
comment les deus fonctions communiquent entre elle ?

simplement l'une appelle l'autre

Faisons simple, enfin essayons !

Teste dans une page ce qui suit, attention il faut tester sous serveur local et que le fichier graph.json existe bien !
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Test Line Chart</title> <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script> <style> .cadre, #myChart{ width: 60em; margin: auto; } </style> </head> <body> <div class="cadre"> <canvas id="myChart"></canvas> </div> <script> function getAjaxData(url, callback) { const oXhr = new XMLHttpRequest(); oXhr.onload = function () { const dataJSON = JSON.parse(this.responseText); // appel fonction de création de ton graphe callback(dataJSON); } oXhr.open("GET", url, true); oXhr.send(null); } function createGraph(data) { // traitement des données au format JSON const tabLabels = data.map((o) => { return o[1]; }); const tabDatas = data.map((o) => { return o[0]; }); // création du graphique const ctx = document.getElementById('myChart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: { labels: tabLabels, datasets: [{ label: 'Suivi journalier', data: tabDatas }] } }); } // Appel de la fonction getAjaxData("graph.json", createGraph); </script> </body> </html>
Tu devrais comprendre comment cela fonctionne ;)

Ca fonctionne

Super le graphique à fonctionner
je vais te donner les fichiers pour et essayer de comprendre.

pour la page ou il y a le graphique. en premiers temps j'appelle le fichier charge chart "chargechart.php

Code:

1
2
3
4
5
6
7
8
9
10
11
<?php
    include('headerpat.php');
    include('chargechart.php');
?>
<div class="container-fluid container-padding">
    <div class="row">
        <div class="col-md-9">
            <!-- 
            ---------- Mise en place du graphique ----------
            -->
            <canvas id="myChart" width="700px" height="200px"></canvas>

puis le comme il est appelé en premier je crée le fichier json

Code:

1
2
3
4
5
6
7
8
9
<?php 
 
$id = $_SESSION['id_pat'];
$sql = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$requete = mysqli_query($conn, $sql);
$fetch = mysqli_fetch_all($requete);
 
$json = json_encode($fetch);
file_put_contents('graph.json',$json);

Puis a l'appel de l id myChart (dans le premier fichier php)
on recupere le fichier dans js

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
function getAjaxData(url) {
    const oXhr = new XMLHttpRequest();
    oXhr.onload = function () {
        const dataJSON =  JSON.parse(this.responseText);
        // ici les données sont disponibles
        // appel fonction de création de ton graphe
        createGraph( dataJSON);    // par exemple
    }
    oXhr.open("GET", "graph.json", true);
    oXhr.send(null);
}
 
function createGraph(data) {
    // traitement des données au format JSON
    const tabLabels = data.map((o) => {
      return o[1];
    });
    const tabDatas = data.map((o) => {
      return o[0];
    });
    // création du graphique
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: tabLabels,
        datasets: [{
          label: 'Suivi journalier',
          data: tabDatas
        }]
      }
    });
  }

peux tu me dire si mon raisonnement est bon ?
Cordialement.

28/09/2020, 18h02
NoSmoking

Citation:

peux tu me dire si mon raisonnement est bon ?

Dans ce que tu expliques, je ne vois pas la nécessité de créer un fichier graph.json alors que tu pourrais intégrer tes données directement dans le JS !