'Google chart: swap axis and date presentation on axis

I have two problem with Google Chart. My data is imported from MySQL via JSON, my code is below. First: I don't know how to swap x and y axis? Second:I'm trying to present on X axis date (date and time). To be honest it is one of my first step with Java. Thank for helping.

My databese example:

id      sensor  value1  reading_time    
581     SENS_1  96      2022-02-10 18:37:14
580     SENS_1  96      2022-02-10 18:27:12
579     SENS_1  95      2022-02-10 18:17:12
578     SENS_1  95      2022-02-10 18:07:11

My code (here I using ID because when I try date, chart does not generate):

    <!DOCTYPE html>

<?php
  $host = "localhost";               // host = localhost because database hosted on the same server where PHP files are hosted
  $dbname = "4tr4r3_esp_01";              // Database name
  $username = "4tr4r3_esp_01";      // Database username
  $password = "dasidsa8das9yd";         // Database password


// PHP Google Charts
$db_connection = mysqli_connect($host, $username, $password, $dbname);
$sql = "SELECT  value1, id FROM SensorData";
// Check if connection established successfully
if ($db_connection->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

else { echo "Connected to mysql database. <br>"; }

?>



 <html>
  <head>
  <meta charset="UTF-8">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data_val = google.visualization.arrayToDataTable([
        ['value1', 'id'],
        <?php
        $query_result = mysqli_query($db_connection,$sql);
        while($row_val = mysqli_fetch_array($query_result))
        {
        echo "['".$row_val['value1']."',".$row_val['id']."],";
        }
        ?>
        
        ]);


        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom',
          }
        };
        
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data_val, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

I tried something like this:

    function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Dato');
  data.addColumn('number', 'Anbefalet pris');

without success. Thank you in advance for your help!

mysqljsongoogle-chat


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions