Cal-HeatMap Data - javascript
I'm trying to fill the HeatMap calendar (http://cal-heatmap.com/) with dynamic data. So I'm taking different dates from a file and converting them to miliseconds to create the key-value pair required for the calendar.
I'm doing this like this:
var aux = {};
var dataJSON = {};
for(var i=0; i<activity.length; i++) {
var date = new Date(activity[i].date); // Date of activity
var ms = date.getTime(); // Date Conversion
aux[ms] = 1; // Pair "Key-Value" for calendar data
dataJSON = JSON.stringify(aux); // Convert to JSON format
}
If I print the result of dataJSON, I get (apparently) the correct object:
{"1426204800000":1,"1426464000000":1,"1426636800000":1,"1426550400000":1,"1425945600000":1,"1426118400000":1,"1426032000000":1,"1432771200000":1,"1432857600000":1,"1432598400000":1,"1432684800000":1,"1432080000000":1,"1432166400000":1,"1425513600000":1,"1435708800000":1,"1439164800000":1,"1425427200000":1,"1432512000000":1,"1439251200000":1,"1425340800000":1,"1432252800000":1,"1439337600000":1,"1425254400000":1,"1425859200000":1,"1425686400000":1,"1435881600000":1,"1425600000000":1,"1435795200000":1,"1436400000000":1,"1436313600000":1,"1436227200000":1,"1436140800000":1,"1435536000000":1,"1434931200000":1,"1427673600000":1,"1434758400000":1,"1435276800000":1,"1427760000000":1,"1435190400000":1,"1435104000000":1,"1435017600000":1,"1427241600000":1,"1434672000000":1,"1427155200000":1,"1434585600000":1,"1427414400000":1,"1434499200000":1,"1427328000000":1,"1434412800000":1,"1433980800000":1,"1433894400000":1,"1434326400000":1,"1426809600000":1,"1427068800000":1,"1427846400000":1,"1434067200000":1,"1428451200000":1,"1438646400000":1,"1428364800000":1,"1438560000000":1,"1428278400000":1,"1438387200000":1,"1438905600000":1,"1438819200000":1,"1428537600000":1,"1438732800000":1,"1430092800000":1,"1430179200000":1,"1437177600000":1,"1437091200000":1,"1430265600000":1,"1429488000000":1,"1436486400000":1,"1429747200000":1,"1437004800000":1,"1429833600000":1,"1436918400000":1,"1429574400000":1,"1436832000000":1,"1429660800000":1,"1436745600000":1,"1429142400000":1,"1429228800000":1,"1428969600000":1,"1429056000000":1,"1435622400000":1,"1428883200000":1,"1428624000000":1,"1428710400000":1,"1430956800000":1,"1430870400000":1,"1430784000000":1,"1430697600000":1,"1431043200000":1,"1424736000000":1,"1424649600000":1,"1431907200000":1,"1424908800000":1,"1431648000000":1,"1424822400000":1,"1424995200000":1,"1431993600000":1,"1438300800000":1,"1431475200000":1,"1431561600000":1,"1431302400000":1,"1424476800000":1,"1431388800000":1,"1423958400000":1,"1438128000000":1,"1423872000000":1,"1438041600000":1,"1424131200000":1,"1424304000000":1,"1424217600000":1,"1430352000000":1,"1437609600000":1,"1437523200000":1,"1437436800000":1,"1437350400000":1,"1423180800000":1,"1433203200000":1,"1437955200000":1,"1433116800000":1,"1423612800000":1,"1423526400000":1,"1437696000000":1,"1433376000000":1,"1433289600000":1,"1438214400000":1,"1433808000000":1,"1433721600000":1};
However, I cannot see the result on the calendar. This is the calendar configuration:
var cal = new CalHeatMap();
cal.init({
itemSelector: "#cal-heatmap",
domain: "month",
subDomain: "x_day",
start: new Date(init),
data: dataJSON
});
Anyway, I tried it with these static data and, surprisingly, it works:
var dataJSON = {"1420498800":2,"1420585200":4,"1420671600":2,"1420758000":1,"1421103600":2,"1421190000":1,"1421276400":1,"1421362800":1,"1421622000":1,"1421708400":1,"1422226800":1,"1422313200":1,"1422399600":2,"1422486000":1,"1422572400":1,"1423695600":3,"1424127600":2,"1424214000":1,"1424300400":3,"1424386800":1,"1424646000":2,"1424732400":1,"1424818800":2,"1424905200":2,"1424991600":1,"1425337200":1,"1425855600":4,"1426201200":2,"1426460400":2,"1426546800":1,"1426633200":2,"1426719600":1,"1426806000":1,"1427065200":1,"1427151600":1,"1427238000":2,"1427324400":1,"1427670000":2,"1428361200":2,"1428447600":2,"1428534000":3,"1428620400":3,"1428966000":2,"1429138800":2,"1429225200":1,"1429484400":2,"1429570800":1,"1429657200":2,"1429743600":2,"1429830000":3};
On the other hand, I'm getting the following GET error from d3.js:
GET http://localhost:9000/%7B%221426204800000%22:2,%2...2,%221433808000000%22:2,%221433721600000%22:2%7D
Aborted
Hope you can tell me my mistake, thanks in advance.
The data conversion should be done through "afterLoadData(data)" function. So, in my example:
var parserData = function (data) {
var dataJSON = {};
for(var i=0; i<data.length; i++) {
var date = new Date(data[i].date); // Date of activity
var sec = date.getTime()/1000; // Convert to sec
// Pair "Key-Value" for calendar data
if(dataJSON[sec]) {
dataJSON[sec]++;
} else {
dataJSON[sec] = 1;
}
}
return dataJSON;
}
var cal = new CalHeatMap();
cal.init({
itemSelector: "#cal-heatmap",
domain: "month",
subDomain: "x_day",
data: activity_sorted_by_date, // Dates Array
afterLoadData: parserData // Parser function
});
Related
How to put timestamps within array in local storage?
Hello I am creating an chrome extension and I am trying to put all my timestamps that a retrieved after visiting a url into an array in local storage but I am having trouble doing so. It continues to update timestamps and i want all my timestamps to stay the same. However it doesnt seem to save anything and i keep receiving this error. Do anyone know how to fix this error or what may be causing it. function addRow() { const bg = chrome.extension.getBackgroundPage() Object.keys(bg.get).forEach(function (url) { // Append product to the table var data = []; data = JSON.parse(localStorage.getItem('session')) || []; // Push the new data (whether it be an object or anything else) onto the array data.push( Date.now() ); localStorage.setItem('session', JSON.stringify(data)); myDate = data; //protocol var arr = url.split("/"); var protocoll = arr[0] + "//" + arr[2]; //inputed data -- browser= "Google Chrome"; protocol = protocoll; downloads = "example"; description = "example"; //use data or myDate as time time = myDate; //will put dates in array and replace it and have var as myDate // add new row to the table //1 = in the top //table.rows.length = the end //table.rows.length/2+1 = the center var newRow = table.insertRow(0); //console.log(table.rows.length) gives length of table // add cells to the row var browserCell = newRow.insertCell(0); var timeCell = newRow.insertCell(1); var urlCell = newRow.insertCell(2); var protocolCell = newRow.insertCell(3); var downloadsCell = newRow.insertCell(4); var descCell = newRow.insertCell(5); // add the data to the cells urlCell.innerHTML = `${url}`; timeCell.innerHTML = time; browserCell.innerHTML = browser; descCell.innerHTML = description; protocolCell.innerHTML = protocol; downloadsCell.innerHTML = downloads; console.log("add row works"); }) }
"Unexpected token u at position 0" means that you're trying to parse an undefined. Replace var data = []; data = JSON.parse(localStorage.getItem('session')) || []; with var data = JSON.parse(localStorage.getItem('session') || "[]");
There is a bug in the code. data = JSON.parse(localStorage.getItem('session')) || []; should be : data = JSON.parse(localStorage?.getItem('session') ?? []);
How to put timestamps in local storage?
Hello I am creating an chrome extension and I am trying to put all my timestamps that a retrieved after visiting a url into an array in local storage but I am having trouble doing so. It continues to update timestamps and i want all my timestamps to stay the same. However it doesnt seem to save anything and i keep receiving this error. Do anyone know how to fix this error or what may be causing it. function addRow() { //SavaDataToLocalStorage(data); //putting dates in array-- works somewhat //var myDate = data[data.length-1]; //data.length = 0; const bg = chrome.extension.getBackgroundPage() Object.keys(bg.get).forEach(function (url) { // Append product to the table var data = []; data = JSON.parse(localStorage.getItem('session')) || []; // Push the new data (whether it be an object or anything else) onto the array data.push( Date.now() ); localStorage.setItem('session', JSON.stringify(data)); myDate = data; //protocol var arr = url.split("/"); var protocoll = arr[0] + "//" + arr[2]; //inputed data -- browser= "Google Chrome"; protocol = protocoll; downloads = "example"; description = "example"; //use data or myDate as time time = myDate; //have as Date.now() //will put dates in array and replace it and have var as myDate // add new row to the table //1 = in the top //table.rows.length = the end //table.rows.length/2+1 = the center var newRow = table.insertRow(0); //console.log(table.rows.length) gives length of table // add cells to the row var browserCell = newRow.insertCell(0); var timeCell = newRow.insertCell(1); var urlCell = newRow.insertCell(2); var protocolCell = newRow.insertCell(3); var downloadsCell = newRow.insertCell(4); var descCell = newRow.insertCell(5); // add the data to the cells urlCell.innerHTML = `${url}`; timeCell.innerHTML = time; browserCell.innerHTML = browser; descCell.innerHTML = description; protocolCell.innerHTML = protocol; downloadsCell.innerHTML = downloads; console.log("add row works"); }) }
Fix typo on line:5 date>>>data var data = []; data = JSON.parse(localStorage.getItem('session')) || []; // Push the new data (whether it be an object or anything else) onto the array data.push( Date.now() ); localStorage.setItem('session', JSON.stringify(data)); myDate = data; //inputed data time = myDate;
Google charts data type mismatch while dynamic row adding
.. so I'm trying to add data to create a Google Chart via loop & addRow(), like this: var splicedData = data.split(","); //the data var is a string with several dates in this format (string): // "day/month/year | hour:minutes:seconds", separated by commas. for(i = 0; i<splicedData.length-1; i++){ dSplicedData = splicedData[i].split("|"); //split date and hour ddSplicedData = dSplicedData[1].split(":"); // split hh, mm, ss dddSplicedData = dSplicedData[0].split("/"); //split dd, mm, yy chartData.addRow([ [new Date ( parseInt(dddSplicedData[2]), //year parseInt(dddSplicedData[1]), //month parseInt(dddSplicedData[0]))], //day [parseInt(ddSplicedData[0]), parseInt(ddSplicedData[1]), 0] ]); }; The index 0 of addRow() needs a 'datetime/date' datatype , the index 1 needs a 'timeofday'. As far as I understood it, both types are mapped in JS by the Date() method. In conclusion, looking at the API indications I think I've done it right, but I get this error: "Error: Type mismatch. Value Wed Jul 20 2016 08:00:00 GMT+0200 (CEST) does not match type datetime in column index 0", which is very weird, since the value matches the datatype and it's generated by the Date() method. Furthermore, I've tried with a Google example, inserting random date manually (not looping a variable value; new Date(2000, 8, 5)), reference here, and it does not accept it either.
check this JsFiddle Demo You just need to remove the [] symbol around the date. HTML <div id="chart_div"></div> JS // Load the Visualization API and the piechart package. google.charts.load('current', { 'packages': ['corechart'] }); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); function drawChart() { var chartData = new google.visualization.DataTable(); var dSplicedData = new Array(); var ddSplicedData = new Array(); chartData.addColumn('datetime', 'Día'); chartData.addColumn('timeofday', 'Hora de entrada'); /* jQuery.extend({ getValues: function(url) { var result = null; $.ajax({ url: url, type: 'get', dataType: 'html', async: false, success: function(data) { result = data; } }); return result; } }); data = $.getValues("getData.php"); */ data = "19/6/2016 | 11:36:18,19/6/2016 | 11:36:44,20/6/2016 | 9:3:32"; var splicedData = data.split(","); for (i = 0; i < splicedData.length - 1; i++) { dSplicedData = splicedData[i].split("|"); //data formatted, splitted ddSplicedData = dSplicedData[1].split(":"); // split hour dddSplicedData = dSplicedData[0].split("/"); //split date chartData.addRow([ new Date(parseInt(dddSplicedData[2]), parseInt(dddSplicedData[1]), parseInt(dddSplicedData[0])) , [parseInt(ddSplicedData[0]), parseInt(ddSplicedData[1]), 0] ]); }; var options = { chart: { title: 'foo', subtitle: 'bar' }, width: 900, height: 500 }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(chartData, options); };
JavaScript select date between
I have this JS code which pulls data out of xml table GDownloadUrl("phpsqlajax_genxm1l.php", function(data) { var xml = GXml.parse(data); var markerid = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markerid.length; i++) { var type = markerid[i].getAttribute("type"); //var point = new GLatLng(parseFloat(markerid[i].getAttribute("lat")), //parseFloat(markerid[i].getAttribute("lng"))); var date = markerid[i].getAttribute("date"); //tabelis punkt "point" stringiks, keskelt pooleks ja 2 uut väärtust markeri atribuutideks var punktx = markerid[i].getAttribute("point"); var kommentaar = markerid[i].getAttribute("kommentaar"); var punkt = punktx.toString(); var temp = new Array(); temp = punkt.split(","); var point = new GLatLng(temp[0],temp[1]) var marker = createMarker(point, date, type, kommentaar); map.addOverlay(marker); } }); How can I do so, that when I press a button, the script only takes data entered between certain time/date?
Depending on the date/time format in the XML, this is very simple: for (var i = 0; i < markerid.length; i++) { var date = markerid[i].getAttribute("date"); if (date >= fromDate && date < toDate) { // etc etc } } This would require the date attribute (and both fromDate/toDate, of course) to be a string in a string-comparable date-format (like "yyyy-dd-mm hh:nn:ss"). If this is not the case, you probably must convert them to Date objects first, the comparison stays the same.
Has anybody used HumbleFinance to display Graphs / Charts
I am using Humble Finance to display charts similar to Google Charts. My sample data is var jsonData = [ {date:'August 19, 2010',open:100.01,high:104.06,low:95.96,close:100.34,volume:22088000}, {date:'September 20, 2010',open:101.48,high:109.08,low:100.50,close:108.31,volume:11377000} ] Inside Jquery Ready function I am using my data to load this as : jQuery(document).ready(function(){ var priceData = []; for(var i = 0; i<jsonData.length; i++) { priceData.push([i, jsonData[i].low]); } } I want to print the Dates in X axis labels by using HumbleFinance.xTickFormatter = function (n) { var date = jsonData[n].date; return date; } But its not working, and it throws this error on FireBug: jsonData[n] is undefined HumbleFinance.xTickFormatter = function (n) { var date = jsonData[n].date; date = date.split(' '); return date; }
Perhaps jsonData is not in the scope of xTickerFormatter, and you need to store it in another local variable, similar to priceData?
It's because 'n' is a float. Convert it to an integer using Math.floor before indexing the array. var index = Math.floor(n); var date = jsonData[index].date;