JS/PHP/Google Chart Help

RADaugherty · April 11, 2022

So I've got some graphs that I am pulling data down from a MySQL server and it was all seemingly working last night, could see Data/Graphs but today it isn't.

One thing I changed was I installed an SSL Cert on the website but that shouldn't break the graphs... I think?

This is my webpage code.

<html>
    
    
    <style>
              .parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem 1rem;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
  width: 700px;
}
    </style>
    
    <head>

    <!-- javascript -->
    <script type="text/javascript" src="https://www.radproducts.me/WeatherData/js/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.radproducts.me/WeatherData/js/Chart.min.js"></script>
    <script type="text/javascript" src="https://www.radproducts.me/WeatherData/js/tempgraph.js"></script>
    <script type="text/javascript" src="https://www.radproducts.me/WeatherData/js/humgraph.js"></script>
    <script type="text/javascript" src="https://www.radproducts.me/WeatherData/js/prsgraph.js"></script>
    <script type="text/javascript" src="https://www.radproducts.me/WeatherData/js/wspdgraph.js"></script>
  
</head>

<body>
    
    <center>
    <h1>Graphs</h1>
    <div class='parent'>
  <div class='child'><canvas id="tempgraph"></canvas></div>
  <div class='child'><canvas id="humgraph"></canvas></div>
  <br><br>
  <div class='child'><canvas id="prsgraph"></canvas></div>
  <div class='child'><canvas id="wspdgraph"></canvas></div>
</div>



</center>
</body>
</html>

This code grabs the MySQL Data and outputs it to JSON for the graph to read.

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', '*****');
define('DB_USERNAME', '*****');
define('DB_PASSWORD', '******');
define('DB_NAME', '******');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
  die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT temp,time FROM currentWeather");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
  $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);

This code takes the JSON readout and puts it into a graph for me to use.

$(document).ready(function(){
  $.ajax({
    url : "https://radproducts.me/WeatherData/getTempData.php",
    type : "GET",
    success : function(data){
      console.log(data);

      var temps = [];
      var times = [];


      for(var i in data) {
        times.push(data[i].time);
        temps.push(data[i].temp);
      }

      var chartdata = {
        labels: times,
        datasets: [
          {
            label: "times",
            fill: false,
            lineTension: 1,
            backgroundColor: "rgba(59, 89, 152, 0.75)",
            borderColor: "rgba(59, 89, 152, 1)",
            pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
            pointHoverBorderColor: "rgba(59, 89, 152, 1)",
            data: times
          },
          {
            label: "temps",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(29, 202, 255, 0.75)",
            borderColor: "rgba(29, 202, 255, 1)",
            pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
            pointHoverBorderColor: "rgba(29, 202, 255, 1)",
            data: temps
          }
        ]
      };

      var ctx = $("#tempgraph");

      var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error : function(data) {

    }
  });
});

js folder structure is

Chart.min.js
jquery.min.js
humgraph.js
prsgraph.js
tempgraph.js
wspdgraph.js

Any thoughts??

Edited April 11, 2022 by RADaugherty

requinix · April 11, 2022

14 minutes ago, RADaugherty said:

So I've got some graphs that I am pulling data down from a MySQL server and it was all seemingly working last night, could see Data/Graphs but today it isn't.

One thing I changed was I installed an SSL Cert on the website but that shouldn't break the graphs... I think?

Stuff doesn't break randomly. If the certificate is the problem then your browser should be logging some errors about it. If not, something else probably changed, and the browser will probably have some errors about it.

RADaugherty · April 11, 2022

So I was able to resolve this, it was indeed the SSL that broke it. Inside the graph.js's the link was to

https://www.radproducts.com/WeatherData/getTempData.php

But switching to

url : "../WeatherData/getHumData.php",

Was the fix.

gizmola · April 11, 2022

Is that your actual html page? Where is your doctype?

Like Requinix stated, the 1st thing you should be doing is using your browser development tools to investigate. In particular the javascript console, network tab, and perhaps the sources, in order to debug your javascript if some obvious problem doesn't jump out at you before you get to that point. Since you rely on ajax, the network tab is where you can actually debug the data loading.

gizmola · April 11, 2022

Do you realize that the SSL configuration for radproducts.com is incorrect/broken?

Sign In

JS/PHP/Google Chart Help

Recommended Posts

RADaugherty

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

RADaugherty

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information