Remove unnecessary code and update button styles
This commit is contained in:
newtbot
162
chatgpt nonsense.js
Normal file
162
chatgpt nonsense.js
Normal file
@ -0,0 +1,162 @@
|
||||
const buttons = document.querySelectorAll('.button-container button');
|
||||
const ctx = document.getElementById('dataChart').getContext('2d');
|
||||
|
||||
// Initial dataset (AQI)
|
||||
const initialData = {
|
||||
labels: ['', 'Jan 22 11:00 PM', '', '', 'Jan 23 2:00 AM', '', '', 'Jan 23 5:00 AM', '', '', 'Jan 23 8:00 AM', '',],
|
||||
datasets: [{
|
||||
label: 'AQI',
|
||||
data: [50, 60, 60, 80, 30, 60, 54, 60, 43, 30, 60, 60],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: initialData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'HISTORICAL'
|
||||
},
|
||||
subtitle: {
|
||||
display: true,
|
||||
text: 'Historic air quality graph for Singapore'
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function (tooltipItem, data) {
|
||||
const label = data.labels[tooltipItem.index];
|
||||
return label + ': ' + data.datasets[0].data[tooltipItem.index];
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.7,
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
},
|
||||
maxRotation: 0,
|
||||
minRotation: 0
|
||||
}],
|
||||
yAxes: [{
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Function to update chart data based on the selected button
|
||||
const updateChart = (data) => {
|
||||
chart.data = data;
|
||||
chart.update();
|
||||
};
|
||||
|
||||
// Event listener for button clicks
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
// Implement logic to switch data based on clicked button
|
||||
const buttonId = button.id.toLowerCase();
|
||||
let newData;
|
||||
|
||||
// Example: Switch data based on button clicked
|
||||
switch (buttonId) {
|
||||
case 'aqibutton':
|
||||
newData = {
|
||||
labels: ['', 'Jan 22 11:00 PM', '', '', 'Jan 23 2:00 AM', '', '', 'Jan 23 5:00 AM', '', '', 'Jan 23 8:00 AM', '',],
|
||||
datasets: [{
|
||||
label: 'AQI',
|
||||
data: [50, 60, 60, 80, 30, 60, 54, 60, 43, 30, 60, 60],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
|
||||
break;
|
||||
case 'tempbutton':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'Temperature',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'humbutton':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'Humidity',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'o3button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'O3',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'no2button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'NO2',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'so2button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'SO2',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'cobutton':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'CO',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
|
||||
default:
|
||||
newData = initialData; // Default to initial data (AQI)
|
||||
break;
|
||||
}
|
||||
|
||||
updateChart(newData);
|
||||
});
|
||||
});
|
||||
@ -15,14 +15,16 @@
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around; /* Change this value to adjust the spacing */
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
#download-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px; /* Adjust the margin-top for spacing */
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
@ -1,184 +1,154 @@
|
||||
const buttons = document.querySelectorAll('.button-container button');
|
||||
const ctx = document.getElementById('dataChart').getContext('2d');
|
||||
//getting button from DOM id
|
||||
const buttons = document.querySelectorAll(".button-container button");
|
||||
const queryButton = document.getElementById("querybutton-container");
|
||||
const ctx = document.getElementById("dataChart").getContext("2d");
|
||||
|
||||
// Initial dataset (AQI)
|
||||
const initialData = {
|
||||
labels: ['', 'Jan 22 11:00 PM', '', '', 'Jan 23 2:00 AM', '', '', 'Jan 23 5:00 AM', '', '', 'Jan 23 8:00 AM', '',],
|
||||
datasets: [{
|
||||
label: 'AQI',
|
||||
data: [50, 60, 60, 80, 30, 60, 54, 60, 43, 30, 60, 60],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
$(document).ready(async function () {
|
||||
//https://stackoverflow.com/questions/9045868/javascript-date-getweek
|
||||
Date.prototype.getWeek = function () {
|
||||
var onejan = new Date(this.getFullYear(), 0, 1);
|
||||
var today = new Date(this.getFullYear(), this.getMonth(), this.getDate());
|
||||
var dayOfYear = (today - onejan + 86400000) / 86400000;
|
||||
return Math.ceil(dayOfYear / 7);
|
||||
};
|
||||
let date = new Date();
|
||||
var week = date.getWeek();
|
||||
var today = date.getDate();
|
||||
var month = date.getMonth() + 1; // Adding 1 to get the actual month number
|
||||
var year = date.getFullYear();
|
||||
//year data
|
||||
app.api.get("sensor-data/data?year=" + year, function (error, data) {
|
||||
//console.log(data);
|
||||
});
|
||||
//monthly data
|
||||
app.api.get("sensor-data/data?month=" + month, function (error, data) {
|
||||
//console.log(data);
|
||||
});
|
||||
//weekly data
|
||||
app.api.get(
|
||||
"sensor-data/data?month=" + month + "&week=" + week,
|
||||
function (error, data) {
|
||||
//console.log(data);
|
||||
}
|
||||
);
|
||||
//daily data
|
||||
app.api.get(
|
||||
"sensor-data/data?month=" + month + "&week=" + week + "&day=" + today,
|
||||
function (error, data) {
|
||||
for (let rows of data) {
|
||||
console.log(rows);
|
||||
getDate(rows.CreatedAt);
|
||||
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: initialData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'HISTORICAL'
|
||||
},
|
||||
subtitle: {
|
||||
display: true,
|
||||
text: 'Historic air quality graph for Singapore'
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function (tooltipItem, data) {
|
||||
const label = data.labels[tooltipItem.index];
|
||||
return label + ': ' + data.datasets[0].data[tooltipItem.index];
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.7,
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
},
|
||||
maxRotation: 0,
|
||||
minRotation: 0
|
||||
}],
|
||||
yAxes: [{
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Function to update chart data based on the selected button
|
||||
const updateChart = (data) => {
|
||||
chart.data = data;
|
||||
chart.update();
|
||||
function getDate(date){
|
||||
console.log(date);
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
(async function() {
|
||||
const data = [
|
||||
{ year: 2010, count: 10 },
|
||||
{ year: 2011, count: 20 },
|
||||
{ year: 2012, count: 15 },
|
||||
{ year: 2013, count: 25 },
|
||||
{ year: 2014, count: 22 },
|
||||
{ year: 2015, count: 30 },
|
||||
{ year: 2016, count: 28 },
|
||||
];
|
||||
|
||||
new Chart(
|
||||
document.getElementById('acquisitions'),
|
||||
{
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.map(row => row.year),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Acquisitions by year',
|
||||
data: data.map(row => row.count)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
);
|
||||
})();
|
||||
*/
|
||||
// Initial dataset (AQI)
|
||||
const initialData = {
|
||||
//date and time
|
||||
labels: [ date.map(row => row.CreatedAt)],
|
||||
datasets:[
|
||||
{
|
||||
//data like psi
|
||||
label: "Average PSI Data",
|
||||
data: [],
|
||||
backgroundColor: "green",
|
||||
borderColor: "green",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Event listener for button clicks
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
// Implement logic to switch data based on clicked button
|
||||
const buttonId = button.id.toLowerCase();
|
||||
let newData;
|
||||
//setting chart
|
||||
const chart = new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: initialData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "HISTORICAL",
|
||||
},
|
||||
subtitle: {
|
||||
display: true,
|
||||
text: "Historic air quality graph for Singapore",
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function (tooltipItem, data) {
|
||||
const label = data.labels[tooltipItem.index];
|
||||
return label + ": " + data.datasets[0].data[tooltipItem.index];
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.7,
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
},
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
title: {
|
||||
display: true,
|
||||
text: "Value",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Example: Switch data based on button clicked
|
||||
switch (buttonId) {
|
||||
case 'aqibutton':
|
||||
newData = {
|
||||
labels: ['', 'Jan 22 11:00 PM', '', '', 'Jan 23 2:00 AM', '', '', 'Jan 23 5:00 AM', '', '', 'Jan 23 8:00 AM', '',],
|
||||
datasets: [{
|
||||
label: 'AQI',
|
||||
data: [50, 60, 60, 80, 30, 60, 54, 60, 43, 30, 60, 60],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
queryButton.addEventListener("click", (event) => {
|
||||
const clickedButton = event.target;
|
||||
//console.log(clickedButton.id);
|
||||
|
||||
break;
|
||||
case 'tempbutton':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'Temperature',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'humbutton':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'Humidity',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'pm25button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'PM2.5',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'pm10button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'PM10',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'o3button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'O3',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'no2button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'NO2',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'so2button':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'SO2',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case 'cobutton':
|
||||
newData = {
|
||||
labels: ['Jan 22 11:00 PM', 'Jan 23 12:00 AM', 'Jan 23 1:00 AM', 'Jan 23 2:00 AM'],
|
||||
datasets: [{
|
||||
label: 'CO',
|
||||
data: [25, 30, 40, 35],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
}]
|
||||
};
|
||||
break;
|
||||
//make it switch bar chart based on query button
|
||||
});
|
||||
|
||||
default:
|
||||
newData = initialData; // Default to initial data (AQI)
|
||||
break;
|
||||
}
|
||||
|
||||
updateChart(newData);
|
||||
});
|
||||
});
|
||||
@ -82,8 +82,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="js/search.js"></script>
|
||||
<script src="js/data.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
app.auth.isLoggedIn(function (error, data) {
|
||||
if (!error) {
|
||||
$("#cl-logout-button").show("fast");
|
||||
$("#cl-viewdata-button").show("fast");
|
||||
$("#cl-api-button").show("fast");
|
||||
$("#cl-profile-button").show("fast");
|
||||
$("#cl-login-button").hide("fast");
|
||||
@ -84,6 +85,10 @@
|
||||
</li>
|
||||
<!-- profile button -->
|
||||
<div class="form-inline mt-2 mt-md-0">
|
||||
<a id="cl-viewdata-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/viewdata"
|
||||
style="display: none">
|
||||
<i class="fas fa-sign-out"></i>Data
|
||||
</a>
|
||||
<a id="cl-api-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/api"
|
||||
style="display: none">
|
||||
<i class="fas fa-sign-out"></i> API
|
||||
|
||||
@ -62,6 +62,7 @@
|
||||
$.scope.getUserDetails.update(data);
|
||||
}
|
||||
$("#cl-logout-button").show("fast");
|
||||
$("#cl-viewdata-button").show("fast");
|
||||
$("#cl-api-button").show("fast");
|
||||
$("#cl-profile-button").show("fast");
|
||||
$("#cl-login-button").hide("fast");
|
||||
@ -106,6 +107,11 @@
|
||||
-->
|
||||
<!-- profile button -->
|
||||
<div class="form-inline mt-2 mt-md-0">
|
||||
<a id="cl-viewdata-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/viewdata"
|
||||
style="display: none">
|
||||
<i class="fas fa-sign-out"></i>Data
|
||||
</a>
|
||||
|
||||
<a id="cl-api-button" class="btn btn-outline-info btn-sm my-2 my-sm-0" href="/api"
|
||||
style="display: none">
|
||||
<i class="fas fa-sign-out"></i> API
|
||||
|
||||
@ -1,43 +1,187 @@
|
||||
<%- include('top') %>
|
||||
<link href="css/data.css" rel="stylesheet" />
|
||||
<link href="css/data.css" rel="stylesheet" />
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<br>
|
||||
<br>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script type="text/javascript">
|
||||
// Require login to see this page.
|
||||
app.auth.forceLogin()
|
||||
</script>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<body>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="air-quality-container">
|
||||
<%#
|
||||
<div class="graphbutton-container">
|
||||
<button id="barButton">Bar Graph</button>
|
||||
<button id="lineButton">Line Graph</button>
|
||||
</div> %>
|
||||
<div class="chart-container">
|
||||
<canvas id="dataChart"></canvas>
|
||||
<div class="air-quality-container">
|
||||
<div class="querybutton-container" id="querybutton-container">
|
||||
<!-- <button id="yearButton">Year</button>
|
||||
<button id="monthButton">Month</button>
|
||||
<button id="weekButton">Week</button> -->
|
||||
<button id="dayButton">Day</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="chart-container">
|
||||
<canvas id="dataChart"></canvas>
|
||||
</div>
|
||||
<!-- <div class="button-container">
|
||||
<button id="psiButton">PSI</button>
|
||||
<button id="tempButton">Temperature</button>
|
||||
<button id="humButton">Humidity</button>
|
||||
<button id="o3Button">O3</button>
|
||||
<button id="no2Button">NO2</button>
|
||||
<button id="so2Button">SO2</button>
|
||||
<button id="coButton">CO</button>
|
||||
</div>
|
||||
-->
|
||||
<br>
|
||||
<div class="download-container">
|
||||
<p>Download data here:</p>
|
||||
<button id="downloadCSVButton" onclick="downloadCSV()">Download CSV</button>
|
||||
<br><br>
|
||||
<button id="downloadCSVButton" onclick="downloadExcel()">Download Excel Sheet</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button id="aqiButton">AQI</button>
|
||||
<button id="tempButton">Temperature</button>
|
||||
<button id="humButton">Humidity</button>
|
||||
<button id="pm25Button">PM2.5</button>
|
||||
<button id="pm10Button">PM10</button>
|
||||
<button id="o3Button">O3</button>
|
||||
<button id="no2Button">NO2</button>
|
||||
<button id="so2Button">SO2</button>
|
||||
<button id="coButton">CO</button>
|
||||
</div>
|
||||
<div class="download-container">
|
||||
<p>Download data here:</p>
|
||||
<button id="downloadCSVButton">Download CSV</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<script src="js/data.js"></script>
|
||||
<!-- //download csv and excel -->
|
||||
<script type="text/javascript">
|
||||
//https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
|
||||
function exportToCsv(filename, rows) {
|
||||
var processRow = function (row) {
|
||||
var finalVal = '';
|
||||
for (var j = 0; j < row.length; j++) {
|
||||
var innerValue = row[j] === null ? '' : row[j].toString();
|
||||
if (row[j] instanceof Date) {
|
||||
innerValue = row[j].toLocaleString();
|
||||
};
|
||||
var result = innerValue.replace(/"/g, '""');
|
||||
if (result.search(/("|,|\n)/g) >= 0)
|
||||
result = '"' + result + '"';
|
||||
if (j > 0)
|
||||
finalVal += ',';
|
||||
finalVal += result;
|
||||
}
|
||||
return finalVal + '\n';
|
||||
};
|
||||
|
||||
var csvFile = '';
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
csvFile += processRow(rows[i]);
|
||||
}
|
||||
|
||||
<br>
|
||||
<br>
|
||||
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
|
||||
if (navigator.msSaveBlob) { // IE 10+
|
||||
navigator.msSaveBlob(blob, filename);
|
||||
} else {
|
||||
var link = document.createElement("a");
|
||||
if (link.download !== undefined) { // feature detection
|
||||
// Browsers that support HTML5 download attribute
|
||||
var url = URL.createObjectURL(blob);
|
||||
link.setAttribute("href", url);
|
||||
link.setAttribute("download", filename);
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
//content="application/vnd.ms-excel;charset=utf-8"
|
||||
function exportToExcel(filename, rows) {
|
||||
var processRow = function (row) {
|
||||
var finalVal = '';
|
||||
for (var j = 0; j < row.length; j++) {
|
||||
var innerValue = row[j] === null ? '' : row[j].toString();
|
||||
if (row[j] instanceof Date) {
|
||||
innerValue = row[j].toLocaleString();
|
||||
}
|
||||
var result = innerValue.replace(/"/g, '""');
|
||||
if (result.search(/("|,|\n)/g) >= 0) {
|
||||
result = '"' + result + '"';
|
||||
}
|
||||
if (j > 0) {
|
||||
finalVal += '\t'; // Use tabs for Excel format
|
||||
}
|
||||
finalVal += result;
|
||||
}
|
||||
return finalVal + '\n';
|
||||
};
|
||||
|
||||
<%- include('bot') %>
|
||||
var excelFile = '';
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
excelFile += processRow(rows[i]);
|
||||
}
|
||||
|
||||
var blob = new Blob([excelFile], { type: "application/vnd.ms-excel;charset=utf-8" });
|
||||
if (navigator.msSaveBlob) { // IE 10+
|
||||
navigator.msSaveBlob(blob, filename + '.xls');
|
||||
} else {
|
||||
var link = document.createElement("a");
|
||||
if (link.download !== undefined) { // Feature detection
|
||||
// Browsers that support HTML5 download attribute
|
||||
var url = URL.createObjectURL(blob);
|
||||
link.setAttribute("href", url);
|
||||
link.setAttribute("download", filename);
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//onclick call
|
||||
function downloadCSV() {
|
||||
app.api.get('sensor-data/', function (error, data) {
|
||||
//to loop through the data and assign into map array
|
||||
var formattedData = data.map(function (item) {
|
||||
return [
|
||||
item.id,
|
||||
item.sensorid,
|
||||
item.locationid,
|
||||
JSON.stringify(item.measurement), //to handle measurement object
|
||||
item.createdAt
|
||||
];
|
||||
});
|
||||
exportToCsv('export.csv', [
|
||||
['id', 'sensorid', 'locationid', 'measurement', 'createdAt'],
|
||||
...formattedData
|
||||
]);
|
||||
|
||||
});
|
||||
}
|
||||
function downloadExcel() {
|
||||
app.api.get('sensor-data/', function (error, data) {
|
||||
//to loop through the data and assign into map array
|
||||
var formattedData = data.map(function (item) {
|
||||
return [
|
||||
item.id,
|
||||
item.sensorid,
|
||||
item.locationid,
|
||||
JSON.stringify(item.measurement), //to handle measurement object
|
||||
item.createdAt
|
||||
];
|
||||
});
|
||||
exportToExcel('export.xls', [
|
||||
['id', 'sensorid', 'locationid', 'measurement', 'createdAt'],
|
||||
...formattedData
|
||||
]);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<%- include('bot') %>
|
||||
@ -1,4 +0,0 @@
|
||||
moment = require('moment')
|
||||
|
||||
//current time
|
||||
console.log(moment().format('hh:mm:ss a'))
|
||||
Reference in New Issue
Block a user