Courbe température piscine

                Apexcharts


<!DOCTYPE html> <html lang="fr"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" /> <title>Zoomable TimeSeries</title> <link href="graphe/assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 80%; margin: 35px auto; } </style> </head> <body> <?php $TabT=""; // Lecture du fichier Ttab... $Ttab = fopen('Ttab.txt', 'r'); fseek($Ttab , 0); while (!feof($Ttab)) { $TabT .=fgets($Ttab, 4096)."\n"; // . concaténer les chaînes.... } fclose($Ttab); $Ch = file_get_contents('Consigne_H.txt'); $Cb = file_get_contents('Consigne_B.txt'); ?> <h2>Courbe température piscine</h2> <div id="chart"> </div> <script src="graphe/dist/apexcharts.js"></script> <script> var temperature=[<?php echo $TabT; ?>] </script> <script> var options = { annotations: { yaxis: [ { // Annotation horizontale pour signaler Ch y: <?php echo $Ch; ?>, borderColor: "#fb2f03", label: { borderColor: "#fb2f03", style: { color: "#fff", background: "#fb2f03" }, text: "Ch" } // fin annotation Ch }, { // Annotation horizontale pour signaler Cb y: <?php echo $Cb; ?>, borderColor: "#037ffb", label: { borderColor: "#037ffb", style: { color: "#fff", background: "#037ffb" }, text: "Cb" } // fin annotation Cb }, ] }, // fin annotations */ chart: { type: 'area', stacked: false, height: 350, zoom: { type: 'x', enabled: true }, toolbar: { autoSelected: 'zoom' } }, plotOptions: { line: { curve: 'smooth', } }, dataLabels: { enabled: false }, series: [{ name: 'Temperature Piscine', data: temperature }], markers: { size: 0, style: 'full', }, //colors: ['#0165fc'], title: { text: 'Temperature', align: 'left' }, fill: { gradient: { enabled: true, shadeIntensity: 1, inverseColors: false, opacityFrom: 0.35, opacityTo: 0, stops: [0, 70, 80, 100] }, }, yaxis: { min: 15, max: 30, title: { text: 'T en C' }, }, xaxis: { type: 'datetime', }, tooltip: { shared: false, }, } // fin de options var chart = new ApexCharts( document.querySelector("#chart"), options ); chart.render(); </script> </body> </html>