CODEWITHSUNDEEP
jsond3.js
linsannity
linsannity

Reputation: 41

Loading and visualizing data with cal-heatmap

I am trying to use d3.js and cal-heatmap.js to create a visualization, but no matter what data and what format I put in, the colors are not showing up. I can't even get the most basic default visualization to work and see no clear indicators of a problem. I see the calendar and cell template, it's just that they are blank even with data.

Here is a sample of the code:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="cal-heatmap.css">

</head>
<body>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="cal-heatmap.min.js"></script>

    <div id="cal-heatmap"></div>
    <script type="text/javascript">
        var cal = new CalHeatMap();

        cal.init({
            data : "aggregates.json",
            id : "cal-heatmap",
            domain : "month",
            subDomain : "x_day",
            cellsize: 15,
            cellpadding: 3,
            domainGutter: 15
        });
    </script>

</body>
</html>

And a sample of the data.

{
  "1258185600": 2.77,
  "1258272000": 2.52,
  "1258358400": 3.23,
  "1258444800": 2.06,
  "1258617600": 2.62,
  "1258704000": 3.9,
  "1258790400": 3.41,
  "1258963200": 0,
  "1259049600": 0,
  "1259049600": 0,
  "1259136000": 3.16,
  "1259308800": 2.97,
  "1259395200": 2.79,
  "1259481600": 3.65,
  "1259654400": 1.9,
  "1259654400": 1.93,
  "1259740800": 3.46,
  "1259827200": 3.93,
  "1260000000": 4.1
}

Upvotes: 4

Views: 1549

Answers (1)

Wa0x6e
Wa0x6e

Reputation: 1621

The first timestamp in your sample data is from November 2009. You have to customize cal-heatmap to your particular datasource, so that the calendar is displaying the calendar for your data daterange, otherwise it will display a calendar starting from today.

Set the start property to new Date(2009, 10, 1)

Upvotes: 3

Related Questions