Jump to content

JS/PHP/Google Chart Help


RADaugherty

Recommended Posts

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 by RADaugherty
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.