Affichage d'un graphique avec ChartJS

**MoldelGavéCon** · 06/02/2021, 15h56

Bonjour,

Je cherche à afficher un graphique à partir d'une librairie Chart.js mais lorsque cela arrive je n'ai qu'un texte "Chart.js" qui s'affiche sur la page.
Je n'ai jamais utilisé de php jusqu'à aujourd'hui du coup je suis un peu bloqué malgré les tutos que j'ai trouvé, si quelqu'un pouvait m'indiquer mon erreur ce serait super !

Dans un premier temps voici le code que j'utilise pour le graphique, je l'ai mis dans un fichier .php dans le dossier du site avec index :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Graphique</title>
	<script src="C:\Users\Tmoli\OneDrive\Bureau\Chart.js"></script>
</head>
<body>
	<h1>Chart.js</h1>
	<canvas id="myChart"></canvas>
	<script>
                var ctx = document.getElementById('myChart').getContext('2d');
                var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
 
        // The data for our dataset
        data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                label: 'Graphique Inventaire',
                barPercentage: 0.5,
                barThickness: 6,
                maxBarThickness: 8,
                minBarLength: 2,
                data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
 
    // Configuration options go here
    options: {}
});
        </script>
 
</body>
</html>

et ensuite pour appeler le contenu du fichier graph.php dans l'endroit que je souhaite :

Code :

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

1
2
3
4
5
function createMaintTab()
{
      $document = file_get_contents("graph.php");
      echo "$document";
}

Sauf que j'obtiens cela au final, est ce que quelqu'un saurait me dire qu'est ce qui bloque ?
Nom : invt.png
Affichages : 789
Taille : 4,9 Ko

Merci par avance pour votre attention

**Toufik83** · 06/02/2021, 16h43

Bonjour,

src="C:\Users\Tmoli\OneDrive\Bureau\Chart.js" je pense que l'importation n'est pas ok..
Si tu ouvres l'outil de développement du navigateur, tu verras une erreur js dans l'onglet console.

**MoldelGavéCon** · 06/02/2021, 20h01

Je viens de voir effectivement "Erreur de chargement pour l'élement <script> dont la source est "C:\Users\Tmoli\OneDrive\Bureau\Chart.js"

Mais pourtant c'est le bon chemin jusqu'à la librairie Chart.js et même en mettant Bureau\Chart.js pour simplifier j'ai une erreur, de quelle manière puis je indiquer le bon chemin ?

**Toufik83** · 06/02/2021, 20h04

Bonjour,

tu n'utilises pas un serveur local comme apache sous xampp ou wamp...?

**MoldelGavéCon** · 06/02/2021, 20h32

Oui j'utilise wamp64

**mathieu** · 06/02/2021, 23h44

si par exemple on part d'un fichier graphique.php dans un répertoire.
ensuite vous allez créer un sous-répertoire "js" au même endroit et y mettre le fichier "chart.js".
et donc dans graphique.php, vous indiquerez

Code :

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

	<script src="js/Chart.js"></script>

**MoldelGavéCon** · 07/02/2021, 13h08

Bonjour,

Je vous remercie encore de votre aide cela semble avoir en partie marché car je n'ai plus de message d'erreur de ce type en revanche maintenant j'ai des problèmes de "Uncaught SyntaxError: expected expression, got '<' " et "Uncaught ReferenceError: Chart is not defined" pourtant c'est tiré du site de Chart.js et je n'ai pas relevé de faute de balisage. J'ai cherché sur des forums l'origine du probleme mais entre des erreurs de balisages et des problemes de doctype html je trouve pas ou se trouve mon probleme T-T