Bonjour tout le monde,
je suis entrain de générer des graphes et des staistiques en utilisant le plugin jqChart.
jusqu'ici j'ai réussi à avoir de belle courbes. j'aimerai ajouter la fonctionnalité de zoom sur les axes de ma courbes. il existe sur jqChart à ce lienhttp://www.jqchart.com/jquery/chart/...es/AxisZooming un très bon exemple. Je l'ai testé sur ma machine et ça fonctionne mais je n'arrive pas à l'adapter à mes besoins.
voici le code de ma courbe (qui fonctionne très bien). les valeurs de mes axes sont extraites depuis une table SQL.
comment faire pour activer le zoom???
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 <?php // Connexion à la base de données $db = mysql_connect('localhost', 'root', 'Orange2424') or die('Erreur de connexion '.mysql_error()); mysql_select_db('OrangeTunisie',$db) or die('Erreur de sélection '.mysql_error()); // Requête SQL permettant la création du graphique $query = mysql_query("SELECT * from Prefix_Count_History"); $name_chart = "Prefix_Count_History"; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Line Chart on a DateTime Axis Example - HTML5 jQuery Chart Plugin by jqChart </title> <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" /> <link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" /> <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script> <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script> <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script> <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]--> <script lang="javascript" type="text/javascript"> $(document).ready(function () { var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white '}] }; $('#jqChart').jqChart({ title: { text: 'IPv4 / IPv6 prefixes' }, border: { strokeStyle: '#6ba851' }, background: background, tooltips: { type: 'shared' }, animation: { duration: 2 }, shadows: { enabled: true }, axes: [{ name: 'y1', type: 'linear', location: 'left', labels: { fillStyle: 'blue', font: '12px sans-serif' } }, { name: 'y2', type: 'linear', location: 'right', labels: { fillStyle: 'red', font: '12px sans-serif' } }, { type: 'datetime', location: 'buttom', zoomEnabled: true }], series: [ { type: 'line', axisY: 'y1', title: 'IPv4', data: [ <?php while ($donnees = mysql_fetch_array($query)) { $date = addslashes($donnees['Date']); $ipv4=intval($donnees['IPv4']); $data .= "['".$date."', ".$ipv4."],"; } echo $data; ?>] }, { type: 'line', axisY: 'y2', title: 'IPv6', data: [<?php mysql_data_seek($query, 0); while ($donnees = mysql_fetch_array($query)) { $ipv6=intval($donnees['IPv6']); $data2 .= "['".$date."', ".$ipv6."],"; } echo $data2; ?>] } ] }); }); </script> </head> <body> <div> <div id="jqChart" style="width: 1100px; height: 300px;"> </div> </div> </body> </html>
j'ai fais quelque modifications sur le code, voilà ce que ça donne mais ça me retourne une page blanche.
merci d'avance pour votre aide
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 <?php // Connexion à la base de données $db = mysql_connect('localhost', 'root', 'Orange2424') or die('Erreur de connexion '.mysql_error()); mysql_select_db('OrangeTunisie',$db) or die('Erreur de sélection '.mysql_error()); // Requête SQL permettant la création du graphique $query = mysql_query("SELECT * from Prefix_Count_History"); $name_chart = "Prefix_Count_History"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Axis Zooming Example - HTML5 jQuery Chart Plugin by jqChart </title> <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" /> <link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" /> <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script> <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script> <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script> <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]--> <script lang="javascript" type="text/javascript"> var data1 = []; <?php while ($donnees = mysql_fetch_array($query)) { $date = addslashes($donnees['Date']); $ipv4 =intval($donnees['IPv4']); data1.push(date, ipv4); } ?> $(document).ready(function () { var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white'}] }; $('#jqChart').jqChart({ title: 'IPv4 / IPv6 prefixes', animation: { duration: 1 }, axes: [ { type: 'dateTime', location: 'bottom', zoomEnabled: true, }, { type: 'linear', location: 'left', zoomEnabled: true } ], border: { strokeStyle: '#6ba851' }, background: background, series: [ { type: 'line', data: <?php echo $data1; ?> markers: null } ] }); }); </script> </head> <body> <div> <div id="jqChart" style="width: 500px; height: 300px;"> </div> </div> </body> </html>
Partager