2

Estoy tratando de rellenar el calendario HeatMap (http://cal-heatmap.com/) con datos dinámicos. A través de un fichero con distintas fechas, recopilo todas ellas y las convierto a milisegundos, para crear el par clave-valor que se requiere para el calendario. Esta conversión la realizo de la siguiente manera:

var aux = {};
var dataJSON = {};
for(var i=0; i<activity.length; i++) {
   var date = new Date(activity[i].date);  // Fecha de la actividad
   var ms = date.getTime();                // Convertir en ms la fecha
   aux[ms] = 1;                            // Crear el par "clave-valor" para los datos del calendario
   dataJSON = JSON.stringify(aux);         // Convertir a formato JSON
}

Si imprimo el resultado de dataJSON, me devuelve un objeto con el formato que se requiere:

{"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};

Sin embargo, no se observa el resultado en el calendario. Éste está configurado de la siguiente manera:

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

Lo curioso es que he probado metiendo los siguientes datos estáticos y sí que funciona:

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};

Espero que podáis ayudarme a encontrar el error!! Muchas gracias de antemano.

EDIT: Obtengo un error GET de d3.js

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

Aborted

1 respuesta 1

0

La conversión del par "clave-valor" debe ser incluida en una función y configurar el calendario con la función afterLoadData(data). Con mi ejemplo quedaría algo así:

var parserData = function (data) {
   var dataJSON = {};

   for(var i=0; i<data.length; i++) {
      var date = new Date(data[i].date); // Fecha de la actividad 
      var seg = date.getTime()/1000; // Convertir en seg la fecha

      // Crear el par "clave-valor" para los datos del calendario
      if(dataJSON[seg]) {
         dataJSON[seg]++;
      } else {
         dataJSON[seg] = 1;
      }
   }

   return dataJSON;
}

var cal = new CalHeatMap();
cal.init({
   itemSelector: "#cal-heatmap",
   domain: "month",
   subDomain: "x_day",
   data: activity_sorted_by_date, // Array con los datos sin convertir
   afterLoadData: parserData      // Función que realiza la conversión
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.