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.
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>
comment faire pour activer le zoom???

j'ai fais quelque modifications sur le code, voilà ce que ça donne mais ça me retourne une page blanche.
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>
merci d'avance pour votre aide