I am trying to add data from 2 csv files which have timestamp data like this: 9/30/2015 6:39:14 PM,20.709217.
I am trying to read these values from the file and converting the string to date-time format which highcharts accepts.
For every file I am adding this converted data to the data array which I push to the chart.
It gives the following error: Invalid value for <path> attribute d="M 687.5 "
Here is the code which I am trying: jsfiddle
My csv data files are as below.
Data1.csv
9/30/2015 6:39:14 PM,20.709217
9/29/2015 6:38:16 PM,32.215775
9/28/2015 6:38:16 PM,32.215775
Data2.csv
9/30/2015 6:39:14 PM,24.709217
9/29/2015 6:38:16 PM,18.012775
9/28/2015 6:38:16 PM,33.245775
Kindly help me with this.
$.get()is asynchronous, so when you call drawChart, data1array is not completely set: the ajax call is not finished.
You need to move the drawChartcall in the end of the $.get() call.
Here is the working code:
var options1 = {
chart: {
renderTo: 'container'
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Select on Parameters to change data in chart.'
},
},
vAxis: {
title: {
text: ''
},
},
tooltip: {
enabled: true,
shared: true
},
series: []
};
var drawChart = function(data, type, name, color) {
var newSeriesData = {
name: name,
type: type,
data: data,
color: color
};
options1.series.push(newSeriesData);
var chart = new Highcharts.Chart(options1);
};
var data1 = [
[]
],
data2 = [
[]
];
$.get('data1.csv', function(csv) {
var lines = csv.trim().split('\n');
console.log("CSV: ", csv);
$.each(lines, function(lineNo, line) {
var items = line.split(',');
console.log('Item1:', items[0])
if ((line !== " ")) {
var datetime = new Date(items[0]);
console.log("Datetime variable: ", datetime);
var value = parseFloat(items[1]);
var year = datetime.getFullYear();
var month = datetime.getUTCMonth();
var day = datetime.getDay();
var hour = datetime.getHours();
var min = datetime.getMinutes();
var thisDate = Date.UTC(year, month, day, hour, min);
console.log("Date: ", thisDate);
console.log("Value: ", value);
// console.log("Date Generated: ",thisDate);
data1.push([thisDate, value]);
}
});
$.each(lines, function(lineNo, line) {
var items = line.split(',');
console.log('Item1:', items[0])
if ((line !== " ")) {
var datetime = new Date(items[0]);
console.log("Datetime variable: ", datetime);
var value = parseFloat(items[1]);
var year = datetime.getFullYear();
var month = datetime.getUTCMonth();
var day = datetime.getDay();
var hour = datetime.getHours();
var min = datetime.getMinutes();
var thisDate = Date.UTC(year, month, day, hour, min);
console.log("Date: ", thisDate);
console.log("Value: ", value);
// console.log("Date Generated: ",thisDate);
data1.push([thisDate, value]);
}
});
console.log("Data1 Array: ", data1);
drawChart(data1, 'line', 'DC Voltage (V)', 'red');
});
Here is the ouput in the console:
CSV: 9/30/2015 6:39:14 PM,20.709217
9/29/2015 6:38:16 PM,32.215775
9/28/2015 6:38:16 PM,32.215775
Item1: 9/30/2015 6:39:14 PM
Datetime variable: Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))
"Datetime variable: "
[date] Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))
Date: 1441305540000
Value: 20.709217
Item1: 9/29/2015 6:38:16 PM
Datetime variable: Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
"Datetime variable: "
[date] Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
Date: 1441219080000
Value: 32.215775
Item1: 9/28/2015 6:38:16 PM
Datetime variable: Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
"Datetime variable: "
[date] Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
Date: 1441132680000
Value: 32.215775
Item1: 9/30/2015 6:39:14 PM
Datetime variable: Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))
"Datetime variable: "
[date] Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été))
Date: 1441305540000
Value: 20.709217
Item1: 9/29/2015 6:38:16 PM
Datetime variable: Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
"Datetime variable: "
[date] Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
Date: 1441219080000
Value: 32.215775
Item1: 9/28/2015 6:38:16 PM
Datetime variable: Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
"Datetime variable: "
[date] Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été))
Date: 1441132680000
Value: 32.215775
Data1 Array: ,1441305540000,20.709217,1441219080000,32.215775,1441132680000,32.215775,1441305540000,20.709217,1441219080000,32.215775,1441132680000,32.215775
"Data1 Array: "
[
0: [ ],
1: [ ],
2: [ ],
3: [ ],
4: [ ],
5: [ ],
6: [ ],
length: 7
]
Highcharts error #15: www.highcharts.com/errors/15
Highcharts error #15: www.highcharts.com/errors/15
Highcharts error #15: www.highcharts.com/errors/15
Highcharts error #15: www.highcharts.com/errors/15
Related
I need to get my data ordered by date and events but I'm struggling to get it working using AlaSQL query on Date objects:
function testOrderBy() {
var data = [{event:'A', date: new Date('2021-04-21')},
{event:'B', date: new Date('2021-04-21')},
{event:'C', date: new Date('2021-04-21')},
{event:'D', date: new Date('2021-04-20')}];
console.log(data);
var res = alasql(`SELECT event, date FROM ? ORDER BY date, event`, [data]);
console.log(res);
}
And the result obtained is:
[ { event: 'D',
date: Tue Apr 20 2021 02:00:00 GMT+0200 (Central European Summer Time) },
{ event: 'C',
date: Wed Apr 21 2021 02:00:00 GMT+0200 (Central European Summer Time) },
{ event: 'B',
date: Wed Apr 21 2021 02:00:00 GMT+0200 (Central European Summer Time) },
{ event: 'A',
date: Wed Apr 21 2021 02:00:00 GMT+0200 (Central European Summer Time) } ]
I was expecting:
[ { event: 'D',
date: Tue Apr 20 2021 02:00:00 GMT+0200 (Central European Summer Time) },
{ event: 'A',
date: Wed Apr 21 2021 02:00:00 GMT+0200 (Central European Summer Time) },
{ event: 'B',
date: Wed Apr 21 2021 02:00:00 GMT+0200 (Central European Summer Time) },
{ event: 'C',
date: Wed Apr 21 2021 02:00:00 GMT+0200 (Central European Summer Time) } ]
The problem does not occur if dates are not Date objects but ISO strings:
function testOrderBy() {
var data = [{event:'A', date: '2021-04-21'},
{event:'B', date: '2021-04-21'},
{event:'C', date: '2021-04-21'},
{event:'D', date: '2021-04-20'}];
console.log(data);
var res = alasql(`SELECT event, date FROM ? ORDER BY date, event`, [data]);
console.log(res);
}
The result is as expected D, A, B, C
Any idea ?
It is necessary to create the table schema to correctly consider the column as a Date type, as follows:
alasql("CREATE TABLE events (event string, date date)");
alasql.tables.events.data = [{event:'A', date: new Date('2021-04-21')},
{event:'B', date: new Date('2021-04-21')},
{event:'C', date: new Date('2021-04-21')},
{event:'D', date: new Date('2021-04-20')}];
alasql(`SELECT event, date INTO HTML("#res") FROM events ORDER BY date, event`);
<script src="https://cdn.jsdelivr.net/npm/alasql#1.7.3/dist/alasql.min.js"></script>
<div id="res">
</div>
I have been trying to take the json data outputted from the database and create an new array that groups the data by month and year.
The problem is my new array doesn't output in the format that i need so i need to add the month and year but can't get the month grouping to work first. I think that might be right and resolve my issue, but I need help as arrays are confusing.
I have a codepen demo https://codepen.io/james182/pen/yLaqybP
var data = [
{ name: "First", timestampSent: "Wed, 25 Nov 2020 - 11:01 AM" },
{ name: "Second", timestampSent: "Wed, 25 Nov 2020 - 11:21 AM" },
{ name: "Third", timestampSent: "Thu, 26 Nov 2020 - 10:21 AM" },
{ name: "Fourth", timestampSent: "Fri, 27 Nov 2020 - 13:52 PM" },
{ name: "Fifth", timestampSent: "Tue, 24 Dec 2020 - 11:01 AM" },
{ name: "Sixth", timestampSent: "Wed, 25 Dec 2020 - 01:01 AM" }
];
// Clear console before running
console.clear();
var list = [];
for (i = 0; i < data.length; i++) {
var dates = data[i].timestampSent.slice(5, 16);
var mth = data[i].timestampSent.split(" ")[2];
if (!list[mth]) {
list[mth] = [];
}
list[mth].push({ name: data[i].name, date: data[i].timestampSent });
console.log(mth);
}
console.log(JSON.stringify(list));
//console.log('list', list);
/*
outcome:
[{
'Nov': [
{
'name': 'First',
'timestampSent': 'Wed, 25 Nov 2020 - 11:01 AM'
},
{
'name': 'Second',
'timestampSent': 'Wed, 25 Nov 2020 - 11:21 AM'
},
{
'name': 'Third',
'timestampSent': 'Thu, 26 Nov 2020 - 10:21 AM'
},
{
'name': 'Fourth',
'timestampSent': 'Fri, 27 Nov 2020 - 13:52 PM'
}
],
'Dec': [
{
'name': 'Fifth',
'timestampSent': 'Tue, 24 Dec 2020 - 11:01 AM'
},
{
'name': 'Sixth',
'timestampSent': 'Wed, 25 Dec 2020 - 01:01 AM'
}
]
}]
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Your list should not be an array. Since you are using the month name ('Nov', 'Dec') as keys you should use an object.
var list = {};
try change the line
list = []
to
list = {}
You will be using an object, not a list.
Try it here
I have the following structure on my firebase database:
I need to get an array of all the data with a special structure. This is how I do it:
const isObject = obj => {
return Object.prototype.toString.call(obj) === '[object Object]' ? true : false;
};
function snapshotToArray(snapshot) {
var returnArr = [];
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
if (isObject(item)){
returnArr = returnArr.concat(snapshotToArray(childSnapshot));
}
});
return returnArr;
};
And call it:
snapshotToArray(snapshot); // 'snapshot' is the data from database in a snapshot format
Getting:
[ { 'Diciembre-2018': { '-LJV5UxepDNSR5yUCDbf': [Object] },
'Julio-2018': { '-LJUt8yTjpK3oq2wRd_g': [Object] },
key: '2018' },
{ '-LJV5UxepDNSR5yUCDbf':
{ pin: 'mi-pin-dic',
timestamp: 'Thu Aug 09 2018 13:11:39 GMT-0600 (GMT-06:00)' },
key: 'Diciembre-2018' },
{ pin: 'mi-pin-dic',
timestamp: 'Thu Aug 09 2018 13:11:39 GMT-0600 (GMT-06:00)',
key: '-LJV5UxepDNSR5yUCDbf' },
'mi-pin-dic',
'Thu Aug 09 2018 13:11:39 GMT-0600 (GMT-06:00)',
{ '-LJUt8yTjpK3oq2wRd_g':
{ pin: 'mi-pin-julio',
timestamp: 'Thu Aug 09 2018 12:13:21 GMT-0600 (GMT-06:00)' },
key: 'Julio-2018' },
{ pin: 'mi-pin-julio',
timestamp: 'Thu Aug 09 2018 12:13:21 GMT-0600 (GMT-06:00)',
key: '-LJUt8yTjpK3oq2wRd_g' },
'mi-pin-julio',
'Thu Aug 09 2018 12:13:21 GMT-0600 (GMT-06:00)' ]
But as you can see, in the 3rd and 5th iteration it gets an extra data:
'mi-pin-dic',
'Thu Aug 09 2018 13:11:39 GMT-0600 (GMT-06:00)',
'mi-pin-julio',
'Thu Aug 09 2018 12:13:21 GMT-0600 (GMT-06:00)'
My question:
How can I avoid this issue? Any ideas?
I have a JSON js object which I am getting using AJAX.
the problem is I don't have much control on the backend, so the data is coming in simple JS object.
I have a JSON file as follows
var test =
[
{value : 23,
file_date : Wed Jan 01 2014 05:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 01 2014 09:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 01 2014 02:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 02 2014 06:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 02 2014 09:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 02 2014 04:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 03 2014 02:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 03 2014 01:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 03 2014 10:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 04 2014 7:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 05 2014 10:34:53 GMT+0530 (IST)
},
{value : 23,
file_date : Wed Jan 06 2014 11:34:53 GMT+0530 (IST)
}
]
the file_ts has different timestamp. my problem is that I have to consolidate this data.
If user select 1 Day then I have to get sum of all data hour wise. If there are 4 values between 2 and 3 hr then I have to sum that data hour wise.
then if weekly then weekly. I am trying to write a nodejs server with express and mysql but its also not working from there.
Here is what, i'm assuming, you were asking for:
If a user selects 'January 1st', you want to grab all info where
file_date is on the selected date and add up all the hours.
Here are the steps you would need to take:
Get data from Ajax Call
Search data by Date (input) and add matches together
Convert matches to date and add up hours
NOTE: I've converted your timezone (IST) to (UTC) so the output will be in GMT
// Test data
var test = [{
value: 23,
file_date: "Wed Jan 01 2014 05:34:53 GMT+0530 (IST)"
},{
value: 23,
file_date: "Wed Jan 01 2014 09:34:53 GMT+0530 (IST)"
},{
value: 23,
file_date: "Wed Jan 01 2014 02:34:53 GMT+0530 (IST)"
},{
value: 23,
file_date: "Thu Jan 02 2014 06:34:53 GMT+0530 (IST)"
},{
value: 23,
file_date: "Thu Jan 02 2014 09:34:53 GMT+0530 (IST)"
},{
value: 23,
file_date: "Thu Jan 02 2014 04:34:53 GMT+0530 (IST)"
}
];
var userInput = 1; // This is the date they typed in
// This function returns all records for a specific day (integer)
var getAllDayData = function(day){
var response = [];
for(var i=0;i<test.length;i++){
var fileDate = new Date(test[i].file_date);
if(fileDate.getDate() === day){ // getDate gets you day of month
response.push(fileDate);
}
}
return response;
};
var getTotalHoursFromDates = function(data){
var totalHours = 0;
for(var i=0;i<data.length;i++){
totalHours += data[i].getHours();
}
return totalHours;
};
var getTotalHoursFromInput = function(day){
var dayData = getAllDayData(day);
var response = getTotalHoursFromDates(dayData);
return response;
};
// Call the function
var dayTotal = getTotalHoursFromInput(userInput);
console.log(dayTotal); // 58
Regarding your request to grab weekly hours: You will have to add a function that takes all the days of the week (input), gather all the information for each day, add then add all of those hours together. This is a continuation of the code above.
var week = [31,1,2,3,4,5,6]; // This is the days of the selected full week
var getAllWeekData = function(days){
var response = [];
for(var i=0;i<days.length;i++){
var day = getAllDayData(days[i]);
if(day[0] != null) { // Checks for undefined or null
for(var y=0;y<day.length;y++){
response.push(day[i]);
}
}
}
return response;
};
var getAllWeekDays = function(selectedDays){
var allDays = getAllWeekData(selectedDays);
var response = getTotalHoursFromDates(allDays);
return response;
};
var weekTotal = getAllWeekDays(week);
console.log(weekTotal); // 120
My goal:
Call an API and inside this API I would like to:
Find Bills
Find all transactions under each bill (by billId)
Return the values in a JSON ARRAY
The bill array look like this:
{ _id: 549bf0597886c3763e000001,
billName: 'Leasing',
startDate: Thu Dec 25 2014 01:00:00 GMT+0100 (CET),
endDate: Sun Oct 15 2017 00:00:00 GMT+0200 (CEST),
amount: 16500,
type: 4,
timestamp: Thu Dec 25 2014 12:09:13 GMT+0100 (CET),
__v: 0 },
{ _id: 54a014bfac01ca3526000001,
billName: 'Test',
startDate: Tue Oct 28 2014 01:00:00 GMT+0100 (CET),
endDate: Wed Dec 20 2017 00:00:00 GMT+0100 (CET),
amount: 1000,
type: 4,
timestamp: Sun Dec 28 2014 15:33:35 GMT+0100 (CET),
__v: 0 }
From this array, which I get in the step 1, I would like to query the transactions collections and get each transaction for each bill.
The array would have the following transformation:
From:
{ _id: 549bf0597886c3763e000001,
billName: 'Leasing',
startDate: Thu Dec 25 2014 01:00:00 GMT+0100 (CET),
endDate: Sun Oct 15 2017 00:00:00 GMT+0200 (CEST),
amount: 16500,
type: 4,
timestamp: Thu Dec 25 2014 12:09:13 GMT+0100 (CET),
__v: 0 },
{ _id: 54a014bfac01ca3526000001,
billName: 'Test',
startDate: Tue Oct 28 2014 01:00:00 GMT+0100 (CET),
endDate: Wed Dec 20 2017 00:00:00 GMT+0100 (CET),
amount: 1000,
type: 4,
timestamp: Sun Dec 28 2014 15:33:35 GMT+0100 (CET),
__v: 0 }
To:
{ _id: 549bf0597886c3763e000001,
billName: 'Leasing',
startDate: Thu Dec 25 2014 01:00:00 GMT+0100 (CET),
endDate: Sun Oct 15 2017 00:00:00 GMT+0200 (CEST),
amount: 16500,
type: 4,
timestamp: Thu Dec 25 2014 12:09:13 GMT+0100 (CET),
__v: 0 ,
transactions: {
{
"_id" : ObjectId("549ea8c957b654ef64000003"),
"billId" : "5499aece1d7be6c6a3000001",
"paymentDate" : ISODate("2014-12-27T12:40:41.311+0000"),
"amount" : NumberInt(2400),
"timestamp" : ISODate("2014-12-27T12:40:41.311+0000"),
"__v" : NumberInt(0)
}
{
"_id" : ObjectId("549ea9446163b3c666000001"),
"billId" : "5499aece1d7be6c6a3000001",
"paymentDate" : ISODate("2014-12-27T12:42:44.975+0000"),
"amount" : NumberInt(2400),
"timestamp" : ISODate("2014-12-27T12:42:44.975+0000"),
"__v" : NumberInt(0)
}
}
},
{ _id: 54a014bfac01ca3526000001,
billName: 'Test',
startDate: Tue Oct 28 2014 01:00:00 GMT+0100 (CET),
endDate: Wed Dec 20 2017 00:00:00 GMT+0100 (CET),
amount: 1000,
type: 4,
timestamp: Sun Dec 28 2014 15:33:35 GMT+0100 (CET),
__v: 0 }
In my attempt, Im succeding until I get the bills ID from the bill collection but I cannot succeed to get the transaction IDs into an array.
My attempt looks like this:
app.get('/getbills', function(req,res) {
function getTransactions(item, key){
var billId = item._id;
Transactions.find({billId : billId}, function(err, transactions){ // TODO: Needs to look for transactions inside the date.
if (err)
console.log('error: '+ err)
else if (transactions.length !== 0){
return transactions;
}
});
};
Bills.find({type: bill_type}).find(function(err, bills){
if(err)
res.send(err);
details.bills = bills;
details.bills.transations = _.each(bills, getTransactions);
res.send(details);
});
});
I'm using _.each to hold the billId and query the transactions table but there are not enough examples explaining how to use this function in the way I'm trying. Or maybe my attempt is wrong.
Any help is welcome.
Thanks in advance.
You are not waiting for you second call to finish, so you don't have all data at hand. Your return statement does not work as you think it will.
You should read a bit about asynchronicity in JavaScript :)
This code should work. Please take some time to study it and understand why. The trySend function acts as a simple synchronizer and only responds when all data is available. This is not the best way to do it - only the simplest.
app.get('/bills', function( req, res ) {
Bills.find({type: bill_type}, function( err, bills ) {
if( err ) return res.send(err);
var tries = 0;
var details = { bills: bills };
var trySend = function (){
tries++;
if (tries === bills.length) {
res.send(details);
}
};
bills.forEach( function ( bill ) {
Transactions.find({billId : bill._id}, function ( err, transactions ) {
if ( err ) return res.send( err );
bill.transations = transactions;
trySend();
});
});
});
});