JQuery flot et les chaînes (string)

Version imprimable

Bonjour à tous, voici mon problème : j'essaie de faire des graphiques avec :
- une courbe recette / une courbe dépenses
- une courbe offensives réussies / ratées
- etc...

...et j'utilise flot (on a pas tous GD).

Et j'aimerai, dans les abcisses avoir des chaînes plutôt que des nombres, car pour l'instant ça me et des 0.2, 0.4, 0.6, 0.8,etc...

Voici mon code actuel :
Code PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function() {
    var data = [
    {
        label: "Recettes",
        data: [["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')+2, date('Y'))); ?>", 10882],
            ["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')+1, date('Y'))); ?>", 10020],
            ["<?php echo date('d/m'); ?>", 9762],
            ["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')-1, date('Y'))); ?>", 9213],
            ["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')-2, date('Y'))); ?>", 8720]]
    },
 
    {
        label: "Dépenses",
        data: [["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')+2, date('Y'))); ?>", 11882],
            ["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')+1, date('Y'))); ?>", 11020],
            ["<?php echo date('d/m'); ?>", 9712],
            ["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')-1, date('Y'))); ?>", 9113],
            ["<?php echo date('d/m', mktime(0, 0, 0, date('m'), date('d')-2, date('Y'))); ?>", 8120]]
    }
    ];
 
    var area = $("#graphic");
    $.plot(area, data);
});

merci beaucoup.

Déjà il faut que tu multiplies les valeurs de temps par 1000 car tu es en milliseconde en javascript.
et ajoute un timeFormat:

Code:

1
2
3
4
5
6
7
xaxis: { 
      mode: 			"time",
      minTickSize: 	[1,"day"],
      min: 			(new Date("'.$dateDebut.'")).getTime(),
      max:			(new Date("'.$dateFin.'")).getTime(),
      timeformat: 	"%d/%m/%y"
}

14/01/2009, 16h40
le_chomeur

avant de répondre , merci de nous donner le code html généré et non le code php :)

Merci de vos réponses,

donc le code js légèrement modifié :

Code:

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
$(function() {
    var data = [
    {
        label: "Recettes",
        data: [["14/05/2009", 10882],
            ["13/05/2009", 10020],
            ["12/05/2009", 9213]]
    },
 
    {
        label: "Dépenses",
        data: [["14/05/2009", 11882],
            ["13/05/2009", 6020],
            ["12/05/2009", 9613]]
    }
	];
 
	var options = {
	    legend: {
	        show: true,
	        margin: 10,
	        backgroundOpacity: 0.5
	    },
	    points: {
	        show: true,
	        radius: 3
	    },
	    lines: {
	        show: true
	    },
xaxis: {
      mode: 			"time",
      minTickSize: 	[1,"day"],
      min: 			(new Date("12/05/2009")).getTime(),
      max:			(new Date("14/05/2009")).getTime(),
      timeformat: 	"%d/%m"
}
	};
 
    var area = $("#graphic");
    $.plot(area, data, options);
});

et le rendu :S :
http://a9.img.v4.skyrock.net/a93/pun...56494503_1.png

Bonsoir.

Le problème est dans la gestion des dates, Flot demande des millisecondes représentant une date au format UTC :

Code:

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
 
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="examples/layout.css" />
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid red;
			font-size:0.8em;
		}
	</style>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery.flot.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){			
			// Date.UTC(year, month[, date[, hrs[, min[, sec[, ms]]]]]) 
			// gmtDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
 
			$.plot(
				$("#graphic"),
				[
					{
						data: [
							[Date.UTC(2009, 4, 12), 10882],
							[Date.UTC(2009, 4, 13), 10020],
							[Date.UTC(2009, 4, 14), 9213]
						],
						label: "Recettes"
 
					},
					{
						data: [
							[Date.UTC(2009, 4, 12), 11882],
							[Date.UTC(2009, 4, 13), 6020],
							[Date.UTC(2009, 4, 14), 9613]
						],
						label: "Dépenses"
					}
				],
				{
					legend: {
						show: true,
						margin: 10,
						backgroundOpacity: 0.5
					},
					points: {
						show: true,
						radius: 3
					},
					lines: {
						show: true
					},
					xaxis: {
						mode: "time",
						minTickSize: [1, "day"],
						min: Date.UTC(2009, 4, 12),
						max: Date.UTC(2009, 4, 14),
						timeformat: "%d/%m"
					}
				}
			);
 		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="graphic" style="width:600px;height:300px;"></div>
	</div>
</body>
</html>

Le graphique ne s'affiche pas correctement sous IE8, le bug provient de FLot, il est connu et référencé sous le numéro 160.