Projets 2018

Courbe température piscine :

<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
<link href="../styles/style2.css" rel="stylesheet" type="text/css" />
<title>Code graphe 1</title>
</head>
 
<link href="../styles/notepad_php.css" rel="stylesheet" type="text/css" />
<link href="../PH/graphe/assets/styles.css" rel="stylesheet" />
<link href="../styles/style2.css" rel="stylesheet" type="text/css" />
  <style>
    #Tpiscine  {
      max-width: 80%;
      margin: 35px auto;
    }
  </style>
 <body style="font-family: Arial;border: 0 none;">
    <?php 
      //bts2m.free.fr/2018/sql_graphe1.php
    $link = mysql_connect('sql.free.fr','tpil.projet','motDePasse');
    if(!$link) {echo"Impossible de se connecter au serveur".mysql_error();exit;}
    
    //--Connexion à la table piscine1
    mysql_select_db(piscine,$link);
        
    $requete="SELECT COUNT(*) FROM piscine ";       // Requete 1 ; compter les lignes
        $reponse=mysql_query($requete, $link);          // Execution de la requete
        $nbligne=mysql_result($reponse,0);              // valable pour un resultat unique
        // echo '<p> Count  = '.$nbligne.' mesures</p>';
        
    $requete= "SELECT * FROM piscine ORDER BY id"; // Requete 2 : explorer piscine1 dans l'ordre
        $reponse=mysql_query($requete, $link);
        if ($nbligne>500) {mysql_data_seek($reponse,$nbligne-500);}// Placer pointeur 500 lignes avant la fin
            else {mysql_data_seek($reponse,0);}      
        while($ligne=mysql_fetch_row($reponse))         // lecture d'une ligne (ou une entrée) de la base de données puis auto incrémentation
            {   $dateUnix= 1000*strtotime ($ligne[1]);
                $TableTpiscine.='['.$dateUnix.','.$ligne[2].'],'; // Pour tracer graphe T(date)
            }       
        // echo '<p>'.$TableTpiscine.'</p>';    
    mysql_close($link);         
        ?>
  </body>
   
 <body>
        <h2>Courbe température piscine :</h2>
        <div id="Tpiscine"> </div> 

 <script src="../PH/graphe/dist/apexcharts.js"></script>
  
  <script>
          
            var TableTpiscine=[<?php echo $TableTpiscine ?>]
            var options = {
      chart: {
        type: 'area',
        stacked: false,
        height: 350,
        zoom: {
          type: 'x',
          enabled: true
        },
        toolbar: {
          autoSelected: 'zoom'
        }
      },
      plotOptions: {
        line: {
          curve: 'smooth',
        }
      },
      dataLabels: {
        enabled: false
      },
      series: [{
        name: 'T piscine',
        data: TableTpiscine
      }],
      markers: {
        size: 0,
        style: 'full',
      },
      //colors: ['#0165fc'],
      title: {
        text: 'Température de la piscine',
        align: 'left'
      },
      fill: {
        gradient: {
          enabled: true,
          shadeIntensity: 1,
          inverseColors: false,
          opacityFrom: 0.5,
          opacityTo: 0,
          stops: [0, 90, 100]
        },
      },
      yaxis: {
        min: 15,
        max: 30,
        title: {
          text: 'T piscine'
        },
      },
      xaxis: {
        type: 'datetime',
      },

    }

    var Tpiscine = new ApexCharts(
      document.querySelector("#Tpiscine"),
      options
    );
    Tpiscine.render();
  </script> 
 
 </body>