Création d'un graphique en AJAX

**Sebastien31t** · 17/09/2020, 11h43

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 XML :

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
<?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 :

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
//---------------------------------------
//   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 :

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
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.

**NoSmoking** · 19/09/2020, 09h33

Bonjour,
pour commencer, de nos jour un simple

Code :

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

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 :

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

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 :

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

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 :

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

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
    }]
  }
});

**Sebastien31t** · 19/09/2020, 14h23

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 php :

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

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 :

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

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 :

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
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.

**NoSmoking** · 21/09/2020, 15h01

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 :

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

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 :

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

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);
}

**Sebastien31t** · 22/09/2020, 07h45

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 :

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

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 :

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

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 :

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

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 :

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
 
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

**NoSmoking** · 22/09/2020, 19h31

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 :

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
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.

**Sebastien31t** · 23/09/2020, 09h29

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

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
 
 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.

**NoSmoking** · 23/09/2020, 18h30

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.

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 html :

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
<!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

**Sebastien31t** · 24/09/2020, 10h26

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 php :

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

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 php :

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

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 :

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
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.

**NoSmoking** · 28/09/2020, 18h02

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 !

Création d'un graphique en AJAX

AJAX

Discussions similaires

Partager

Partager