cal-heatmap
Cal-Heatmap is a javascript module to create calendar heatmap to visualize time series data
Cal-HeatMap : Javascript calendar heatmap for time series data cal-heatmap is a javascript module to create calendar heatmap to visualize time series data
I have an array of Javascript datetime objects which I want to display on a cal-heatmap. For this, i've done the following:
var startTimes = [] //array of datetimes to show
var cal = new CalHeatMap();
cal.init({
itemSelector: '.heat-map',
domain: 'day',
subDomain: 'hour',
range: range,
start: new Date(startTimes[0]),
highlight: new Date(startTimes[0])
});
for (s in startTimes) {
cal.highlight(cal.options.highlight.push(new Date(startTimes[s])));
}
This however, doesn't seem to work as only the first date gets marked.
Source: (StackOverflow)
In views.py, I have time series data stored in a dictionary as follows:
time_series = {"timestamp1": occurrences, "timestamp2": occurrences}
where each timestamp is in unix time and occurrences is an integer.
Is there a way to pass the time series data as a json object in the context of the render function?
Why do this: I am using Cal-heatmap on the front end which requires the data to be in json format. Ajax requests work just fine for now but I ideally would like to use the render approach if possible.
Source: (StackOverflow)
I am trying out cal-heatmap, and I want to supply a simple array of the legend colors to use, rather than having to define CSS classes for each color.
So far in my testing this doesn't seem possible?
for example, using:
legendColors : ['rgb(103,0,31)','rgb(178,24,43)','rgb(214,96,77)','rgb(244,165,130)','rgb(253,219,199)','rgb(224,224,224)','rgb(186,186,186)','rgb(135,135,135)','rgb(77,77,77)','rgb(26,26,26)'],
Gives me a scale with 10 steps from the first to the second color, ignoring the rest.
Am I missing something simple in the documentation, or is this not possible?
I know that I can create CSS classes, but I don't want to do that - I need to have a dynamic, variable number of categories, with dynamically created colors.
Source: (StackOverflow)
I have cal-heatmap below (+see JSBin) I'm trying to color using data.
var data = {"63556099200":2,"63556185600":4,"63556272000":2,"63556358400":1,"63556704000":2,"63556790400":1,"63556876800":1,"63556963200":1,"63557222400":1,"63557308800":1,"63557827200":1,"63557913600":1,"63558000000":2,"63558086400":1,"63558172800":1,"63559296000":3,"63559728000":2,"63559814400":1,"63559900800":3,"63559987200":1,"63560246400":2,"63560332800":1,"63560419200":2,"63560505600":2,"63560592000":1,"63560937600":1,"63561456000":4,"63561801600":2,"63562060800":2,"63562147200":1,"63562233600":2,"63562320000":1,"63562406400":1,"63562665600":1,"63562752000":1,"63562838400":2,"63562924800":1,"63563270400":2,"63563961600":2,"63564048000":2,"63564134400":3,"63564220800":3,"63564566400":2,"63564739200":2,"63564825600":1,"63565084800":2,"63565171200":1,"63565257600":2,"63565344000":2,"63565430400":3};
var cal = new CalHeatMap();
cal.init({
itemSelector: "#cal",
data: data,
itemName: ["visit", "visits"],
considerMissingDataAsZero: true,
legend: [1, 2, 3, 4],
cellSize: 17,
cellPadding: 2,
domain: "month",
domainGutter: 10,
domainDynamicDimension: false,
domainLabelFormat: function (date) {
return moment(date).format("MMM, YYYY").toUpperCase();
},
subDomain: "x_day",
subDomainTextFormat: "%d",
range: 12,
start: new Date(2015, 0, 1)
});
http://jsbin.com/yixuja/12/edit?html,output
The cal-heatmap seem not to recognize the data as correctly formatted.
What am I missing?
Source: (StackOverflow)
I need to show up to 100 components similar to cal-heatmap calendar with year-month view. It seems that creation of 100 cal-heatmap per paginated table is not good idea due to performance.
The requirement is to show each resource availability within selected interval (eg. Feb15 - May 16) in table view.
What are the best configurable javascript libraries to render sequence of month for each row(100 rows per page).
{% for row in queryset %}
var cal{{ forloop.counter }} = new.CalHeatMap();
cal{{ forloop.counter }}.init(
{id:"cal{{ forloop.counter }}", itemSelector: "#previousSelector-a", previousSelector: "#previousSelector-a-previous", domain: 'day', subDomain:'hour', colLimit: 24, range: 4, displayLegend: false, domainLabelFormat: ""}
);
{% endfor %}
....
{% for row in queryset %}
<div id="cal{{ forloop.counter }}"></div>
{% endfor %}
Source: (StackOverflow)
Is it possible to take a Cal-HeatMap and display the past 30 days in a month domain instead the date-range for that month?
Could custom domains be defined or is this functionality already available? I wasn't able to find anything on the documentation page on github.
I'd appreciate any help, thanks!
Source: (StackOverflow)
Im trying to learn/play with cal-heatmap as a possible project I have to do. However, i am having difficulties with the data.
The webpage is displaying an empty calendar for 2015. My data does not seem to load or display.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="cal-heatmap.min.js"></script>
<link rel="stylesheet" rel='nofollow' href="cal-heatmap.css" />
<div id="cal-heatmap"></div>
<script type="text/javascript">
var cal = new CalHeatMap();
cal.init({
data: "mal1jan2015.csv",
dataType: "csv",
start: new Date(2015, 0),
id : "graph_c",
domain : "month", // Group data by month
subDomain : "day", // Split each month by days
range : 12,
cellSize: 15,
domainGutter: 10,
cellRadius: 15,
scale: [150, 300, 450, 600],
});
</script>
</body>
</html>
And my data is as follow:
20150101,181
20150102,153
20150103,145
20150104,148
20150105,145
20150106,147
...
Im leaning towards that the dates in the first column of csv are not in the correct format. However, im not really certain how to integrate a conversion script that would do yyyymmdd -> seconds since July 1st, 1970 and be proper for cal-heatmap.
Source: (StackOverflow)
As a newbie to both d3 and js, or just front-end in general, I have spent enough time to basically understand how Cal-heatmap works. I have a working version, but really want to make the tiny boxes on the calendar hyperlinks for extra functionality, and reading the source code was a complete disaster for me. I suppose I should add .attr("xlink:href", url) to some object as suggested here, but I really can't figure out where. Is there anyone that has done something similar? Also I don't really understand how attributes I specify when initializing is passed through to the source code either. Any help is appreciated!
Source: (StackOverflow)
I'm trying to include both Date and Value in the same cell using Cal-HeatMap
Here is a fiddle example of what I'm trying to do ....
[https://jsfiddle.net/paulrollings/6L36ajhn/12/][2]
Any advice help greatly appreciated. Thanks Paul
Source: (StackOverflow)
I'm getting started with d3 and cal-heatmap and have an issue both related to data.
According to the documentation (http://kamisama.github.io/cal-heatmap/#data-format) data need to be supplied in a format like this http://kamisama.github.io/cal-heatmap/datas-years.json
I'm using LinqPad4:
int userId = 4;
DateTime start = new DateTime(2015, 1 , 2);
DateTime end = new DateTime(2015, 6, 30);
var result = (from r in Response
where (r.RespondentUserId == userId)
&& (r.ResponseBegin >= start)
&& (r.ResponseBegin <= end)
group r by new { date = r.ResponseBegin.Date } into grp
select new
{
Ticks = grp.Key.date.Ticks,
Reports = grp.Count()
})
.ToList()
.Select (r => new
{
timestamp = new TimeSpan(r.Ticks).TotalSeconds,
value = r.Reports
});
new JavaScriptSerializer().Serialize(result).Dump();
Which produce this format:
[{"timestamp":63556099200,"value":2},{"timestamp":63556185600,"value":4},{"timestamp":63556272000,"value":2},{"timestamp":63556358400,"value":1},{"timestamp":63556704000,"value":2},{"timestamp":63556790400,"value":1},{"timestamp":63556876800,"value":1},{"timestamp":63556963200,"value":1},{"timestamp":63557222400,"value":1},{"timestamp":63557308800,"value":1},{"timestamp":63557827200,"value":1},{"timestamp":63557913600,"value":1},{"timestamp":63558000000,"value":2},{"timestamp":63558086400,"value":1},{"timestamp":63558172800,"value":1},{"timestamp":63559296000,"value":3},{"timestamp":63559728000,"value":2},{"timestamp":63559814400,"value":1},{"timestamp":63559900800,"value":3},{"timestamp":63559987200,"value":1},{"timestamp":63560246400,"value":2},{"timestamp":63560332800,"value":1},{"timestamp":63560419200,"value":2},{"timestamp":63560505600,"value":2},{"timestamp":63560592000,"value":1},{"timestamp":63560937600,"value":1},{"timestamp":63561456000,"value":4},{"timestamp":63561801600,"value":2},{"timestamp":63562060800,"value":2},{"timestamp":63562147200,"value":1},{"timestamp":63562233600,"value":2},{"timestamp":63562320000,"value":1},{"timestamp":63562406400,"value":1},{"timestamp":63562665600,"value":1},{"timestamp":63562752000,"value":1},{"timestamp":63562838400,"value":2},{"timestamp":63562924800,"value":1},{"timestamp":63563270400,"value":2},{"timestamp":63563961600,"value":2},{"timestamp":63564048000,"value":2},{"timestamp":63564134400,"value":3},{"timestamp":63564220800,"value":3},{"timestamp":63564566400,"value":2},{"timestamp":63564739200,"value":2},{"timestamp":63564825600,"value":1},{"timestamp":63565084800,"value":2},{"timestamp":63565171200,"value":1},{"timestamp":63565257600,"value":2},{"timestamp":63565344000,"value":2},{"timestamp":63565430400,"value":3}]
Can a linq query produce the correct format directly?
Source: (StackOverflow)