Afficher des données dans un graphique highcharts

**tophe44** · 21/11/2020, 14h08

Bonjour,

Je poste ce message car je rencontre des difficultés pour afficher un graphique highcharts.
Je débute et je suis partie d'un exemple sur le site suivant:
https://phppot.com/php/creating-dyna...comment-165711

A l'ouverture de la page, je n'ai rien alors que mes datas de mon fichier data.php génère bien les données.
J'ai trouvé sur un forum qu'il fallait ajouté JSON_NUMERIC_CHECK à la ligne json_encode pour enlever les "" sur les datas mais çà ne change rien.
Alors faut-il les avoir ou pas, je ne sais pas.
Voici mes datas du fichier data.php:

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
[{
  "Colonne1": 1,
  "TSI": 1360
}, {
  "Colonne1": 2,
  "TSI": 2500
}, {
  "Colonne1": 3,
  "TSI": 2650
}, {
  "Colonne1": 4,
  "TSI": 2720
}, {
  "Colonne1": 5,
  "TSI": 2850
}, {
  "Colonne1": 6,
  "TSI": 3020
}, {
  "Colonne1": 7,
  "TSI": 3050
}, {
  "Colonne1": 8,
  "TSI": 3110
}, {
  "Colonne1": 9,
  "TSI": 2780
}, {
  "Colonne1": 10,
  "TSI": 2960
}, {
  "Colonne1": 11,
  "TSI": 2970
}, {
  "Colonne1": 12,
  "TSI": 3060
}, {
  "Colonne1": 13,
  "TSI": 3080
}, {
  "Colonne1": 14,
  "TSI": 3220
}, {
  "Colonne1": 15,
  "TSI": 3510
}, {
  "Colonne1": 16,
  "TSI": 3510
}, {
  "Colonne1": 17,
  "TSI": 3560
}]

Le reste du code qui génère le graphique est pourtant identique à celui de site alors pourquoi ça ne s'affiche pas?
Pouvez-vous m'aider?

Code SQL :

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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
-- phpMyAdmin SQL Dump
-- version 5.0.2
-- https://www.phpmyadmin.net/
--
-- Hôte : 127.0.0.1:3306
-- Généré le : sam. 21 nov. 2020 à 13:04
-- Version du serveur :  5.7.31
-- Version de PHP : 7.3.21
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
 
--
-- Base de données : `mes_tables _hattrick`
--
 
-- --------------------------------------------------------
 
--
-- Structure de la table `table_hattrick_2`
--
 
DROP TABLE IF EXISTS `table_hattrick_2`;
CREATE TABLE IF NOT EXISTS `table_hattrick_2` (
  `Colonne1` int(2) DEFAULT NULL,
  `Colonne2` varchar(30) DEFAULT NULL,
  `Nationalité` varchar(8) DEFAULT NULL,
  `Numéro de maillot` varchar(2) DEFAULT NULL,
  `Nom` varchar(22) DEFAULT NULL,
  `ID du joueur` int(9) DEFAULT NULL,
  `Entraineur` varchar(1) DEFAULT NULL,
  `Spécialité` varchar(14) DEFAULT NULL,
  `Bonus du club formateur` varchar(1) DEFAULT NULL,
  `Blessure` varchar(1) DEFAULT NULL,
  `Avertissements` varchar(1) DEFAULT NULL,
  `En vente` varchar(1) DEFAULT NULL,
  `Âge` int(2) DEFAULT NULL,
  `Jours` int(3) DEFAULT NULL,
  `TSI` int(4) DEFAULT NULL,
  `Salaire` int(4) DEFAULT NULL,
  `Semaines au club` int(2) DEFAULT NULL,
  `Expérience` int(1) DEFAULT NULL,
  `Tempérament de chef` int(1) DEFAULT NULL,
  `Fidélité` int(2) DEFAULT NULL,
  `Forme` int(1) DEFAULT NULL,
  `Endurance` int(1) DEFAULT NULL,
  `Gardien` int(1) DEFAULT NULL,
  `Défense` int(1) DEFAULT NULL,
  `Construction` int(2) DEFAULT NULL,
  `Ailier` int(1) DEFAULT NULL,
  `Passe` int(1) DEFAULT NULL,
  `Buteur` int(1) DEFAULT NULL,
  `Coup franc` int(1) DEFAULT NULL,
  `Date du dernier match` varchar(10) DEFAULT NULL,
  `Note du dernier match` varchar(3) DEFAULT NULL,
  `Poste au dernier match` varchar(2) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
--
-- Déchargement des données de la table `table_hattrick_2`
--
 
INSERT INTO `table_hattrick_2` (`Colonne1`, `Colonne2`, `Nationalité`, `Numéro de maillot`, `Nom`, `ID du joueur`, `Entraineur`, `Spécialité`, `Bonus du club formateur`, `Blessure`, `Avertissements`, `En vente`, `Âge`, `Jours`, `TSI`, `Salaire`, `Semaines au club`, `Expérience`, `Tempérament de chef`, `Fidélité`, `Forme`, `Endurance`, `Gardien`, `Défense`, `Construction`, `Ailier`, `Passe`, `Buteur`, `Coup franc`, `Date du dernier match`, `Note du dernier match`, `Poste au dernier match`) VALUES
(1, 'players_21_07_2020 à 11_22_47', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 25, 88, 880, 310, 0, 4, 6, 20, 5, 5, 1, 3, 4, 4, 6, 6, 3, '', '', ''),
(2, 'players_28_07_2020 à 09_45_54', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 15, 1010, 310, 5, 4, 6, 20, 7, 5, 1, 3, 4, 4, 6, 6, 3, '20/06/2020', '4', 'AT'),
(3, 'players_06_08_2020 à 16_38_10', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 48, 950, 310, 10, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '01/08/2020', '4,5', 'AT'),
(4, 'players_07_08_2020 à 06_54_47', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 49, 960, 310, 10, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '01/08/2020', '4,5', 'AT'),
(5, 'players_14_08_2020 à 08_48_24', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 56, 980, 310, 11, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '08/08/2020', '4,5', 'AT'),
(6, 'players_21_08_2020 à 10_44_50', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 63, 1030, 310, 12, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '19/08/2020', '4,5', 'AT'),
(7, 'players_28_08_2020 à 09_42_36', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 70, 1040, 310, 13, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '19/08/2020', '4,5', 'AT'),
(8, 'players_07_09_2020 à 09_37_15', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 80, 1040, 310, 15, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '19/08/2020', '4,5', 'AT'),
(9, 'players_11_09_2020 à 09_35_ (2', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 84, 990, 310, 15, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '19/08/2020', '4,5', 'AT'),
(10, 'players_19_09_2020 à 10_30_40', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 92, 970, 310, 16, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '16/09/2020', '4,5', 'AT'),
(11, 'players_25_09_2020 à 14_15_11', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '1', '', '', 26, 98, 840, 310, 17, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '23/09/2020', '4,5', 'AT'),
(12, 'players_02_10_2020 à 09_29_35', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 26, 105, 1010, 310, 18, 4, 6, 20, 7, 5, 1, 3, 4, 4, 6, 6, 3, '23/09/2020', '4,5', 'AT'),
(13, 'players_09_10_2020 à 09_28_40', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 27, 0, 880, 310, 19, 4, 6, 20, 5, 5, 1, 3, 4, 4, 6, 6, 3, '23/09/2020', '4,5', 'AT'),
(14, 'players_23_10_2020 à 09_14_02', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 27, 14, 760, 310, 21, 4, 6, 20, 4, 5, 1, 3, 4, 4, 6, 6, 3, '21/10/2020', '4', 'AT'),
(15, 'players_30_10_2020 à 10_28_42', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 27, 21, 920, 310, 22, 4, 6, 20, 5, 5, 1, 3, 4, 4, 6, 6, 3, '28/10/2020', '3,5', 'AT'),
(16, 'players_06_11_2020 à 09_28_27', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 27, 28, 1020, 310, 23, 4, 6, 20, 6, 5, 1, 3, 4, 4, 6, 6, 3, '04/11/2020', '4', 'AT'),
(17, 'players_13_11_2020 à 09_35_02', 'France', '18', 'Adrien Boé', 452461647, '', '', '1', '', '', '', 27, 35, 910, 310, 24, 4, 6, 20, 5, 5, 1, 3, 4, 4, 6, 6, 3, '04/11/2020', '4', 'AT'),
(1, 'players_21_07_2020 à 11_22_47', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 22, 8, 2220, 370, 0, 3, 1, 20, 6, 6, 1, 5, 6, 7, 6, 3, 5, '', '', ''),
(2, 'players_28_07_2020 à 09_45_54', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 22, 47, 2670, 370, 5, 4, 1, 20, 7, 6, 1, 5, 6, 7, 6, 3, 5, '24/06/2020', '3,5', 'DD'),
(3, 'players_06_08_2020 à 16_38_10', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 22, 80, 2800, 370, 10, 4, 1, 20, 7, 6, 1, 5, 6, 7, 6, 3, 5, '05/08/2020', '5', 'AG'),
(4, 'players_07_08_2020 à 06_54_47', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 22, 81, 2870, 370, 10, 4, 1, 20, 7, 6, 1, 5, 6, 7, 6, 3, 5, '05/08/2020', '5', 'AG'),
(5, 'players_14_08_2020 à 08_48_24', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 22, 88, 2970, 370, 11, 4, 1, 20, 7, 6, 1, 5, 6, 7, 6, 3, 5, '12/08/2020', '5', 'AD'),
(6, 'players_21_08_2020 à 10_44_50', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 22, 95, 3100, 370, 12, 4, 1, 20, 7, 6, 1, 5, 6, 7, 6, 3, 5, '19/08/2020', '4,5', 'AG'),
(7, 'players_28_08_2020 à 09_42_36', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 22, 102, 3320, 370, 13, 4, 1, 20, 7, 6, 1, 5, 7, 7, 6, 3, 5, '26/08/2020', '4,5', 'AG'),
(8, 'players_07_09_2020 à 09_37_15', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 23, 0, 3400, 430, 15, 4, 1, 20, 7, 6, 1, 5, 7, 7, 6, 3, 5, '05/09/2020', '5', 'AD'),
(9, 'players_11_09_2020 à 09_35_ (2', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 23, 4, 3630, 430, 15, 4, 1, 20, 7, 6, 1, 5, 7, 7, 6, 3, 5, '09/09/2020', '4,5', 'AG'),
(10, 'players_19_09_2020 à 10_30_40', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '1', '', 23, 12, 3440, 430, 16, 4, 1, 20, 6, 6, 1, 5, 7, 7, 6, 3, 5, '09/09/2020', '4,5', 'AG'),
(11, 'players_25_09_2020 à 14_15_11', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 23, 18, 3630, 430, 17, 4, 1, 20, 6, 6, 1, 5, 7, 7, 6, 3, 5, '23/09/2020', '5', 'AD'),
(12, 'players_02_10_2020 à 09_29_35', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 23, 25, 3800, 430, 18, 4, 1, 20, 7, 6, 1, 5, 7, 7, 6, 3, 5, '30/09/2020', '5', 'AG'),
(13, 'players_09_10_2020 à 09_28_40', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 23, 32, 3860, 430, 19, 4, 1, 20, 6, 6, 1, 5, 7, 7, 6, 3, 5, '07/10/2020', '5', 'AD'),
(14, 'players_23_10_2020 à 09_14_02', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 23, 46, 4520, 430, 21, 4, 1, 20, 7, 6, 1, 5, 7, 7, 6, 3, 5, '17/10/2020', '5,5', 'AD'),
(15, 'players_30_10_2020 à 10_28_42', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 23, 53, 4880, 430, 22, 4, 1, 20, 7, 6, 1, 5, 8, 7, 6, 3, 5, '28/10/2020', '5,5', 'MC'),
(16, 'players_06_11_2020 à 09_28_27', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 23, 60, 4410, 430, 23, 4, 1, 20, 6, 6, 1, 5, 8, 7, 6, 3, 5, '31/10/2020', '5,5', 'AD'),
(17, 'players_13_11_2020 à 09_35_02', 'France', '15', 'Alban Noël', 452461644, '', '', '1', '', '', '', 23, 67, 4070, 430, 24, 4, 1, 20, 5, 6, 1, 5, 8, 7, 6, 3, 5, '07/11/2020', '5', 'AD'),
(1, 'players_21_07_2020 à 11_22_47', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 4, 1360, 330, 0, 5, 4, 20, 5, 7, 1, 6, 6, 6, 4, 3, 3, '', '', ''),
(2, 'players_28_07_2020 à 09_45_54', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 43, 2500, 330, 5, 5, 4, 20, 8, 7, 1, 7, 6, 6, 4, 3, 3, '27/06/2020', '4,5', 'DC'),
(3, 'players_06_08_2020 à 16_38_10', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 76, 2650, 330, 10, 5, 4, 20, 6, 7, 1, 7, 6, 6, 4, 3, 3, '05/08/2020', '5', 'DD'),
(4, 'players_07_08_2020 à 06_54_47', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 77, 2720, 330, 10, 5, 4, 20, 6, 7, 1, 7, 6, 6, 4, 3, 3, '05/08/2020', '5', 'DD'),
(5, 'players_14_08_2020 à 08_48_24', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 84, 2850, 330, 11, 5, 4, 20, 7, 7, 1, 7, 6, 6, 4, 3, 3, '12/08/2020', '5', 'DG'),
(6, 'players_21_08_2020 à 10_44_50', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 91, 3020, 330, 12, 5, 4, 20, 7, 7, 1, 7, 6, 6, 4, 3, 3, '19/08/2020', '4,5', 'AD'),
(7, 'players_28_08_2020 à 09_42_36', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 98, 3050, 330, 13, 5, 4, 20, 7, 7, 1, 7, 6, 6, 4, 3, 3, '26/08/2020', '5', 'AD'),
(8, 'players_07_09_2020 à 09_37_15', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 27, 108, 3110, 330, 15, 5, 4, 20, 7, 7, 1, 7, 6, 6, 4, 3, 3, '05/09/2020', '4,5', 'DC'),
(9, 'players_11_09_2020 à 09_35_ (2', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 28, 0, 2780, 450, 15, 5, 4, 20, 7, 7, 1, 7, 6, 6, 4, 3, 3, '09/09/2020', '4,5', 'AD'),
(10, 'players_19_09_2020 à 10_30_40', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '', '', 28, 8, 2960, 450, 16, 5, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '16/09/2020', '4,5', 'AD'),
(11, 'players_25_09_2020 à 14_15_11', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '1', '', 28, 14, 2970, 450, 17, 6, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '23/09/2020', '4,5', 'DC'),
(12, 'players_02_10_2020 à 09_29_35', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '1', '', 28, 21, 3060, 450, 18, 6, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '30/09/2020', '5,5', 'AD'),
(13, 'players_09_10_2020 à 09_28_40', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '1', '', 28, 28, 3080, 450, 19, 6, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '07/10/2020', '4,5', 'DC'),
(14, 'players_23_10_2020 à 09_14_02', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '1', '', 28, 42, 3220, 450, 21, 6, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '21/10/2020', '5,5', 'AD'),
(15, 'players_30_10_2020 à 10_28_42', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '1', '', 28, 49, 3510, 450, 22, 6, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '28/10/2020', '5,5', 'AD'),
(16, 'players_06_11_2020 à 09_28_27', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '1', '', 28, 56, 3510, 450, 23, 6, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '04/11/2020', '5,5', 'AD'),
(17, 'players_13_11_2020 à 09_35_02', 'France', '14', 'Alexis Lemercier', 452461643, '', 'Joueur de tête', '1', '', '1', '', 28, 63, 3560, 450, 24, 6, 4, 20, 7, 7, 1, 7, 7, 6, 4, 3, 3, '11/11/2020', '5,5', 'AD'),
(1, 'players_21_07_2020 à 11_22_47', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 21, 85, 710, 310, 0, 2, 3, 20, 5, 6, 1, 5, 6, 4, 5, 1, 4, '', '', ''),
(2, 'players_28_07_2020 à 09_45_54', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 22, 12, 830, 310, 5, 2, 3, 20, 6, 6, 1, 5, 6, 4, 5, 1, 4, '27/06/2020', '3,5', 'AD'),
(3, 'players_06_08_2020 à 16_38_10', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 45, 1300, 310, 10, 3, 3, 20, 7, 6, 1, 5, 7, 4, 5, 1, 4, '01/08/2020', '4,5', 'MC'),
(4, 'players_07_08_2020 à 06_54_47', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 46, 1400, 310, 10, 3, 3, 20, 7, 6, 1, 5, 7, 4, 5, 1, 4, '01/08/2020', '4,5', 'MC'),
(5, 'players_14_08_2020 à 08_48_24', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 53, 1520, 310, 11, 3, 3, 20, 6, 6, 1, 5, 7, 4, 5, 1, 4, '08/08/2020', '4,5', 'MC'),
(6, 'players_21_08_2020 à 10_44_50', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 60, 1670, 310, 12, 3, 3, 20, 6, 6, 1, 5, 7, 4, 5, 1, 4, '15/08/2020', '4,5', 'MC'),
(7, 'players_28_08_2020 à 09_42_36', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 67, 1850, 310, 13, 3, 3, 20, 6, 6, 1, 5, 7, 4, 5, 1, 4, '22/08/2020', '4,5', 'MC'),
(8, 'players_07_09_2020 à 09_37_15', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 77, 1890, 310, 15, 3, 3, 20, 6, 6, 1, 5, 7, 4, 5, 1, 4, '05/09/2020', '4,5', 'MC'),
(9, 'players_11_09_2020 à 09_35_ (2', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 81, 1960, 310, 15, 3, 3, 20, 5, 6, 1, 5, 8, 4, 5, 1, 4, '05/09/2020', '4,5', 'MC'),
(10, 'players_19_09_2020 à 10_30_40', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 22, 89, 2010, 310, 16, 3, 3, 20, 6, 6, 1, 5, 8, 4, 5, 1, 4, '05/09/2020', '4,5', 'MC'),
(11, 'players_25_09_2020 à 14_15_11', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 22, 95, 2030, 310, 17, 3, 3, 20, 6, 6, 1, 5, 8, 4, 5, 1, 4, '05/09/2020', '4,5', 'MC'),
(12, 'players_02_10_2020 à 09_29_35', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 22, 102, 1690, 310, 18, 3, 3, 20, 4, 6, 1, 5, 8, 4, 5, 1, 4, '05/09/2020', '4,5', 'MC'),
(13, 'players_09_10_2020 à 09_28_40', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 22, 109, 1610, 310, 19, 3, 3, 20, 3, 6, 1, 5, 8, 4, 5, 1, 4, '07/10/2020', '3,5', 'MC'),
(14, 'players_23_10_2020 à 09_14_02', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 23, 11, 2620, 630, 21, 3, 3, 20, 5, 6, 1, 5, 8, 4, 5, 1, 4, '21/10/2020', '3,5', 'MC'),
(15, 'players_30_10_2020 à 10_28_42', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 23, 18, 2940, 630, 22, 3, 3, 20, 6, 6, 1, 5, 8, 4, 5, 1, 4, '28/10/2020', '4,5', 'MC'),
(16, 'players_06_11_2020 à 09_28_27', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '', '', 23, 25, 3430, 630, 23, 3, 3, 20, 6, 6, 1, 5, 9, 4, 5, 1, 4, '04/11/2020', '4,5', 'MC'),
(17, 'players_13_11_2020 à 09_35_02', 'France', '8', 'Bastien Gaultier', 452461637, '', 'Joueur de tête', '1', '', '1', '', 23, 32, 3900, 630, 24, 3, 3, 20, 7, 6, 1, 5, 9, 4, 5, 1, 4, '11/11/2020', '5', 'MC'),
(15, 'players_30_10_2020 à 10_28_42', 'Autriche', '', 'Gerald Schweiger', 445480514, '', 'Rapide', '', '', '2', '', 21, 63, 4390, 804, 0, 3, 4, 1, 7, 8, 1, 2, 5, 5, 4, 8, 4, '29/10/2020', '5', 'AT'),
(16, 'players_06_11_2020 à 09_28_27', 'Autriche', '', 'Gerald Schweiger', 445480514, '', 'Rapide', '', '', '2', '', 21, 67, 3820, 804, 0, 3, 4, 3, 5, 8, 1, 2, 5, 5, 4, 8, 4, '29/10/2020', '5', 'AT'),
(17, 'players_13_11_2020 à 09_35_02', 'Autriche', '', 'Gerald Schweiger', 445480514, '', 'Rapide', '', '', '2', '', 21, 74, 3450, 804, 1, 3, 4, 4, 4, 8, 1, 2, 5, 5, 4, 8, 4, '07/11/2020', '4,5', 'AT'),
(1, 'players_21_07_2020 à 11_22_47', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 40, 106, 0, 250, 0, 6, 4, 20, 3, 4, 1, 1, 2, 1, 1, 2, 3, '', '', ''),
(2, 'players_28_07_2020 à 09_45_54', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 33, 0, 250, 5, 6, 4, 20, 3, 2, 1, 1, 1, 1, 0, 1, 3, '', '', ''),
(3, 'players_06_08_2020 à 16_38_10', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 66, 0, 250, 10, 6, 4, 20, 3, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(4, 'players_07_08_2020 à 06_54_47', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 67, 0, 250, 10, 6, 4, 20, 3, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(5, 'players_14_08_2020 à 08_48_24', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 74, 0, 250, 11, 6, 4, 20, 3, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(6, 'players_21_08_2020 à 10_44_50', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 81, 0, 250, 12, 6, 4, 20, 2, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(7, 'players_28_08_2020 à 09_42_36', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 88, 0, 250, 13, 6, 4, 20, 2, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(8, 'players_07_09_2020 à 09_37_15', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 98, 0, 250, 15, 6, 4, 20, 2, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(9, 'players_11_09_2020 à 09_35_ (2', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 102, 0, 250, 15, 6, 4, 20, 2, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(10, 'players_19_09_2020 à 10_30_40', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 41, 110, 0, 250, 16, 6, 4, 20, 3, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(11, 'players_25_09_2020 à 14_15_11', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 42, 4, 0, 250, 17, 6, 4, 20, 4, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(12, 'players_02_10_2020 à 09_29_35', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 42, 11, 0, 250, 18, 6, 4, 20, 4, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(13, 'players_09_10_2020 à 09_28_40', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 42, 18, 0, 250, 19, 6, 4, 20, 4, 1, 0, 0, 0, 0, 0, 0, 2, '', '', ''),
(14, 'players_23_10_2020 à 09_14_02', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 42, 32, 0, 250, 21, 6, 4, 20, 4, 1, 0, 0, 0, 0, 0, 0, 1, '', '', ''),
(15, 'players_30_10_2020 à 10_28_42', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 42, 39, 0, 250, 22, 6, 4, 20, 3, 1, 0, 0, 0, 0, 0, 0, 1, '', '', ''),
(16, 'players_06_11_2020 à 09_28_27', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 42, 46, 0, 250, 23, 6, 4, 20, 2, 1, 0, 0, 0, 0, 0, 0, 1, '', '', ''),
(17, 'players_13_11_2020 à 09_35_02', 'France', '', 'Clément Ramassamy', 452461629, '1', '', '1', '', '', '', 42, 53, 0, 250, 24, 6, 4, 20, 4, 1, 0, 0, 0, 0, 0, 0, 1, '', '', ''),
(1, 'players_21_07_2020 à 11_22_47', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 18, 38, 1070, 390, 0, 2, 1, 20, 7, 7, 1, 7, 4, 3, 5, 3, 6, '', '', ''),
(2, 'players_28_07_2020 à 09_45_54', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 18, 77, 2150, 390, 5, 2, 1, 20, 6, 7, 1, 8, 4, 3, 5, 3, 6, '27/06/2020', '4,5', 'DC'),
(3, 'players_06_08_2020 à 16_38_10', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 18, 110, 2440, 390, 10, 2, 1, 20, 5, 7, 1, 9, 4, 3, 5, 3, 6, '01/08/2020', '4', 'DC'),
(4, 'players_07_08_2020 à 06_54_47', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 18, 111, 2370, 390, 10, 2, 1, 20, 5, 7, 1, 9, 4, 3, 5, 3, 6, '01/08/2020', '4', 'DC'),
(5, 'players_14_08_2020 à 08_48_24', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 6, 2570, 750, 11, 2, 1, 20, 6, 7, 1, 9, 4, 3, 5, 3, 6, '08/08/2020', '4', 'DC'),
(6, 'players_21_08_2020 à 10_44_50', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 13, 2590, 750, 12, 2, 1, 20, 6, 6, 1, 9, 4, 3, 5, 3, 6, '08/08/2020', '4', 'DC'),
(7, 'players_28_08_2020 à 09_42_36', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 20, 2440, 750, 13, 2, 1, 20, 6, 6, 1, 9, 4, 3, 5, 3, 6, '08/08/2020', '4', 'DC'),
(8, 'players_07_09_2020 à 09_37_15', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 30, 2330, 750, 15, 2, 1, 20, 5, 6, 1, 9, 4, 3, 5, 3, 6, '08/08/2020', '4', 'DC'),
(9, 'players_11_09_2020 à 09_35_ (2', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 34, 2320, 750, 15, 2, 1, 20, 5, 6, 1, 9, 4, 3, 5, 3, 6, '08/08/2020', '4', 'DC'),
(10, 'players_19_09_2020 à 10_30_40', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 42, 2270, 750, 16, 2, 1, 20, 5, 6, 1, 9, 4, 3, 5, 3, 6, '16/09/2020', '4', 'DC'),
(11, 'players_25_09_2020 à 14_15_11', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 48, 2460, 750, 17, 2, 1, 20, 6, 6, 1, 9, 4, 3, 5, 3, 6, '16/09/2020', '4', 'DC'),
(12, 'players_02_10_2020 à 09_29_35', 'France', '4', 'Jean-Baptiste Bos', 452461633, '', '', '1', '', '', '', 19, 55, 2010, 750, 18, 2, 1, 20, 4, 6, 1, 9, 4, 3, 5, 3, 6, '16/09/2020', '4', 'DC');
COMMIT;
 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
$conn = mysqli_connect("localhost", "root", "", "mes_tables _hattrick");
$sqlQuery = 'SELECT Colonne1, TSI FROM table_hattrick_2 WHERE Nom=\'Alexis Lemercier\'';
$result = mysqli_query ($conn, $sqlQuery);
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
mysqli_close($conn);
echo json_encode($data, JSON_NUMERIC_CHECK);
?>

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
BODY {
    width: 550PX;
}
 
#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
 
</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>
 
    <script>
        $(document).ready(function() {
            showGraph();
        });
 
 
        function showGraph()
        {
            {
                $.post("data.php", function (data)
            {
                    console.log(data);
                     var name = [];
                    var marks = [];
 
                    for (var i in data) {
                        echo $data;
                        name.push(data[i].student_name);
                        marks.push(data[i].marks);
                    }
 
                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };
 
                    var graphTarget = $("#graphCanvas");
 
                    var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata
                    });
                });
            }
        }
        </script>
 
</body>
</html>

Je vous joints mes fichiers ainsi que la base si vous souhaitez faire des tests.

**Toufik83** · 21/11/2020, 14h43

Bonjour,

Il existe plusieurs erreurs dans le code :

1- des accolades "{}" en trop.
2- un echo pas à l'intérieur de <?php ?> dans javascript.
3- absence du type de donnée "json" dans les paramètres de $.post

La correction :

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
 
$(document).ready(function() {
     showGraph();
});
 
 
function showGraph(){
       $.post("data.php", function (data){
             console.log(data);
             var name = [];
             var marks = [];
 
             $.each(data,function(cle,value) {
                  console.log("Colonne1 :",value.Colonne1,", TSI :",value.TSI);
                  name.push(value.Colonne1);
                  marks.push(value.TSI);
              });
 
              var chartdata = {
                   labels: name,
                   datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                    ]
               };
 
               var graphTarget = $("#graphCanvas");
 
               var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata
               });
       },"json");
}

Les console.log() sont là seulement pour examiner le contenu des variables dans la console du navigateur, tu peux les supprimer si tu veux... elles n'ont aucun impact sur le fonctionnement du script.

**tophe44** · 21/11/2020, 16h10

Re-bonjour Toufik83,

Merci pour ta réponse toujours rapide.
J'ai apporté votre corrections dans mon code mais toujours pas graphique.
J'ai testé en enlevant le JSON_NUMERIC_CHECK du json_encode mais pas mieux.

**Toufik83** · 21/11/2020, 16h25

Bonjour,

J'ai testé le code avant de le poster, il est fonctionnel et le graphe s'affiche correctement.

as-tu copier/coller le code tel qu'il est ?

**tophe44** · 21/11/2020, 16h37

oui pourtant mais dans le doute, je reposte les fichiers avec la correction.

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
$conn = mysqli_connect("localhost", "root", "", "mes_tables _hattrick");
$sqlQuery = 'SELECT Colonne1, TSI FROM table_hattrick_2 WHERE Nom=\'Alexis Lemercier\'';
$result = mysqli_query ($conn, $sqlQuery);
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
mysqli_close($conn);
echo json_encode($data, JSON_NUMERIC_CHECK);
?>

Code PHP :

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
<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
BODY {
    width: 550PX;
}
 
#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
 
</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>
 
    <script>
        $(document).ready(function() {
     showGraph();
});
 
 
function showGraph(){
       $.post("data.php", function (data){
             console.log(data);
             var name = [];
             var marks = [];
 
             $.each(data,function(cle,value) {
                  console.log("Colonne1 :",value.Colonne1,", TSI :"value.TSI);
                  name.push(value.Colonne1);
                  marks.push(value.TSI);
              });
 
              var chartdata = {
                   labels: name,
                   datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                    ]
               };
 
               var graphTarget = $("#graphCanvas");
 
               var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata
               });
       },"json");
}
        </script>
 
</body>
</html>

**Toufik83** · 21/11/2020, 20h18

il y'a une erreur à la ligne 14 qu'il fallait voir dans la console du navigateur value.TSI une virgule de moins avant value (pourtant j'ai copié/collé le code .... je ne sais pas ce qui s'est passé ...) .

Correction :

Code :

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

1
2
 
console.log("Colonne1 :",value.Colonne1,", TSI :",value.TSI);//ouvre la console du navigateur pour voir lse messages console !!!

**tophe44** · 21/11/2020, 20h39

Toufik83,

J'ai effectivement des message d'erreur dans la console.
J'ai fait un copier/coller des messages ci-dessous et te joint aussi un print écran si plus clair.
Il semble qu'il ne trouve pas les bibliothèques js/jquery.min.js et js/Chart.min.js et deux avertissements HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

GET http://localhost:81/Tests/js/jquery.min.js net::ERR_ABORTED 404 (Not Found)

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Test_Chart_1.php:18 GET http://localhost:81/Tests/js/Chart.min.js net::ERR_ABORTED 404 (Not Found)

Test_Chart_1.php:27 Uncaught ReferenceError: $ is not defined at Test_Chart_1.php:27 (anonymous) @ Test_Chart_1.php:27

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

**Toufik83** · 21/11/2020, 20h59

Donc jQuery et Chart.min.js ne sont pas correctement importés, vérifies le chemin relatif src="...." des scripts et corrige le.

**tophe44** · 21/11/2020, 21h10

Ok, je fait une recherche pour avoir les bonnes adresses et je fait un retour.
Merci Toufik83

**tophe44** · 21/11/2020, 21h26

J'ai trouvé les deux liens et maintenant c'est nickel. Un grand merci Toufik83, j'ai appris beaucoup grâce à vous, super pro.
voici les liens:

Code :

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

1
2
3
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

**Toufik83** · 21/11/2020, 21h59

Ok, tu as utilisé les liens en ligne, mais il faut apprendre aussi comment utiliser des liens relatifs.

D'après src="http://localhost/Tests/js/...", il faut que les deux fichiers Chart.min.js et jquery.min.js existent dans un dossier nommé "js", bref une arborescence comme ça :

Tests
- index.php
- data.php
- js
  - jquery.min.js
  - Chart.min.js

**tophe44** · 22/11/2020, 07h22

ok oui !!! ok. Je vois. Encore merci Toufik83

Afficher des données dans un graphique highcharts

jQuery

Discussions similaires

Partager

Partager