Bonjour

J'ai récemment découvert l'API Raphael.js qui permet de tracer des diagrammes facilement et j'ai voulu la tester.
Seulement voila, je suis tombé sur une buche et j'arrive vraiment pas à comprendre d'où viens le problème
Grosso modo, pour le même page (strictement la même d'un point de vue HTML), j'ai un comportement différent si une variable $_GET est définie ou non...

Sans plus attendre, un exemple en screenshot :
http://imgur.com/HGNgJGT
http://imgur.com/0YnSp1Q

Voici le code de cette page:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta ttp-equiv="Content-Type" content="text/html" charset="utf-8">
	</head>
	<body>
		<?php if(isset($_GET['page'])) {include 'includes/wtf.php';} else {include 'includes/wtf.php';}?>
	</body>
</html>
le code de wtf.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
 
<div>
	<script src="js/Raphael.js" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js" charset="utf-8"></script>
	<script src="js/pie.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
 
		    var values = [],
		        labels = [];
		    $("tr").each(function () {
		        values.push(parseInt($("td", this).text(), 10));
		        labels.push($("th", this).text());
		    });
		    $("table").hide();
 
		    Raphael("holder", 600, 500).pieChart(300, 170, 100, values, labels, "#000");
		});
	</script>
 
	<table>
		<tbody>
		<tr>
			<th scope="row">Test</th>
			<td>56%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>33%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>10%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>1%</td>
		</tr>
		</tbody>
	</table>
	<center><div id="holder"></div></center>
</div>
 
<style media="screen">
    #holder {
    	border: 1px solid rgb(150, 203, 0);
        width: 600px;
        height: 350px;
    }
</style>
et pie.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
34
35
36
37
38
39
40
41
42
43
44
45
 
Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = Raphael.hsb(start, .75, 1),
                ms = 500,
                delta = 30,
                bcolor = Raphael.hsb(start, 1, 1),
                p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 3}),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({fill: bcolor, stroke: "none", opacity: 0, "font-size": 20});
            p.mouseover(function () {
                p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
                txt.stop().animate({opacity: 1}, ms, "elastic");
            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "elastic");
                txt.stop().animate({opacity: 0}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};
Si ya besoin de Raphael.js, je peut donner le code, mais c'est le même que celui téléchargeable sur le site officiel (http://raphaeljs.com/)

J'ai d'abord pensé que c'était dû à un problème de caractères mais aparemment non (ou alors il est bien caché).
Le problème se situe au niveau du "if" en PHP. Si je l'enleve et que je met simplement un "include", ça fonctionne sans problème.
Mais bon, j'ai besoin de cette condition Et franchement, je suis comprend vraiment pas en quoi une variable $_GET en plus ou en moins changerais le comportement d'un script Javascript

Suis-je le seul, ou quelqu'un d'autre obtient le même problème ?
Merci de votre aide

PS: Pour les modos, si je ne suis pas dans le bon forum je m'en excuse Je me suis dit que vu que le comportement change au niveau Javascript, il fallait que je m'adresse ici