Affichage de courbes

**supcomingenieur** · 03/05/2013, 13h35

Bonjour,
j'ai un fichier php qui affiche deux courbes en fonctions du temps. l'une donne l'évolution du nombre de destinations IPV4 , l'autre IPV6. les valeurs sont affichées depuis une table SQL.
j'ai en fait deux problèmes:
le premier est que la courbe IPV6 ne s'affiche pas (car les données sont égales à 0 dans ma table SQL). Mais j'aimerai quand même avoir la courbe. comment je pourrais régler l'échelle de l'axe des ordonnées pour que la valeur 0 soit prise en compte.

deuxième problème: l'axe des abcisse représente une date (première colonne de ma table SQL), j'aimerai insérer la fonctionnalité zoom, pour que le temps (deuxième colonne de ma table ) soit affichée, si l'utilisateur veu plus de précision

voilà mon code 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?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>
    Line Chart on a DateTime Axis Example - HTML5 jQuery Chart Plugin by jqChart
</title>
    <link rel="stylesheet" type="text/css" href="/jqChartJQuery/css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="/www/jqChartJQuery/css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="/www/jqChartJQuery/themes/le-frog/jquery-ui-1.8.20.css" />
    <script src="/jqChartJQuery/js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/jqChartJQuery/js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="/jqChartJQuery/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 () {
            $('#jqChart').jqChart({
                title: { text: 'IPv4 / IPv6 prefixes' },
                tooltips: { type: 'shared' },
                animation: { duration: 2 },
                axes: [{
                    location: 'bottom',
                }],
                series: [
                            {
                                type: 'line',
                                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',
                                title: 'IPv6',
                                data: [<?php
                                        while ($donnees = mysql_fetch_array($query))
                                          { 
                                            $ipv6=intval($donnees['IPv6']); 
                                            $data2 .= "['".$date."', ".$ipv6."],"; 
                                          }
                                         echo $data2;
                                      ?>]
                            }
                        ]
            });
        });
    </script>
 
</head>
<body>
    <div>
        <div id="jqChart" style="width: 1000px; height: 300px;">
        </div>
    </div>
</body>
</html>

bien sur je vous remercie pour votre aide, ce forum m'a bien été utille je m'excuse d'avoir trop vite valider. merci

**Celira** · 03/05/2013, 14h13

A priori, tu n'as pas de données à afficher pour la courbe ipv6 parce que tu utilises le même jeu de donnés que pour ipv4.
Or, comme tu l'as déjà parcouru en entier, il ne voit pas de données à afficher. Essaye de remettre le pointeur à 0 juste avant la 2e boucle :

Code :

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

1
2
3
4
5
6
7
mysql_data_seek($query, 0);
while ($donnees = mysql_fetch_array($query))
  { 
	$ipv6=intval($donnees['IPv6']); 
	$data2 .= "['".$date."', ".$ipv6."],"; 
  }
 echo $data2;

http://www.php.net/manual/fr/functio...-data-seek.php

Pour le zoom, j'ai pas compris la demande.

**supcomingenieur** · 03/05/2013, 15h18

merci les deux courbes apparaissent maintennant. je t'explique le besoin en la fonctionnalité zoom.
en fait, puisque le nombre de destinations IPv4 est bien trop grand (400000 et plus), j'ai une courbes horizontale car la variation en nombres de destinations est trop petites (les valeurs sont 400000, 405000, 444000...) donc on ne voit pas de fluctuation.
pour mettre cette variation en evidence j'aimerai changer l'echelle de la courbe des ordonnées (au lieu d'avoir 0, 100000,200000 etc... je voudrais avoir 0 , 400000, 401000...) pour qu'oon puissque voir une courbe qui evolue et non pas une ligne rectiligne. c'est pour cette raison que j'aimerai intégérer la fonctionnalité de zoom ou bien sur la courbe elle même ou bien sur les axes de la courbes.

j'espère avoir été claire je sais que c'est un peu ambigue. merci

**Celira** · 03/05/2013, 17h11

En gros, ne pas afficher les ordonnées pour lequelles il n'y a pas de valeurs ? Comme si on coupait un gros morceau de l'axe Y ?
Quelque chose comme ça :

A priori, ça relève davantage du fonctionnement de ton composant qui est visiblement un plugin jQuery. Du coup, il vaudrait mieux poser la question dans le forum jQuery.

**supcomingenieur** · 03/05/2013, 17h28

Au fait j'ai laissé tomber l'idée du zoom et j'ai choisi de faire deux axes "y" avec des echelles différentes et donc j'ai deux graphes l'un avec des valeurs =0 l'autres avec des valeurs non nulles et qui présentes une flctuation en fonction du temps.
je te remercie pour ton aide en tout cas.

**Celira** · 03/05/2013, 17h46

De rien

donc ?

**supcomingenieur** · 03/05/2013, 18h22

Au fait je veux maintenant créer un autre type type de graphe mais je e trouve pas un modèle qui correspond à mes besoin donc je vais t'expliquer ce que je veux faire et tu me diras si c'est faisable.
j'ai une table SQL qui comporte deux colonne: une avec des adresse IP et une autre qui contient le chemin pour arriver à cette addresse. le chemin est une suite numériques formée par des nombres (exp: 45821 235 1561 752) où chaque nombre représente ce qu'on appelle un système autonome.
j'aimerai représenter sur un graphe tous mes systèmes autonommes (la position est aléatoire). puis depuis une interface graphique, si j'entre une Adresse IP, je verrai un chemin qui se trace en reliant les systèmes autonomes pour l'adresse concernée.
si je tape par exemple 10.0.0.0/22 et que cette addresse correspond au chemin "10 11 12 13" je voudrai avoir un chemin tracé qui relies les points 10 11 12 et 13.

voila je sais que c'est compliqué mais j'espère avoir bien expliquée le problème.
merci

Affichage de courbes

Langage PHP

Discussions similaires

Partager

Partager