IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

PHP & Base de données Discussion :

PHP et Highcharts


Sujet :

PHP & Base de données

  1. #1
    Membre averti
    Homme Profil pro
    Employé
    Inscrit en
    Octobre 2013
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Employé
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2013
    Messages : 51
    Par défaut PHP et Highcharts
    Bonjour à tous, en espérant que je ne me trompe pas de forum, sinon, merci aux admins de m'indiquer où poser mon problème.


    Je suis loin d'etre un expert de la programmation, je dirais même que pour 3 lignes de code il me faut 3 heures avant de comprendre.

    Bien :
    J'ai une base mysql dans laquel j'ai créé une table nommée gasoil. Dans cette table, je souhaite récupérer les valeurs de deux colonnes afin de pouvoir générer un graphique avec Highcharts.
    Pour ce faire, j'ai donc créé deux fichiers php, database.php et graph.php.

    Voici le résultat obtenu :
    Nom : Screenshot_20200726_161811.png
Affichages : 622
Taille : 153,8 Ko





    voici le code du fichier database.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
     
    <?php
    $servername = "localhost";
    $username = "nobody";
    $password = "";
    $dbname = "hhhh";
     
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
    }
     
    $sqlquery = "select date from gasoil order by date";   //la requete prend les champs date ds la base de données et trie par dates
    	       $resultset = mysqli_query($conn, $sqlquery) or die("database error:". mysqli_error($conn));
     
    	      $array_date= array();
    	      $array_ppl= array();
     
    	      while ( $row = mysqli_fetch_array($resultset) ) // tant qu'il y a des données c 'est incorporé dans le tableau
    	      {  //debut while
     
    		         $date = $row["date"];   //repcupération de la valeur date  
                  	array_push($array_date, $date);     
     
     
                } // fin while	
     
                $sqlquery1 = "select ppl from gasoil";   //la requete prend les champs ppl ds la base de données 
    	       $resultset1 = mysqli_query($conn, $sqlquery1) or die("database error:". mysqli_error($conn));
     
                while ( $row1 = mysqli_fetch_array($resultset1) ) // tant qu'il y a des données c 'est incorporé dans le tableau
    	      {  //debut while
    		     $ppl =     $row1["ppl"];
     
                  	array_push($array_ppl, $ppl); 
     
                } // fin while	
     
     
    $conn->close();
    ?>
    Et enfin, le code du fichier graph.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
    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
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
     
    <?php include ('../database.php');
    include ('../fonctions.php');
     
     
    print_r($array_date);
    print_r($array_ppl);
     
    ?>
     
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Highcharts pleins</title>
     
    		<style type="text/css">
    .highcharts-figure, .highcharts-data-table table {
        min-width: 360px; 
        max-width: 800px;
        margin: 1em auto;
    }
     
    .highcharts-data-table table {
    	font-family: Verdana, sans-serif;
    	border-collapse: collapse;
    	border: 1px solid #EBEBEB;
    	margin: 10px auto;
    	text-align: center;
    	width: 100%;
    	max-width: 500px;
    }
    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }
    .highcharts-data-table th {
    	font-weight: 600;
        padding: 0.5em;
    }
    .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
        padding: 0.5em;
    }
    .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }
    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }
     
    		</style>
    	</head>
    	<body>
    <script src="../code/highcharts.js"></script>
    <script src="../code/modules/series-label.js"></script>
    <script src="../code/modules/exporting.js"></script>
    <script src="../code/modules/export-data.js"></script>
    <script src="../code/modules/accessibility.js"></script>
     
    <figure class="highcharts-figure">
        <div id="container"></div>
     
    </figure>
     
     
     
     
     
    		<script type="text/javascript">
    Highcharts.chart('container', {
     
         chart: {
            type: 'spline',
            scrollablePlotArea: {
                minWidth: 600,
                scrollPositionX: 1
            }
        },
     
     
        title: {
            text: 'Pleins Peugeot 2008'
        },
     
        subtitle: {
            text: ''
        },
     
        yAxis: {
            title: {
                text: 'Prix du litre'
            }
        },
     
        xAxis: {
            accessibility: {
                rangeDescription: ''
            }
        },
     
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
     
        tooltip: {
            valueSuffix: ' €/L'
        },
     
      plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },
     
            }
        },
     
     
     
      /* 
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
    */
        series: [{
     
            data: [<?php echo join($array_ppl, ',') ?>],
        }, 
        ],
     
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 800
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
     
    });
    		</script>
    	</body>
    </html>
    Vous pouvez remarquer que j'ai bien mes deux arrays (date et ppl) qui sont bien renseignés.
    En revanche, sur le graphique, je n'arrive pas à obtenir les dates correspondantes à chaque prix de l'essence au litre. (et oui, ppl = prix par litre)


    Si quelqu'un pouvait m'aider de façon à ce que je comprenne, ce serait formidable. J'ai tenté des tas de truc, mais rien de chez rien ne fonctionne.

    Merci par avance à mon futur sauveur.

    Eric

  2. #2
    Modérateur
    Avatar de grunk
    Homme Profil pro
    Lead dév - Architecte
    Inscrit en
    Août 2003
    Messages
    6 693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Lead dév - Architecte
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2003
    Messages : 6 693
    Par défaut
    Tu ne spécifie pas de valeurs pour ton axe des x :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    xAxis: {
            accessibility: {
                rangeDescription: ''
            }
    }
    Tu devrais avoir quelque chose comme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    xAxis: {
            categories: [<?php echo join($array_date, ',') ?>]
    }
    Cf cet exemple dans al doc de highchart : https://www.highcharts.com/demo/line-labels
    Pry Framework php5 | N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Membre averti
    Homme Profil pro
    Employé
    Inscrit en
    Octobre 2013
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Employé
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2013
    Messages : 51
    Par défaut
    Merci pour la réponse, très aimable à vous de l'avoir faite.

    J ai testé, bien évidemment.
    Voici ce que ça donne :

    Nom : Screenshot_20200727_130527.png
Affichages : 583
Taille : 163,3 Ko

    n'importe quoi par rapport aux dates. j'ai commencé les stats en 2018.
    Une question que je me pose après avoir lu, relu, parcouru le web etc....avant de poser mon problème ici, car je ne souhaite embêter personne avant d'avoir cherché moi même.

    Highcharts parle aussi de timestamp pour les dates. Pour autant, les explications s'adressent à ceux qui savent, et non pas aux novices qui ne comprennent rien comme moi.
    Est-ce qu'il faut que je convertisse mes "yy-mm-dd" en timestamp pour avoir les bonnes valeurs ? J'ai testé, mais bon, rien de positif. où alors il faut ajouter des lignes que je ne connais pas et ne sont indiquées nulle part pour un néophyte.

    En tout cas, merci pour votre réponse. J'en attends d'autres

    Eric

  4. #4
    Modérateur
    Avatar de grunk
    Homme Profil pro
    Lead dév - Architecte
    Inscrit en
    Août 2003
    Messages
    6 693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Lead dév - Architecte
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2003
    Messages : 6 693
    Par défaut
    Les valeures en x sont des chaines de caractères , et peuvent donc être un peut n'importe quoi.

    Voilà a quoi devrait ressembler le code du graphique une fois généré par PHP (j'ai pris que 4 valeurs pour l'exemple) :

    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
    Highcharts.chart('container', {
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Titre'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['24-12-2018','03-01-2019','02-02-2019','05-03-2019']
        },
        yAxis: {
            title: {
                text: 'PRix'
            },
            labels: {
                formatter: function () {
                    return this.value + '€';
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: 'test',
            data: [1.379, 1.374, 1.382, 1.422]
     
        }]
    });
    Tu peux voir un exemple fonctionnel ici : https://jsfiddle.net/0x3wg59z/
    Pry Framework php5 | N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Membre averti
    Homme Profil pro
    Employé
    Inscrit en
    Octobre 2013
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Employé
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2013
    Messages : 51
    Par défaut ben....je ne comprends pas.....
    J'ai tout bien fais et pourtant

    Voici le code de graph.php suivant tes conseils, à la seule différence que je fais un echo des données

    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
    <script type="text/javascript">
    Highcharts.chart('container', {
     
         chart: {
            type: 'spline'
            
        },
     
     
        title: {
            text: 'Pleins Peugeot 2008'
        },
     
        subtitle: {
            text: ''
        },
        
        xAxis: {
            categories: [<?php echo join($array_date, ',') ?>]
           },
      
        
        yAxis: {
            title: {
                text: 'Prix au litre'
                   },
               labels: {
                formatter: function () {
                    return this.value + '€';
                }
            }
        
        },
        
     
        tooltip: {
            crosshairs: true,
            shared: true
        },
     
      plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
     
     
     series: [{
            name: 'test',
            data: [<?php echo join($array_ppl, ',') ?>]
     
    }]  
        
     
    });
                    </script>


    Et voici le résultat :
    Nom : Screenshot_20200728_105635.png
Affichages : 575
Taille : 190,8 Ko

    Il y a un loup quelque part. J ai remarqué que tes données pour Xaxis sont chacune mise entre des '. Le problème pourrait-il venir de là ? Car mon echo n'envoit pas de '.

    Cordialement

    Eric

  6. #6
    Membre averti
    Homme Profil pro
    Employé
    Inscrit en
    Octobre 2013
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Employé
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2013
    Messages : 51
    Par défaut YEAP
    Considérant qu'il y avait des guillemets simples dans les valeurs de ton exemple, j'en ai rajouté dans mon tableau array_date.

    Et miracle :
    Nom : Screenshot_20200728_112753.png
Affichages : 575
Taille : 202,9 Ko

    Bon....le code doit te paraitre merdique mais ça fonctionne

    code pour le graphique :
    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
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
     
    <?php include ('../database.php');
    include ('../fonctions.php');
     
     
    //print_r($array_date);
    //print_r($array_ppl);
    //print_r($array_date);
     
     
    $array_date2 = $array_date;
    foreach($array_date2 as &$value){
       $value = "'$value'";
    }
     
    ?>
     
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Highcharts pleins</title>
     
    		<style type="text/css">
    .highcharts-figure, .highcharts-data-table table {
        min-width: 360px; 
        max-width: 900px;
        margin: 1em auto;
    }
     
    .highcharts-data-table table {
    	font-family: Verdana, sans-serif;
    	border-collapse: collapse;
    	border: 1px solid #EBEBEB;
    	margin: 10px auto;
    	text-align: center;
    	width: 100%;
    	max-width: 500px;
    }
    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }
    .highcharts-data-table th {
    	font-weight: 600;
        padding: 0.5em;
    }
    .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
        padding: 0.5em;
    }
    .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }
    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }
     
    		</style>
    	</head>
    	<body>
    <script src="../code/highcharts.js"></script>
    <script src="../code/modules/series-label.js"></script>
    <script src="../code/modules/exporting.js"></script>
    <script src="../code/modules/export-data.js"></script>
    <script src="../code/modules/accessibility.js"></script>
     
    <figure class="highcharts-figure">
        <div id="container"></div>
     
    </figure>
     
     
     
     
     
    		<script type="text/javascript">
    Highcharts.chart('container', {
     
         chart: {
            type: 'spline'
     
        },
     
     
        title: {
            text: 'Pleins Peugeot 2008'
        },
     
        subtitle: {
            text: ''
        },
     
        xAxis: {
            categories: [<?php echo join($array_date2, ',') ?>]
           },
     
     
        yAxis: {
            title: {
                text: 'Prix au litre'
                   },
               labels: {
                formatter: function () {
                    return this.value + '€';
                }
            }
     
        },
     
     
        tooltip: {
            crosshairs: true,
            shared: true
        },
     
      plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
     
     
     series: [{
            name: 'test',
            data: [<?php echo join($array_ppl, ',') ?>]
     
    }]  
     
     
    });
    		</script>
    	</body>
    </html>
    Si tu as mieux à proposer, je suis preneur.
    Encore un immense merci.
    Bien à toi.

    Eric

  7. #7
    Membre averti
    Homme Profil pro
    Employé
    Inscrit en
    Octobre 2013
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Employé
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2013
    Messages : 51
    Par défaut Et en français ?
    Tout est ok sauf...

    Pour avoir la date au format français dans le tooltip ? pas trouvé.
    J ai bien tenté :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    tooltip: {
            //crosshairs: true,
            shared: true,
            xDateFormat: '%d-%m-%Y',
            valueSuffix: ' € / l'
        },
    comme dans la doc, mais non

  8. #8
    Modérateur
    Avatar de grunk
    Homme Profil pro
    Lead dév - Architecte
    Inscrit en
    Août 2003
    Messages
    6 693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Lead dév - Architecte
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2003
    Messages : 6 693
    Par défaut
    Le plus simple est probablement de la convertir coté PHP
    Pry Framework php5 | N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  9. #9
    Membre averti
    Homme Profil pro
    Employé
    Inscrit en
    Octobre 2013
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Employé
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2013
    Messages : 51
    Par défaut Juste un merci
    Un très grand merci à toi d'avoir prit du temps.
    Vraiment.

    Très amicalement.

    Eric

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 06/11/2017, 12h48
  2. array php json highcharts
    Par Invité dans le forum Langage
    Réponses: 6
    Dernier message: 21/05/2015, 17h26
  3. Javascript, php avec highchart et les variables
    Par Guizi55 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 21/04/2014, 21h47
  4. Quel est le meilleur script PHP de portail (CMS) ?
    Par Lana.Bauer dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 187
    Dernier message: 18/10/2012, 07h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo