Need help with live data chart from database

PHP
1

I’m newbie with codes, trying to replicate https://codepen.io/pen/ this line chart but instead of random data, want to put in my data from database, which is contantly updating new values in.
here is my code it prints the graph but it doesn’t update it, when I refresh it refreshes with new values added. can anyone help with this…I spend hours but can’t figure out.

<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/8.0/highcharts.js"></script>
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<style>
body {
background: black
color : aliceblue;
}
#main {
    background : 808080;
    margin : 25px auto;

}
h1{
    margin : 200px auto;
    text-align :center;
    font-family : "Varela Round";
    font : 24pt;
    color:black;
}
body {
    min-width: 300px;
    max-width: 1800px;
    height: 600px;
    margin: auto;
    }
    h2 {
    font-family: "Crete Round";
    font-size: 2.5rem;
    text-align: center;
    color: black;
    }
    .container1 {
        height: auto;
        width:  600px;
        margin-left: 3px;
        margin-right: auto;
        border: 2px solid black;
        border-radius: 5px;
    }
    .buttonesection {
        height: auto;
        width:  600px;
        border-radius: 5px;
    }
    .container {
        border: black;
        display: flex;
        width: auto;
        height: auto;
      }
      h3{
        margin : 50px;
      }
      .button {
        border: 3px solid black;
        color: white;
        height: 60px;
        width: 110px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 5px 3px;
        cursor: pointer;
        border-radius: 8px;
        }

        .disabled {
         opacity: 0.6;
        }   
        .space {
        background: white;

        text-align :center;
        height: 52px;
        width: 100px;
        font-size: 15px;
        margin-right:10px;
        margin-left:15px;

}
        .notice {
        background: transparent;
        color: black;
        height: 50px;
        width: 80px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 24px;
        border-radius: 8px;
        margin-left: 5px;
        }

.button1  {background-color:white;color: black;border:2px solid #4CAF50;}
.button1:hover{background-color:#4CAF50; color: white; }
.button2 {background-color: white; color: black; border: 2px solid #008CBA;}
.button2:hover {background-color: #008CBA;color: white;}
.button3 {background-color: white; color: black; border: 2px solid #f44336;}
.button3:hover {background-color: #f44336;color: white;}


</style>
</head>
<body>
<?php 
//index.php
$connect = mysqli_connect("localhost", "dbuser", "pass", "dbname");
$query = "SELECT id, sensor1, sensor2, sensor3, reading_time FROM SensorData";
$result = mysqli_query($connect, $query);

while($row = mysqli_fetch_array($result))
{
 $Sensor1[] = $row['sensor1'];
  $Sensor2[] = $row['sensor2'];
  $Time[] = $row['reading_time'];
 $data[] = "$Time, $Sensor1";
 
}
  echo json_encode($data, $Sensor1, $Sensor2, $Time);  
?>


    <h2>MPI Molds Monitoring </h2>
    <div id="container"></div>
    <figure class="highcharts">
  <div id="container"></div>
    <button id ="preheating1" onclick="startpreheat1('preheating1','cooling1', 'heating1')" class="button button1">Pre-Heating</button>
    <button id = "cooling1" onclick="startcooling1('cooling1','preheating1','heating1')" class="button button2">Cooling</button>
    <button id = "heating1" onclick="startheating1('heating1','preheating1','cooling1')" class="button button3">Heating</button>
</figure>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
<script>
Highcharts.setOptions({
    time: {
        timezone: 'Europe/London'
    }
});

var container = new Highcharts.chart( {
  chart: { 
     renderTo:'container',
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,

  },
events: { 
          load: function() {
      	var chart = this;
        
        setInterval(function() {
          $.ajax({
            type: "GET",
            url: "https://www.mpimold.000webhostapp.com/test.php",
            success: function(data) {
              chart.series[0].addPoint([data.x, data.y], true);
            }
          });
        }, 500);
      }
}  , 

  title: {
    text: 'Live random data'
  },


  xAxis: {
    type: 'datetime',
    labels: {
    format: '{value:%H:%M:%S}',

    }
      
  },

  yAxis: {
    title: {
      text: 'Value'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },


  legend: {
    enabled: false
  },

  exporting: {
    enabled: false
  },

  series: [{
    name: 'Sensor1',
    data: [<?php echo join($Sensor1, ',')?>]
    
  }]
});
</script>
</html>
2

Well, lets start with some refinement.

If you’re only going to use the values sensor1, sensor2, and reading_time, don’t select id or sensor3 in your query.

“My graph doesn’t update”
Well, lets look at the update function.

This code reads as "Every half a second, get the contents of the URL listed; that URL is expected to return a single JSON object, which contains an x coordinate, and a y coordinate. It then adds that point to the chart.

Taking the URL from the code into my browser says that page doesnt exist. So the fetching will never happen.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.