JQuery flot et les chaînes (string)

**Valter** · 01/12/2008, 17h07

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 JavaScript :

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
$(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.

**Skieur38** · 14/01/2009, 16h38

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 :

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

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"
}

**le_chomeur** · 14/01/2009, 16h40

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

**Valter** · 15/05/2009, 16h33

Merci de vos réponses,

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

Code Javascript :

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
$(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 :

**danielhagnoul** · 16/05/2009, 02h17

Bonsoir.

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

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
 
<<!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.

JQuery flot et les chaînes (string)

jQuery

Discussions similaires

Partager

Partager