storing date in array not working for me

23 views
Skip to first unread message

Nate Stringham

unread,
May 6, 2019, 2:33:03 AM5/6/19
to Google Visualization API
I am new to web programming and my chart was working fine until I decided to add a date to it. I have attached a working and broken code if someone could please help me make the broken one work

Broken
<html>
   <head>
      <title>WTMC Aquaponics</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart','line']});  
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 100%; height: 100%; margin: 0 auto">
      </div>
      <script language = "JavaScript">
  window.rowsToBeAdded = [
               [new Date(1000000000), 0, 0,  0, 0, 0, 0, 0, 0],
               [new Date(1000000000), 0, 0,  0, 0, 0, 0, 0, 0]
            ]
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'Date and Time');
            data.addColumn('number', 'Ammonia Concentration');
            data.addColumn('number', 'pH');
            data.addColumn('number', 'Water Temperature');
            data.addColumn('number', 'Total Disolved Soilds');
            data.addColumn('number', 'Nitrate Concentration');
            data.addColumn('number', 'Disolved Oxygen');
            data.addColumn('number', 'Light');
data.addColumn('number', 'Air Temperature');
            data.addRows(window.rowsToBeAdded);
var materialOptions = {
chart: {
title: 'Sensor Data'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'ppm'},
1: {axis: 'pH'},
2: {axis: 'Temperature'},
3: {axis: 'ppm'},
4: {axis: 'ppm'},
5: {axis: 'ppm'},
6: {axis: 'lux'},
7: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
ppm: {label: 'Concentration (ppm)'},
Temperature: {label: 'Temperature (°F)'},
lux: {label: 'Illuminance (lux)'},
pH: {label: 'Acididity (pH)'}
}
}
};

            // Instantiate and draw the chart.
            var chart = new google.charts.Line(document.getElementById('container'));
            chart.draw(data, materialOptions);
         }
         google.charts.setOnLoadCallback(drawChart);
window.onresize = drawChart;
      </script>
  
  <!-- The core Firebase JS SDK is always required and must be listed first -->

  <!-- TODO: Add SDKs for Firebase products that you want to use
  

  <script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDcBvUG8_Rf0eE0c0yHA_vcphsVZnCIg5Q",
projectId: "wtmcaquaponics",
storageBucket: "wtmcaquaponics.appspot.com",
messagingSenderId: "998379910730",
appId: "1:998379910730:web:42950080e52e6d19"
};
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  // Get a reference to the database service
  var database = firebase.database();
  var ref = database.ref('SensorData');
  ref.on('value', gotData, errData);
  
  function gotData(data){
    //console.log(data.val());
var sensorData = data.val();
var entries = Object.entries(sensorData);
console.log(entries);
window.rowsToBeAdded = new Array(entries.length);
for(i=0; i<entries.length; i++){
var entry = entries[i]
window.rowsToBeAdded[i]= new Array(9);
window.rowsToBeAdded[i][0] = new Date(entry[1].UnixTime);
window.rowsToBeAdded[i][1] = entry[1].Ammonia;
window.rowsToBeAdded[i][2] = entry[1].pH;
window.rowsToBeAdded[i][3] = entry[1].WaterTemperature;
window.rowsToBeAdded[i][4] = entry[1].TDS;
window.rowsToBeAdded[i][5] = entry[1].Nitrate;
window.rowsToBeAdded[i][6] = entry[1].Oxygen;
window.rowsToBeAdded[i][7] = entry[1].Light;
window.rowsToBeAdded[i][8] = entry[1].AirTemperature;
//console.log(UnixTime,Ammonia,pH)
}
console.log(window.rowsToBeAdded);
drawChart();
  }
  
  function errData(err){
console.log('Error');
console.log(err);
  }
  
  </script>
   </body>
</html>





Working
<html>
   <head>
      <title>WTMC Aquaponics</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart','line']});  
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 100%; height: 100%; margin: 0 auto">
      </div>
      <script language = "JavaScript">
  window.rowsToBeAdded = [
               [new Date(1000000000), 0, 0,  0, 0, 0, 0, 0, 0],
               [new Date(1000000000), 0, 0,  0, 0, 0, 0, 0, 0]
            ]
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Date and Time');
            data.addColumn('number', 'Ammonia Concentration');
            data.addColumn('number', 'pH');
            data.addColumn('number', 'Water Temperature');
            data.addColumn('number', 'Total Disolved Soilds');
            data.addColumn('number', 'Nitrate Concentration');
            data.addColumn('number', 'Disolved Oxygen');
            data.addColumn('number', 'Light');
data.addColumn('number', 'Air Temperature');
            data.addRows(window.rowsToBeAdded);
var materialOptions = {
chart: {
title: 'Sensor Data'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'ppm'},
1: {axis: 'pH'},
2: {axis: 'Temperature'},
3: {axis: 'ppm'},
4: {axis: 'ppm'},
5: {axis: 'ppm'},
6: {axis: 'lux'},
7: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
ppm: {label: 'Concentration (ppm)'},
Temperature: {label: 'Temperature (°F)'},
lux: {label: 'Illuminance (lux)'},
pH: {label: 'Acididity (pH)'}
}
}
};

            // Instantiate and draw the chart.
            var chart = new google.charts.Line(document.getElementById('container'));
            chart.draw(data, materialOptions);
         }
         google.charts.setOnLoadCallback(drawChart);
window.onresize = drawChart;
      </script>
  
  <!-- The core Firebase JS SDK is always required and must be listed first -->

  <!-- TODO: Add SDKs for Firebase products that you want to use
  

  <script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDcBvUG8_Rf0eE0c0yHA_vcphsVZnCIg5Q",
projectId: "wtmcaquaponics",
storageBucket: "wtmcaquaponics.appspot.com",
messagingSenderId: "998379910730",
appId: "1:998379910730:web:42950080e52e6d19"
};
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  // Get a reference to the database service
  var database = firebase.database();
  var ref = database.ref('SensorData');
  ref.on('value', gotData, errData);
  
  function gotData(data){
    //console.log(data.val());
var sensorData = data.val();
var entries = Object.entries(sensorData);
console.log(entries);
window.rowsToBeAdded = new Array(entries.length);
for(i=0; i<entries.length; i++){
var entry = entries[i]
window.rowsToBeAdded[i]= new Array(9);
window.rowsToBeAdded[i][0] = entry[1].UnixTime;
window.rowsToBeAdded[i][1] = entry[1].Ammonia;
window.rowsToBeAdded[i][2] = entry[1].pH;
window.rowsToBeAdded[i][3] = entry[1].WaterTemperature;
window.rowsToBeAdded[i][4] = entry[1].TDS;
window.rowsToBeAdded[i][5] = entry[1].Nitrate;
window.rowsToBeAdded[i][6] = entry[1].Oxygen;
window.rowsToBeAdded[i][7] = entry[1].Light;
window.rowsToBeAdded[i][8] = entry[1].AirTemperature;
//console.log(UnixTime,Ammonia,pH)
}
console.log(window.rowsToBeAdded);
drawChart();
  }
  
  function errData(err){
console.log('Error');
console.log(err);
  }
  
  </script>
   </body>
</html>



Reply all
Reply to author
Forward
0 new messages