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
-->
<script
src="https://www.gstatic.com/firebasejs/5.11.1/firebase-app.js";></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script
src="https://www.gstatic.com/firebasejs/5.11.1/firebase-database.js";></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDcBvUG8_Rf0eE0c0yHA_vcphsVZnCIg5Q",
authDomain: "wtmcaquaponics.firebaseapp.com",
databaseURL: "https://wtmcaquaponics.firebaseio.com";,
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();
// copied from https://www.youtube.com/watch?v=NcewaPfFR6Y
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
-->
<script
src="https://www.gstatic.com/firebasejs/5.11.1/firebase-app.js";></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script
src="https://www.gstatic.com/firebasejs/5.11.1/firebase-database.js";></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDcBvUG8_Rf0eE0c0yHA_vcphsVZnCIg5Q",
authDomain: "wtmcaquaponics.firebaseapp.com",
databaseURL: "https://wtmcaquaponics.firebaseio.com";,
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();
// copied from https://www.youtube.com/watch?v=NcewaPfFR6Y
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>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/231a22b7-5906-4fca-8436-a6ab17fbe5cb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
