Firebase Google Chart
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//===============================================================================================================
var firebaseConfig = {
apiKey: "AIzaSyDzsxMsTq4gkuI2in",
authDomain: "wt-vstr4.firebaseapp.com",
databaseURL: "https://wt-vstr4.firebaseio.com",
projectId: "wt-vstr4",
storageBucket: "wt.appspot.com",
messagingSenderId: "109057097119",
appId: "1:109057097119:web:53d9e3147ae545965591aa",
measurementId: "G-JJHYS3TN6D"
};
var rtdb = firebase.initializeApp(firebaseConfig);
rtdb.database().ref('/TMR03/2021/2/1').once('value').then(function(snapshot) {
temps = snapshot.val();
console.log(snapshot.val());
google.charts.setOnLoadCallback(drawChart(temps));
});
function drawChart(temps) {
var array = $.map(temps, function(value, index) {return [value]; });
var data = new google.visualization.DataTable();
data.addColumn('string', 'Tm');
data.addColumn('number', 'Rh');
data.addColumn('number', 'Rt');
data.addColumn('number', 'T1');
data.addColumn('number', 'T2');
var output = [];
for (var i = 0; i < array.length; i++) {
var item = array[i];
output.push([
item.Tm,
parseFloat(item.Rh),
parseFloat(item.Rt),
parseFloat(item.T1),
parseFloat(item.T2)
]);
}
data.addRows(output);
var options = {
chart: {
title: 'title',
subtitle: 'subtitle'
},
width: 800,
height:400
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.charts.load('current', {'packages': ['corechart', 'line']
});
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//===============================================================================================================
var firebaseConfig = {
apiKey: "AIzaSyDzsxMsTq4gkuI2in",
authDomain: "wt-vstr4.firebaseapp.com",
databaseURL: "https://wt-vstr4.firebaseio.com",
projectId: "wt-vstr4",
storageBucket: "wt.appspot.com",
messagingSenderId: "109057097119",
appId: "1:109057097119:web:53d9e3147ae545965591aa",
measurementId: "G-JJHYS3TN6D"
};
var rtdb = firebase.initializeApp(firebaseConfig);
rtdb.database().ref('/TMR03/2021/2/1').once('value').then(function(snapshot) {
temps = snapshot.val();
console.log(snapshot.val());
google.charts.setOnLoadCallback(drawChart(temps));
});
function drawChart(temps) {
var array = $.map(temps, function(value, index) {return [value]; });
var data = new google.visualization.DataTable();
data.addColumn('string', 'Tm');
data.addColumn('number', 'Rh');
data.addColumn('number', 'Rt');
data.addColumn('number', 'T1');
data.addColumn('number', 'T2');
var output = [];
for (var i = 0; i < array.length; i++) {
var item = array[i];
output.push([
item.Tm,
parseFloat(item.Rh),
parseFloat(item.Rt),
parseFloat(item.T1),
parseFloat(item.T2)
]);
}
data.addRows(output);
var options = {
chart: {
title: 'title',
subtitle: 'subtitle'
},
width: 800,
height:400
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.charts.load('current', {'packages': ['corechart', 'line']
});
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>
ความคิดเห็น
แสดงความคิดเห็น