Bonsoir tout le monde ,

J'ai besoin d'une petit aide, j'aimerais utiliser le code (ci-dessous) trouvé sur le site Highcharts JS.
Mais ya rien qui s'affiche, mis à part le petit tableau, pas de graphe???
Je ne comprends pas pourquoi, pourtant les bibliothèques jquery.js et highcharts.js se trouvent dans le même dossier que le fichier html.

Savez pourquoi?

Merci pour vos réponses!!!


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
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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
 
		<script type="text/javascript" src="Highcharts/js/highcharts.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
 
	</head>
	<body>
		<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 
		<table id="datatable">
			<thead>
				<tr>
					<th></th>
					<th>Jane</th>
					<th>John</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Apples</th>
					<td>3</td>
					<td>4</td>
				</tr>
				<tr>
					<th>Pears</th>
					<td>2</td>
					<td>0</td>
				</tr>
				<tr>
					<th>Plums</th>
					<td>5</td>
					<td>11</td>
				</tr>
				<tr>
					<th>Bananas</th>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<th>Oranges</th>
					<td>2</td>
					<td>4</td>
				</tr>
			</tbody>
		</table>
 
		<script type="text/javascript">
			$(function () {
			// On document ready, call visualize on the datatable.
				$(document).ready(function() {
					/**
					 * Visualize an HTML table using Highcharts. The top (horizontal) header
					 * is used for series names, and the left (vertical) header is used
					 * for category names. This function is based on jQuery.
					 * @param {Object} table The reference to the HTML table to visualize
					 * @param {Object} options Highcharts options
					 */
					Highcharts.visualize = function(table, options) {
						// the categories
						options.xAxis.categories = [];
						$('tbody th', table).each( function(i) {
							options.xAxis.categories.push(this.innerHTML);
						});
 
						// the data series
						options.series = [];
						$('tr', table).each( function(i) {
							var tr = this;
							$('th, td', tr).each( function(j) {
								if (j > 0) { // skip first column
									if (i == 0) { // get the name and init the series
										options.series[j - 1] = {
											name: this.innerHTML,
											data: []
										};
									} else { // add values
										options.series[j - 1].data.push(parseFloat(this.innerHTML));
									}
								}
							});
						});
 
						var chart = new Highcharts.Chart(options);
					}
 
					var table = document.getElementById('datatable'),
					options = {
						chart: {
							renderTo: 'container',
							type: 'column'
						},
						title: {
							text: 'Data extracted from a HTML table in the page'
						},
						xAxis: {
						},
						yAxis: {
							title: {
								text: 'Units'
							}
						},
						tooltip: {
							formatter: function() {
								return '<b>'+ this.series.name +'</b><br/>'+
									this.y +' '+ this.x.toLowerCase();
							}
						}
					};
 
					Highcharts.visualize(table, options);
				});
 
			});
		</script>
	</body>
</html>