CODEWITHSUNDEEP
jqueryd3.jsheatmap
sephiith
sephiith

Reputation: 1197

csv implementation with cal-heatmap jquery

I have been attempting to use cal-heatmap with a csv to display data. However nothing seems to make it work. There are no errors in the console.

cal-heatmap: http://kamisama.github.io/cal-heatmap/ Does anyone have any clue on how to make it work with csv files? Or even have an example with a csv? Does anyone have any alternatives that are easily to implement with Google Analytics?

THE CODE:

<html>
    <head>
    <link rel="stylesheet" href="cal-heatmap.css" />
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="cal-heatmap.min.js"></script>
    </head>
    <body>
<div id="cal-heatmap"></div>
<script type="text/javascript">
    var cal = new CalHeatMap();
    cal.init({
    data: "test.csv",
    dataType: "csv",
    start: new Date(2013, 0),
    domain : "day",
    subDomain : "hour",
    itemName: ["visit", "visits"],
    range : 12,
    cellsize: 15,
    cellpadding: 3,
    cellradius: 5,
    domainGutter: 15,
    weekStartOnMonday: 0,
    scale: [40, 60, 80, 100]
    });
</script>

    </body>
</html>

FORMAT OF CSV:

Hour,Visits
000000,53
000001,40
000002,58
000003,45
000004,35
000005,37
000006,41

Upvotes: 1

Views: 1376

Answers (2)

Wa0x6e
Wa0x6e

Reputation: 1621

Yes, Cal-heatmap does only understand data formatted like a JSON object.

BUT, you can set the dataType to csv, and use the csv parser, as in your example. The reason it doesn't works out of the box is because after parsing, the resulting JSON object returned by d3.csv() do have keys, and looks like that :

[
    {
        "Hour": 000000,
        "Visits": 53
    },
    ...
]

You'll need to convert that back to something like that:

{
    "000000": 53,
    ...
}

Use the following function as your afterLoad() callback:

function(data) {
    "use strict";

    var d = {};
    var keys = Object.keys(data[0]);
    var i, total;
    for (i = 0, total = data.length; i < total; i++) {
        d[data[i][keys[0]]] = parseInt(data[i][keys[1]], 10);
    }
    return d;
}

That will take care of the conversion. This function will work only if the first column is the timestamp, and the second column, the value. Adjust keys[n] to your need if your CSV has a different structure.

AFAIK, Google Analytics does not use timestamp, so you have to incorporate the timestamp conversion in the function above.

Future version of Cal-Heatmap will do this conversion automatically.

Upvotes: 4

user1614080
user1614080

Reputation: 2874

From the Cal-HeatMap site

Cal-Heatmap only understand data formatted in a JSON object like

However, you could use d3's d3.csv function to import your csv data into the format you need (although I haven't tested this).

Upvotes: 1

Related Questions