Discussion :

[ayoub.92]

bonjour, je suis un étudiant je dois réaliser sur une page web en PHP( avec la bibliothèque JPGraph) qui est relié à une base de données. Pour cela je dois intégrer une courbe avec des points qui affichent la valeur(j'ai fait la courbe mais je ne sais pas comment faire afficher les valeurs des points de la courbe). Et aussi pouvoir sélectionner une partie de la courbe concernant des dates et heures qui s'afficheront uniquement pour la période sélectionnée (par exemple sur une courbe annuelle, je veux pouvoir sélectionner une période et avoir les données correspondant uniquement). Cela fait plusieurs semaines que je suis bloqué. Merci 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
<?php
include ("jpgraph-4.3.5/src/jpgraph.php");
include ("jpgraph-4.3.5/src/jpgraph_line.php");
/* connexion sgbd a ne pas oublier */
 
$host = "127.0.0.1"; /* L'adresse du serveur */
$login = "root"; /* Votre nom d'utilisateur */
$password = ""; /* Votre mot de passe */
$base = "boite_noire"; /* Le nom de la base */
/*/function connexion()
{
    global $host, $login, $password, $base;
    $db = mysql_connect($host, $login, $password);
    mysql_select_db($base,$db);
}

$sql = 'select moteur from Essence,Date_de_moteur,ID_moteur;';
$req = mysql_query($sql);
while ( ($data = mysql_fetch_assoc($req))!== false) {
    $xdata[] = $data['ID_moteur'];
    $ydata[] = $data['Essence'];
    $zdata[] = $data['Date_de_moteur'];
}*/
 
// Fonction de connexion
$dbh = new PDO('mysql:host=localhost;dbname=boite_noire', $login, $password);
 
// use the connection here // Selection de la table apres la connexion
$sth = $dbh->query('SELECT * FROM moteur');
 
// fetch all rows into array, by default PDO::FETCH_BOTH is used // 
$rows = $sth->fetchAll();
 
// iterate over array by index and by name // 
foreach($rows as $row) {
    //echo $row['ID_moteur']." ".$row['Essence']." ".$row['Date_de_moteur']."<br />\n";
    //printf("$row['ID_moteur'] $row['Essence'] $row['Datedemoteur'] \n");
 
     $xdata[] = $row['Date_de_moteur'];
     $Toursdata[] = $row['Tours'];
     $Essencedata[] = $row['Essence'];
     $Vitessedata[] = $row['Vitesse'];
}
 
 
 
$graph = new Graph(500,300,"auto");
$graph->SetScale("textlin");
$graph->img->SetMargin(40,40,40,50);
$graph->xaxis->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->SetTickLabels($xdata);
$graph->title->Set("Phoebus1");
 
$lineplot=new LinePlot($Toursdata);
$lineplot->SetColor("green");
 
$lineplot1=new LinePlot($Vitessedata);
$lineplot->SetColor("blue");
 
$lineplot2=new LinePlot($Essencedata);
$lineplot2->SetColor("red");
 
$lineplot->SetLegend("Tour");
$lineplot1->SetLegend("Vitesse");
$lineplot2->SetLegend("Essence");
$graph->Add($lineplot2);
$graph->Add($lineplot1);
$graph->Add($lineplot);
 
$graph->Stroke();
?>

[mathieu]

pour afficher des graphies, il existe maintenant des bibliothèques en javascript qui donnent beaucoup plus de possibilités que la création d'images côté serveur :
https://www.chartjs.org/docs/latest/...ulti-axis.html
http://www.jqplot.com/examples/barLineAnimated.php
https://observablehq.com/@d3/stacked-to-grouped-bars

[ayoub.92]

OK merci je vois comment je peux y arriver et je reviens vous voir pour voir si c'est bon

[ayoub.92]

bonjour vous avez un script a m'envoyé en JavaScripts pour faire un graphique avec des valeur des point tout sa relier a ma BDD stp

[ayoub.92]

bonjour je veux utiliser chart.js pour faire mon graph mais il ne s'affiche pas et aussi je n'y arrive pas est-ce que quelqu'un peut m'expliquer comment l'utiliser s'il vous plait c'est urgent
je suis allé ici mais j'ai pas compris comment l'utiliser
https://www.chartjs.org/docs/latest/...tallation.html

Code HTML :

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
<html>
    <head>
        <meta charset="utf-8">
        <!-- importer le fichier de style -->
        <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
        <script scr="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    </head>
    <body style='background:#fff;'>
 
        <canvas id="graph1"></canvas>
 
 
        <div id="content">
 
            <a href='principale.php?deconnexion=true'><span>Déconnexion</span></a>
 
            <!-- tester si l'utilisateur est connecté -->
            <?php
                session_start();
                if(isset($_GET['deconnexion']))
                { 
                   if($_GET['deconnexion']==true)
                   {  
                      session_unset();
                      header("location:login.php");
                   }
                }
                else if($_SESSION['username'] !== ""){
                    $user = $_SESSION['username'];
                    // afficher un message
                    echo "<br>Bonjour $user, vous êtes connectés";
                }
            ?>
 
        </div>
    </body>
</html>
 
<script> </script><script> </script>
<script>
    var ctx = document.getElementByID('graph1').getContexte('2d')
    
    var data = {
        labels: ['label 1', 'label 2' ,'label 3' ,'label 4'],
        datasets: [
            {   backgroundColor: '#OOOOOO',
                data: [10, 30, 20, 50]
            },
            
            {
                data: [5, 20, 30, 60]
            }
        ]
    }
 
    var options
    
    var config = {
        
        type: 'line',
        data: data,
        options: options
 
    }
    var graph1 = new Chart(ctx, config)
 
</script>