HeatMap Visualizations Data

Question

HeatMap Visualizations Data

I have a HeatMap calendar project () where I am attempting to populate it with dynamic data. My approach involves extracting various dates from a file and converting them into milliseconds in order to create the necessary key-value pair for the calendar.

This is how I'm currently implementing it:

var aux = {};
var dataJSON = {};
for(var i=0; i<activity.length; i++) {
   var date = new Date(activity[i].date);  
   var ms = date.getTime();                
   aux[ms] = 1;                            
   dataJSON = JSON.stringify(aux);         
}

Upon printing the result of dataJSON, it appears that I am generating the correct object:

{"1426204800000":1,"1426464000000":1,"1426636800000":1,...}

However, despite this seemingly accurate output, the populated calendar remains empty. Below is my current calendar setup configuration:

var cal = new CalHeatMap();
cal.init({
  itemSelector: "#cal-heatmap",
  domain: "month",
  subDomain: "x_day",
  start: new Date(init),
  data: dataJSON
});

Interestingly, when I replaced the dynamic data with static data, the calendar rendered as expected:

var dataJSON = {"1420498800":2,"1420585200":4,"1420671600":2,...};

Additionally, I encountered a GET error from d3.js which displayed:

GET http://localhost:9000/%7B%221426204800000%22:2,%2...%221433721600000%22:2%7D

Aborted

If anyone could shed light on where I might be going wrong, I would greatly appreciate it. Thank you in advance.

javascript json d3.js cal-heatmap

Answer 1

Answer №1

To ensure accurate data conversion, it is recommended to utilize the "afterLoadData(data)" function. In the scenario provided:

function parseUserData(data) {
  var userData = {};

  for(var j=0; j<data.length; j++) {
    var date = new Date(data[j].date); // Activity date
    var seconds = date.getTime()/1000; // Convert to seconds

    // Creating key-value pairs for calendar data
    if(userData[seconds]) {
      userData[seconds]++;
    } else {
      userData[seconds] = 1;
    }
  }

  return userData;
}

var heatmap = new HeatMap();
heatmap.initialize({
   elementSelector: "#user-heatmap",
   timeDomain: "year",
   subTimeDomain: "daily",
   dataSet: user_activity_sorted_by_date, // Array of dates
   afterLoadData: parseUserData   // Parsing function
});

Answer 2

To ensure accurate data conversion, it is recommended to utilize the "afterLoadData(data)" function. In the scenario provided:

function parseUserData(data) {
  var userData = {};

  for(var j=0; j<data.length; j++) {
    var date = new Date(data[j].date); // Activity date
    var seconds = date.getTime()/1000; // Convert to seconds

    // Creating key-value pairs for calendar data
    if(userData[seconds]) {
      userData[seconds]++;
    } else {
      userData[seconds] = 1;
    }
  }

  return userData;
}

var heatmap = new HeatMap();
heatmap.initialize({
   elementSelector: "#user-heatmap",
   timeDomain: "year",
   subTimeDomain: "daily",
   dataSet: user_activity_sorted_by_date, // Array of dates
   afterLoadData: parseUserData   // Parsing function
});

HeatMap Visualizations Data

Answer №1

Similar questions

Passing a variable from a service to a controller in AngularJS

This error is being thrown because the element has an implicit 'any' type due to the fact that a 'string' type expression cannot be used to index the 'Users' type

Does this Spread Operator Usage Check Out?

Error: Express JS custom module cannot be located in the root directory's modules folder

Tips for preserving updates following modifications in Angular 5/6?

Time for the browser to evaluate javascript code has arrived

Retrieve data from a MongoDB collection based on a specific index field

Automatically scroll the chat box to the bottom

Having trouble with jQuery show/hide not functioning properly?

React is re-rendering the identical div elements once more - Delving into the concept of

Showing data in json format using Angular

ERROR Error: Uncaught (in promise): ContradictionError: The variable this.products is being incorrectly identified as non-iterable, although it

Looking to display several charts on a single page with varying datasets?

Transition within Vuejs moves forwards and backwards, with a unique feature that allows it to skip directly to

Is there a way to use Axios to send several HTTP requests to a URL simultaneously, but pause once a response is received from any one of the requests?

Encountering the error message "ReferenceError: parsePayload cannot be accessed before initialization"

Issue with Access Denied Error in Internet Explorer 11 when Using AngularJS

Having difficulties retrieving the value of the div in the voting system

Customize Python JsonRequest functionality within the Odoo platform

Exclude the data key from form submission based on condition in React