Wykres z danych z bazy phpMyAdmin - problem z tablicą

0

Witam wszystkich,
proszę o wsparcie. Opiszę w skrócie swój projekt.
Arduino zbiera dane z kilku czujników temperatury i zapisuje je w bazie danych, na serwerze.
Dane te pobieram z bazy i wyświetlam w formie tabelarycznej (kod w pliku)
Chciałbym również te dane przedstawić w formie graficznej. Nie potrafię zbudować tablicy, nie znam składni. Nie mogę znaleźć wskazówek w internecie.
W tej chwili wyświetla się przykładowy punkt ale chciałbym wyświetlić wartości od temper0 do temper5 w zależności od timeStamp

Tak to wygląda teraz
https://files.fm/u/x6b4gg8f

Z góry dziękuję za wsparcie

oto kod pliku:

<head>
    <title>Arduino WWW</title>
<?php
	include("connect2.php");
	$link=Connection();
	$result=mysql_query("SELECT * FROM `ruchLog` ORDER BY `timeStamp` DESC LIMIT 3",$link);
?>
        <h1>Czujnik temperatury</h1>
        <table class="table table-hover">
		<thead>
		<tr>
	    <td><b> Data odczytu </b></td>
        <td><b> Piec Wy </b></td>
        <td><b> CW We </b></td>
		<td><b> CW Wy </b></td>
		<td><b> Dom </b></td>
		<td><b> Gab1 </b></td>
		<td><b> Gab2 </b></td>
		</tr>
		</thead>
<?php
		  if($result!==FALSE)
		  {
		    while($row = mysql_fetch_array($result))
			{
				printf("<tr>
					<td> %s</td>
					<td> %s </td>
					<td> %s </td>
					<td> %s </td>
					<td> %s </td>
					<td> %s </td>
					<td> %s </td>
					</tr>",
					$row["timeStamp"],
					$row["temper0"],
					$row["temper1"],
					$row["temper2"],
					$row["temper3"],
					$row["temper4"],
					$row["temper5"]
				);
		    }
		     mysql_free_result($result);
		     mysql_close();
		  }
?>
   </table>
<!-- Wykres wlasny z php - start -->

<?php
     $dataPoints = array 
	(array (timeStamp, "y" => 20)
	/* 	array("x" => 220, "y" => temper1),
     	array("x" => 230, "y" => 20.35),
    	array("x" => 1451586600000, "y" => 2140000) */
     );
?>
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer", {
    	animationEnabled: true,
    	title:{
    		text: "Rozkład temperatury w czasie"
    	},
			data: [
			{
				type: "spline",
    		dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    	}]
    });

    chart.render();

    }
    </script>
    </head>
    <body>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>

<!-- Wykres wlasny z php - koniec -->
  </body>
</html>
0

"(...) nie znam składni (...)" ...
Czego składni nie znasz ?

0

nie znam składni jak się dobrać do danych z bazy i wrzucić je do tablicy aby następnie wyświetlić na wykresie...

pozwolę sobie opisać jak rozumiem działanie kodu... jeśli gdzieś popełnię błąd w rozumowaniu to proszę o wskazówkę, tym sposobem może uzyskam oczekiwany efekt

Tutaj łączę się do bazy i jako $result pobieram 3 ostatnie wiersze z tabeli

<head>
    <title>Arduino WWW</title>
<?php
    include("connect2.php");
    $link=Connection();
    $result=mysql_query("SELECT * FROM `ruchLog` ORDER BY `timeStamp` DESC LIMIT 3",$link);
?>

Fragment html budujący tabele

        <h1>Czujnik temperatury</h1>
        <table class="table table-hover">
        <thead>
        <tr>
        <td><b> Data odczytu </b></td>
        <td><b> Piec Wy </b></td>
        <td><b> CW We </b></td>
        <td><b> CW Wy </b></td>
        <td><b> Dom </b></td>
        <td><b> Gab1 </b></td>
        <td><b> Gab2 </b></td>
        </tr>
        </thead>

Tutaj wyświetlam pobrane dane w tabeli

<?php
          if($result!==FALSE)
          {
            while($row = mysql_fetch_array($result))
            {
                printf("<tr>
                    <td> %s</td>
                    <td> %s </td>
                    <td> %s </td>
                    <td> %s </td>
                    <td> %s </td>
                    <td> %s </td>
                    <td> %s </td>
                    </tr>",
                    $row["timeStamp"],
                    $row["temper0"],
                    $row["temper1"],
                    $row["temper2"],
                    $row["temper3"],
                    $row["temper4"],
                    $row["temper5"]
                );
            }
             mysql_free_result($result);
             mysql_close();
          }
?>

Tutaj chciałbym ponownie użyć tych danych... no może nie ostatnie 3 ale więcej umieścić w tablicy
A może powinienem się ponownie połączyć do bazy. W tym miejscu się gubię... array ?

   </table>
<!-- Wykres wlasny z php - start -->
<?php
     $dataPoints = array 
    (array (timeStamp, "y" => 20)
    /*  array("x" => 220, "y" => temper1),
        array("x" => 230, "y" => 20.35),
        array("x" => 1451586600000, "y" => 2140000) */
     );
?>

Tutaj chcę wyświetlić te dane

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        title:{
            text: "Rozkład temperatury w czasie"
        },
            data: [
            {
                type: "spline",
            dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
        }]
    });

    chart.render();

    }
    </script>
    </head>
    <body>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>

<!-- Wykres wlasny z php - koniec -->
  </body>
</html>

Tak to widzę... proszę o wskazówkę

0

To raczej nie kwestia znajomości składni a narzędzi - to jednak różnica.
Dane wyciągasz za pomocą SQL. Teraz przepisz je do tablicy gdzie np. kluczem jest "podstawa czasowa" dla wykresu ( rozumiem, że oś X to będzie czasa Y temperatura ).

W kolejnym kroku jak będziesz miał dane w tablicy możesz na jej podstawie narysować wykres. Tutaj są różne sposoby do wyboru ja bym proponował poczytać o https://www.w3schools.com/tags/canvas_lineto.asp ewentualnie jak chcesz uniknąć javascript to możesz wygenerować obrazek SVG https://www.w3schools.com/graphics/svg_path.asp
Oczywiście są też inne metody np. https://www.php.net/manual/en/function.imageline.php
Sam musisz poczytać i wybrać co Co najbardziej odpowiada.

0

zgadza się, brakuje mi znajomości narzędzi ;(
nie odsyłaj mnie do studiowania metod.

wybrałem już metodę, mam szablon wykresu. nie potrafię jedynie zaczytać punktów z bazy i umieścić ich na wykresie.
i tutaj proszę o wsparcie osób, które to potrafią i które patrząc na kod widzą jak to zrobić.

Jak przenieść dane

$row["timeStamp"], $row["temper0"], $row["temper1"], $row["temper2"], $row["temper3"], $row["temper4"], $row["temper5"]

do

$dataPoints = array ............

aby na osi x był

$row["timeStamp"]

a reszta na osi y

0

Napisałem Ci odpowiedź ale zapytam ,z czym konkretnie masz problem?
Masz dane z MySQL i wystarczy je teraz pogrupować po okresie i wyświetlić. Czy mam rozumieć, że nie umiesz ich pogrupować po okresie?

0

na to wygląda, że nie potrafię ;(
nie jestem programistą. sklejam z różnych fragmentów swój projekt i chcę uzyskać jego końcowy efekt.

jeśli twierdzisz, że wystarczy pogrupować po okresie i wyświetlić, i jeśli nie stwarza Ci to problemu to napisz jak to zrobić a ja to zrobię i przetestuję.
jeśli zadziała to Ci pięknie podziękuję :)

0

Mniej więcej tak to może wyglądać. Kod może nie działać bo nie mam twojej bazy i nie chce mi się jej symulować. Jednak wystarczy przeanalizować wyciągnąć wnioski i napisać po swojemu.

Dokładne informacje o składni dla modułu wykresów: https://canvasjs.com/javascript-charts/multi-series-chart/

<?php

  //
  // przykładowy wykres w PHP
  //

  function timeStampToChartDate( $ts ){
    $Y = date ( "Y", $ts );
    $M = date ( "M", $ts );
    $D = date ( "D", $ts );
    $out = "new Date({$Y},{$M},{$D})" ;
    return $out;
  }

  $dataPoints = array();

  // tutaj wyciągasz z bazy
  //

  $dataPoints = array();
  (...)
  $result=mysql_query("SELECT * FROM `ruchLog` ORDER BY `timeStamp` DESC LIMIT 3",$link);
  while($row = mysql_fetch_array($result))
  { 
    $ts = timeStampToChartDate ( $row["timeStamp"] ) ;
    $dataPoints[0][] = array ( 'x' => $ts, 'y'=>$row["temper0"] ) ;
    $dataPoints[1][] = array ( 'x' => $ts, 'y'=>$row["temper1"] ) ;
    $dataPoints[2][] = array ( 'x' => $ts, 'y'=>$row["temper2"] ) ;
    $dataPoints[3][] = array ( 'x' => $ts, 'y'=>$row["temper3"] ) ;
    $dataPoints[4][] = array ( 'x' => $ts, 'y'=>$row["temper4"] ) ;
    $dataPoints[5][] = array ( 'x' => $ts, 'y'=>$row["temper5"] ) ;    
  }

  //
  // tutaj tworzysz stuktury dla modułu wykresów
  //


  $seriesData = array();
  foreach ( $dataPoints as $key => $seria )
  {
    $chartData [ 'name' ] = "wykres seria {$key}" ;
    $chartData [ 'type' ] = "spline" ;
    $chartData [ 'yValueFormatString' ] = "#0.## °C" ;
    $chartData [ 'showInLegend' ] = true ;
    $chartData [ 'dataPoints' ] = $dataPoints [ $key ] ;
    $seriesData[] = $chartData;
  }
  $dataJson = json_encode ( $seriesData ) ;  
  
  $out = "
      <!DOCTYPE HTML>
      <html>
      <head>  
      <script>
      window.onload = function () {

      var chart = new CanvasJS.Chart(\"chartContainer\", {
        animationEnabled: true,
        title:{
          text: \"Daily High Temperature at Different Beaches\"
        },
        axisX: {
          valueFormatString: \"DD MMM,YY\"
        },
        axisY: {
          title: \"Temperature (in °C)\",
          includeZero: false,
          suffix: \" °C\"
        },
        legend:{
          cursor: \"pointer\",
          fontSize: 16,
          itemclick: toggleDataSeries
        },
        toolTip:{
          shared: true
        },
        data: [ {$dataJson} ]
      });
      chart.render();

      function toggleDataSeries(e){
        if (typeof(e.dataSeries.visible) === \"undefined\" || e.dataSeries.visible) {
          e.dataSeries.visible = false;
        }
        else{
          e.dataSeries.visible = true;
        }
        chart.render();
      }

      }
      </script>
      </head>
      <body>
      <div id=\"chartContainer\" style=\"height: 370px; width: 100%;\"></div>
      <script src=\"https://canvasjs.com/assets/script/canvasjs.min.js\"></script>
      </body>
      </html>";
  
  
  
  echo $out ;

1 użytkowników online, w tym zalogowanych: 0, gości: 1