I'm trying to plot calendar-heatmap from this link.

I searched all over the documenation but i couldn't find any sample file for the data-format.

Here's a link for documentation but there's no sample file for it.

In the documentation I find this data being imported datas-years.json. But I don't have any clue on how the format is. Someone please help me on this.

I'm trying to plot calendar-heatmap from this link.

I searched all over the documenation but i couldn't find any sample file for the data-format.

Here's a link for documentation but there's no sample file for it.

In the documentation I find this data being imported datas-years.json. But I don't have any clue on how the format is. Someone please help me on this.

• javascript
• json
• d3.js
• calendar
• heatmap

4 Answers 4

Cal-Heatmap expects data in a JSON object in the following format:

{
    "timestamp1": value1,
    "timestamp2": value2,
    "timestamp3": value3,
    ...
}

Value can be any number (integer or float).

All timestamp are in seconds. Seconds are 'UTC seconds' (sometimes also called 'epoch seconds' or 'unix seconds') as the number of seconds since at 01-01-1970 00:00:00 for the GMT date/time provided. Here is UTC second calculator.

Today we are around 1.388.000.000 UTC seconds. The sample on the site shows data from year 2000, that is why its UTC seconds are around 946.000.000 as you saw in the JSON file sample.

Good thing is that you can find easily on the internet how to obtain UTC seconds from other time formats, and than you will be able to create a data file that Cal-Heatmap expects. :)

Here is a random test program to randomly generate the json file.

Scenario: Show submission 12 months hence including the current month. If you have defined start -> point it to the month 11 months before the current month and the json file should work perfectly.

var data = generateRandomData();

            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }


            function generateRandomData(){
                var date = new Date();

                var mind = date.valueOf();
                var maxd = date.setMonth(date.getMonth() - 11);

                var mins = 0;
                var maxs = 40;

                var retobj = {};

                for(var i=0;i<100;i++){
                    retobj[getRandomInt(mind,maxd)/1000] = getRandomInt(mins,maxs);
                }

                return retobj;
            }

Cal-heatmap expects data in JSON format

{
    "timestamp1": value1,
    "timestamp2": value2,
    "timestamp3": value3,
    ...
}

As already said, timestamps should always be in seconds, and not in milliseconds (javascript default).

You either put your data in a file, then pass that file in the data option, or directly pass a javascript variable:

var d = {946705035: 25};
var cal = new CalHeatMap();
cal.init({data: d}); // For variable
cal.init({data: "path/to/file.json"}) // For file, or URI

Cal-heatmap can also understand file in CSV and TSV.

In the case cal-heatmap don't/can't understand your data:

If the data is from a variable

Convert your data in javascript to a JSON object before passing it to Cal-heatmap

If the data is from a file/uri

Set the right datatype, then use the after afterLoadData() callback to read the file and convert the text to a json object.

datatype specify the parser engine used to read the file. If your file is json, csv, or tsv formatted, set it to json, etc... else, set it to txt to read the file as plain text.

You can study the Google Analytics example, it illustrates the use of data, datatype, and afterLoadData() callback.

You can retrieve the JSON file directly and inspect it at http://kamisama.github.io/cal-heatmap/datas-years.json.