wa0x6e / cal-heatmap Goto Github PK
View Code? Open in Web Editor NEWCal-Heatmap is a javascript charting library to create a time-series calendar heatmap
Home Page: http://cal-heatmap.com
License: MIT License
Cal-Heatmap is a javascript charting library to create a time-series calendar heatmap
Home Page: http://cal-heatmap.com
License: MIT License
It would really help if there would be be configurable the possibility to have a better visual "domain" day separator. Maybe more space, or a vertical line, or even a thick border like http://boothead.github.io/d3/ex/calendar.html
If the domain is a month, this doesn't seems to be a problem that much, but in the case of days, users complain that they can't easily distinct the day ranges very well.
Is there any way to configure the number of rows in a subdomain?
I am really looking to be able to rebuild heatmaps like... http://bl.ocks.org/tjdecke/5558084
Is this possible?
Is it possible to configure the cal-heatmap to look like it's configured for browsing (with next and previous buttons), but to do just a scrolling instead of the already loaded data?
I.e. to not load anything new from server, but just to scroll with one domain to the left or the right?
Thank you.
onClick: function(date, nb) {
console.log(nb);
}
After using 'prev' and 'next' buttons (previousSelector and nextSelector)
onClick event is triggered with a wrong 'nb' items numbers
Browsers : firefox, chromium
Please add support for the cal-heatmap to gracefully handle null values too.
See this example: http://jsfiddle.net/aadrian/4aDdJ/5/
The last 3 elements from the data array are "null", so they should be rendered with gray (like those who are missing).
Thanks in advance.
When viewing the heatmap, grouped by months, it makes sense to view it in calendar format where the rows represent weeks and the columns represent days of the week.
Here's an example.
I was hoping an option could be added to allow this behavior.
I'm working on this now but I wanted to ping you to see what you thought. I figured you'd probably be able to knock it out faster than I can.
When browsing across a large set of domains / subdomains, I'd like to have a function that I can pass a date to and the heatmap will seek to the start of the matching domain. Similar to how "start" works on init, but the seek function could be used anytime after the heatmap has been rendered. Right now I'm using .next() repeatedly, but this can be pretty slow if the domain I'm seeking is dozens of "next()" calls away.
Total enhancement - but I thought I'd see if it's possible!
Thanks!
Lucas
It wold be very useful to have an afterSVGRender event/callback. It seems that except the very simple examples, the rendering of cal-heatmap colors takes a few seconds (this seems to me like a general D3 problem)
Such an event would be helpful to be able to highlight or stop a progress indicator or some way to inform the user that a report is really ready.
Thanks in advance.
Support to vertically render/order the elements (now cal-heatmap has only "horizontal" support)
See #10
This option would be quite practical not just for the month/week grouping:
Your project is super cool. I was playing around for a while, and I still can't get multiple years plot.
I want to see every day of a year, So I am using domain: year, subDomain: day, then I got the heat map for the year. How can I get second year's heat map below the first year?
I want to use your style, and I can set a year range. Just like d3 calendar view example:
http://bl.ocks.org/mbostock/4063318
Hi,
Is it possible to loosen the d3 requirement in bower.json to >3.0.6 ? So we can use the newer 3.3 version of d3.
I'm experiencing this separately in my own code, but the bug is also demonstrated by your examples:
http://kamisama.github.io/cal-heatmap/#examples
Year > day view.
Shows there is clearly data in December.
Year > Month view.
Shows no data in December.
They both use the exact same dataset (datas-years.json). Why isn't December showing any data in the Month View (even on hover - acts like there is no data in December - 0 Items).
Thanks!
Lucas
Suppose we initialize a calendar with
itemName: ["bug", "bugs"]
Then the following will display on the calendar:
The first three are correct. The last is incorrect. It should read "0 bugs". Line 825 needs to be changed from:
name: parent.options.itemName[(data[domainUnit][subDomainUnit] > 1 ? 1 : 0)],
to
name: parent.options.itemName[(data[domainUnit][subDomainUnit] > 1 || domain[Unit][subDomainUnit] == 0 ? 1 : 0)],
With this domain configuration odd groupings appear in relation to those with the wider widths, that span 5 vertical weeks. Pretty sure its down to 'w(d, true) * i' style lines when calculating the x offset as this assumes that the previous months had the same larger widths.
Great plugin by the way.
Hi @Kamisama,
is it possible to display names of the days of the week in month > day or month > x_day view, like the one in GitHub's contributions calendar?
Thank you so much for your effort on this library.
Cheers!
Add option to consider no value as 0
I can only call next() 15 times on the following configuration:
cal.init({
itemSelector: "#calvis",
domainMargin: 3,
domain: "month",
subDomain: "x_day",
legend: [1, 5, 10, 20],
displayLegend: false,
range: 6,
start: new Date(calStart, 0, 1),
data: cal_data,
nextSelector: "#cal-next",
previousSelector: "#cal-prev"
})
I tried with other combinations and mostly they work, just month/day doesn't.
Hi there,
first of all thanks for this great library. I was looking for such a D3.js calendar wrapper and cal-heatmap seems to be the perfect choice.
I am using the "data" attribute to call a method with the available template strings {d:start}
and {d:end}
. But the template variables won't get replaced. Am I missing something? Here is my configuration for the heatmap:
cal.init({
domain: "month",
subDomain: "x_day",
range: 1,
data: "http://localhost/api?start={d:start}&stop={d:stop}",
cellSize: 25,
start: new Date(),
highlight: "now",
subDomainTextFormat: "%d",
previousSelector: "#PreviousDomain-selector",
nextSelector: "#NextDomain-selector",
label: {
position: "top",
offset: {
x: 0,
y: 0
}
},
legend: [2, 4, 7],
});
The URL gets passed to the d3_xhr
method, without the selected date range:
[19/Aug/2013 06:38:12] "GET /api?start={d:start}&stop={d:stop} HTTP/1.1" 404 186064
ps. This is more a question than a bug ticket.
Thanks a lot for your help.
Kind regards
Henning
Hello! cal-heatmap is awesome! Thank you so much for your effort.
Can you add an option to disable the domain labels and to tweak the domainVerticalLabelHeight and domainHorizontalLabelWidth?
I am creating multiple cals and I am using a week/x_day setup with 4 weeks shown at a time. I stack the multiple cals vertically and each row has data from a different source. This allows for easy comparison. The domain label is only needed on top of the first row and on the bottom of the second row.
I was able to add the option myself, but it feels hacky. I am not sure what the 'right' way you would want to do this.
Thank you!
Please add support to to allow to easily internationalize with cal-heatmap!
Thanks in advance.
With the time change today in the US, I get some fun bugs with a domain of day and subdomain of hour. Earlier today, I end up with only 23 visible subdomains as there end up being 2 at the 1am hour.
Now that it's the next day, I get a js trace on line 2438 because there is a 25th hour in the day and it can't find the 25th hour in the list of subdomains.
Highcharts: http://www.highcharts.com/demo/ has a very nice SVG Export functionality and API.
Would be useful if cal-heatmap would have this functionality too (only the client part - of course).
"browsing", i.e. if the user clicks the "previous" or "next" arrows/buttons, triggers by default a complete reload of the complete data set (see your header example).
Would be useful if the behavior would be different:
Hey there,
I am trying to update the highlighted cells after I initially executed a calendar init. How can I do this. I am missing an setHighlight()-Method.
Thanks a lot for this awesome calendar heatmap.
Cheers
Max
Hi,
'null' values are not interpreted as "empty" cells by the rendering.
Using:
cellLabel : {
empty: "No data on {date}",
filled: "{count} {name} {connector} {date}"
}
doesn't seem to apply the "empty" property on those cells.
Please see here: http://jsfiddle.net/aadrian/4aDdJ/6/
The tooltip for 9 Aug displays "0 item ..." whereas that for 10 Aug it displays correctly "No data on .."
Thanks in advance.
Is it possible somehow to split horizontal or vertical year column in 2 parts to make it more visible/convenient for users? It's too long at the moment if I want to show all 12 months in the column, so users should scroll it down all time.
I am building a single page web application and have been trying to track down a memory leak in cal-heatmap when removing the svg ele from the DOM. It seems there is a circular reference somewhere that is causing some elements not to get garbage collected properly. I wanted to see if you could help me add a functuon to CalHeatMap to remove the object from the DOM and tracking down the leak. Here is a heap dump of issue.
DUMP: https://dl.dropboxusercontent.com/u/38088/Heap-20131024T234323.heapsnapshot.zip
Could you please clarify the data format that cal-heatmap is expecting?
If I download your JSON, that seems to work, but if I generate timestamps with values, they don't seems to be rendered, but also no error messages seems to appear in the console:
My HTML file: https://gist.github.com/aionescu/10a1be90f135ccabc867
My JSON file: https://gist.github.com/aionescu/3ea6a5d7849b14569037
I just included cal-heatmap using Bower: bower install cal-heatmap
, so it fetched automatically the required dependencies(d3), so that's why they're in the "components" directory.
Subdomain data is parsed incorrecelty leading to a larger index than exists in "parseDatas".
Using the following calendar configuration:
var calMonth3 = new CalHeatMap();
calMonth3.init({
itemSelector: "#cal-heatmap-month-3",
domain: "day",
cellSize: 12,
start: new Date(1382479200*1000),
range: 11,
subDomain: "x_hour",
data: "seeblow.json",
onClick: function (date,nb) {
updateTime(date);
},
legend: [0,1,10,100]
});
and the following data set:
{"1382510304":0,"1382510359":0,"1382510660":0,"1382510961":0,"1382511263":0,"1382511560":0,"1382511846":1,"1382512162":0,"1382512439":1,"1382512757":0,"1382513059":0,"1382513359":0,"1382513657":0,"1382513958":0,"1382514257":0,"1382514565":0,"1382514835":1,"1382515159":0,"1382515459":0,"1382515765":0,"1382517836":1,"1382518162":0,"1382518460":0,"1382518765":0,"1382519063":0,"1382519365":0,"1382519667":0,"1382519960":0,"1382520263":0,"1382520560":0,"1382520854":0,"1382521169":0,"1382521461":0,"1382521798":0,"1382522082":1,"1382522557":1,"1382522767":1,"1382523123":1,"1382523445":1,"1382523580":1,"1382523879":1,"1382524287":1,"1382524479":1,"1382524779":1,"1382525079":1,"1382525380":1,"1382525679":1,"1382525979":1,"1382526258":1,"1382526558":1,"1382526858":1,"1382527160":1,"1382527458":1,"1382527757":1,"1382528057":1,"1382528358":1,"1382528657":1,"1382529563":1,"1382529860":1,"1382530192":0,"1382530488":0,"1382530782":0,"1382531083":0,"1382531390":0,"1382531684":0,"1382531982":0,"1382532286":0,"1382532585":0,"1382532880":0,"1382533187":0,"1382533498":0,"1382533782":0,"1382534085":1,"1382534389":0,"1382534698":0,"1382535276":1,"1382535318":0,"1382535596":0,"1382535896":0,"1382536186":0,"1382536490":0,"1382536815":0,"1382537366":1,"1382537408":0,"1382537689":0,"1382537986":0,"1382538286":0,"1382538581":0,"1382538885":0,"1382539179":0,"1382539487":0,"1382539781":0,"1382540081":0,"1382540384":0,"1382540682":0,"1382540986":0,"1382541279":0,"1382541580":0,"1382541881":0,"1382542182":0,"1382542481":0,"1382542779":0,"1382543084":0,"1382597368":0,"1382597407":0,"1382598279":0,"1382598575":0,"1382598856":1,"1382599152":1,"1382599473":0,"1382599771":0,"1382600093":0,"1382600388":0,"1382600686":0,"1382600998":0,"1382601309":0,"1382601586":1,"1382602486":0,"1382602798":0,"1382603087":0,"1382603460":0,"1382603674":0,"1382604042":1,"1382604306":0,"1382604553":1,"1382604877":0,"1382605176":0,"1382605474":0,"1382605781":0,"1382606070":0,"1382606380":0,"1382606675":0,"1382606975":0,"1382607276":0,"1382607571":0,"1382607887":0,"1382608174":0,"1382608478":0,"1382608783":0,"1382609079":0,"1382609374":0,"1382609676":0,"1382609972":0,"1382610278":0,"1382610574":0,"1382610878":0,"1382611178":0,"1382611485":0,"1382611779":0,"1382612078":0,"1382612372":0,"1382612678":0,"1382612973":0,"1382613273":0,"1382613579":0,"1382613876":0,"1382618080":0,"1382618382":0,"1382618676":0,"1382618982":0,"1382619282":1,"1382619578":0,"1382619891":0,"1382620180":0,"1382620480":0,"1382620775":0,"1382621085":0,"1382621378":0,"1382621678":0,"1382621977":0,"1382622283":0,"1382622572":0,"1382622880":0,"1382623182":0,"1382623474":0,"1382623805":0,"1382624078":0,"1382624376":0,"1382624686":0,"1382624973":0,"1382625276":0,"1382625586":0,"1382625876":0,"1382626172":0,"1382626477":0,"1382626769":0,"1382627078":0,"1382627373":0,"1382627676":0,"1382627978":0,"1382684241":0,"1382684377":0,"1382684659":1,"1382684974":0,"1382685256":1,"1382685573":0,"1382685908":0,"1382686172":0,"1382686478":0,"1382686774":0,"1382687071":0,"1382687379":0,"1382688881":0,"1382689193":0,"1382689453":1,"1382689777":0,"1382690089":0,"1382690375":0,"1382690677":0,"1382691043":0,"1382691340":0,"1382691592":0,"1382691729":1,"1382691874":0,"1382691860":1,"1382691968":1,"1382692051":1,"1382692473":0,"1382692776":0,"1382693084":0,"1382693392":0,"1382693687":0,"1382694007":0,"1382694269":1,"1382694583":0,"1382694883":0,"1382695198":0,"1382695498":0,"1382695757":1,"1382696099":0,"1382696072":1,"1382696133":1,"1382696372":0,"1382696684":0,"1382696987":0,"1382697274":0,"1382697571":0,"1382701420":1,"1382701444":1,"1382701477":0,"1382701490":1,"1382701774":0,"1382701785":1,"1382701835":1,"1382701886":0,"1382701901":1,"1382702019":0,"1382702079":0,"1382702443":0,"1382702562":0,"1382702630":0,"1382702687":0,"1382702811":0,"1382702864":0,"1382702979":0,"1382703011":0,"1382703074":1,"1382703217":0,"1382703255":0,"1382703280":0,"1382703580":0,"1382703877":0,"1382704262":1,"1382704475":0,"1382704779":0,"1382705077":0,"1382705376":0,"1382705976":0,"1382706289":0,"1382706576":0,"1382707215":0,"1382707253":0,"1382707473":0,"1382707770":1,"1382708080":0,"1382708373":0,"1382708675":0,"1382708973":0,"1382709276":0,"1382709576":0,"1382709872":0,"1382710173":0,"1382710472":0,"1382710780":0,"1382711074":0,"1382711375":0,"1382711675":0,"1382711971":0,"1382712297":0,"1382712582":0,"1382712874":0,"1382713170":0,"1382713479":0,"1382713773":0,"1382714074":0,"1382714107":0,"1382714826":0,"1382714821":0,"1382714912":0,"1382715418":0,"1382715411":0,"1382715518":0,"1382715989":1,"1382716012":0,"1382716114":0,"1382716585":1,"1382716614":0,"1382716711":0,"1382717189":1,"1382717207":0,"1382717315":0,"1382717785":1,"1382717810":0,"1382717911":0,"1382718386":1,"1382718592":1,"1382718518":0,"1382718989":1,"1382719014":0,"1382719113":0,"1382719586":1,"1382719611":0,"1382719714":0,"1382720184":1,"1382720209":0,"1382720311":0,"1382720788":1,"1382720810":0,"1382720916":0,"1382721410":0,"1382721412":0,"1382721515":0,"1382721987":1,"1382722010":0,"1382722112":0,"1382722585":1,"1382722614":0,"1382722717":0,"1382723193":1,"1382723217":0,"1382723315":0,"1382723815":0,"1382723816":0,"1382723913":0,"1382724386":1,"1382724412":0,"1382724515":0,"1382724987":1,"1382725009":0,"1382725112":0,"1382725619":0,"1382725716":0,"1382726209":0,"1382726206":0,"1382726327":0,"1382726815":0,"1382726808":0,"1382726913":0,"1382727426":0,"1382727427":0,"1382727514":0,"1382728067":0,"1382728105":0,"1382728115":0,"1382728613":0,"1382728612":0,"1382728711":0,"1382729193":1,"1382729219":0,"1382729315":0,"1382729785":1,"1382729810":0,"1382729918":0,"1382730390":1,"1382730410":0,"1382730516":0,"1382730995":1,"1382731012":0,"1382731120":0,"1382731585":1,"1382731611":0,"1382731717":0,"1382732212":0,"1382732216":1,"1382732317":0,"1382732795":1,"1382732783":1,"1382732911":0,"1382733406":0,"1382733407":0,"1382733514":0,"1382734001":1,"1382734016":0,"1382734118":0,"1382734610":0,"1382734590":1,"1382734711":0,"1382735185":1,"1382735205":0,"1382735311":0,"1382735789":1,"1382735821":0,"1382735911":0,"1382736421":0,"1382736419":0,"1382736518":0,"1382736985":1,"1382737006":0,"1382737116":0,"1382737607":0,"1382737614":0,"1382737711":0,"1382738213":0,"1382738207":0,"1382738314":0,"1382738786":1,"1382738805":0,"1382738911":0,"1382739421":0,"1382739419":0,"1382739522":0,"1382739989":1,"1382740025":0,"1382740114":0,"1382740583":1,"1382740609":0,"1382740714":0,"1382741192":1,"1382741210":0,"1382741319":0,"1382741803":0,"1382741811":0,"1382741920":0,"1382742384":1,"1382742470":0,"1382742514":0,"1382743020":0,"1382743117":0,"1382743639":0,"1382743608":0,"1382743713":0,"1382744185":1,"1382744209":0,"1382744316":0,"1382744791":1,"1382744814":0,"1382744935":0,"1382745385":1,"1382745406":0,"1382745515":0,"1382745984":1,"1382746004":0,"1382746130":0,"1382746619":0,"1382746614":0,"1382746714":0,"1382747217":0,"1382747212":0,"1382747325":0,"1382747785":1,"1382747811":0,"1382747913":0,"1382748409":0,"1382748419":1,"1382748522":0,"1382749012":0,"1382749004":0,"1382749125":0,"1382749616":0,"1382749612":0,"1382749719":0,"1382750225":0,"1382750213":0,"1382750313":0,"1382750786":1,"1382750811":0,"1382750914":0,"1382751415":0,"1382751397":1,"1382751513":0,"1382751992":1,"1382752018":0,"1382752116":0,"1382752610":0,"1382752603":0,"1382752711":0,"1382753193":1,"1382753219":0,"1382753314":0,"1382753817":0,"1382753815":0,"1382753910":0,"1382754385":1,"1382754417":0,"1382754522":0,"1382755014":0,"1382755009":0,"1382755116":0,"1382755613":0,"1382755716":0,"1382756214":0,"1382756203":0,"1382756317":0,"1382756794":1,"1382756816":0,"1382756903":1,"1382757392":1,"1382757417":0,"1382757512":0,"1382757985":1,"1382758011":0,"1382758121":0,"1382758610":0,"1382758615":0,"1382758715":0,"1382759204":0,"1382759273":1,"1382759344":0,"1382759784":1,"1382759808":0,"1382759914":0,"1382760392":1,"1382760414":0,"1382760512":0,"1382761014":0,"1382761008":0,"1382761122":0,"1382761587":1,"1382761617":0,"1382761712":0,"1382762208":0,"1382762211":0,"1382762320":0,"1382762787":1,"1382762812":0,"1382762913":0,"1382763387":1,"1382763409":0,"1382763516":0,"1382763989":1,"1382764022":0,"1382764115":0,"1382764586":1,"1382764609":0,"1382764716":0,"1382765185":1,"1382765222":0,"1382765314":0,"1382765814":0,"1382765808":0,"1382765916":0,"1382766384":1,"1382766409":0,"1382766512":0,"1382766992":1,"1382767015":0,"1382767110":0,"1382767610":0,"1382767612":0,"1382767717":0,"1382768184":1,"1382768228":0,"1382768318":0,"1382768794":1,"1382768815":0,"1382768917":0,"1382769561":0,"1382769412":0,"1382769517":0,"1382769985":1,"1382770014":0,"1382770115":0,"1382770615":0,"1382770613":0,"1382770699":1,"1382771216":0,"1382771212":0,"1382771317":0,"1382771784":1,"1382771790":1,"1382771916":0,"1382772393":1,"1382772409":1,"1382772515":0,"1382772993":1,"1382773023":0,"1382773119":0,"1382773606":0,"1382773602":0,"1382773697":1,"1382774192":1,"1382774215":0,"1382774315":0,"1382774791":1,"1382774807":0,"1382774913":0,"1382775385":1,"1382775408":0,"1382775510":0,"1382776012":0,"1382775993":1,"1382776112":0,"1382776583":1,"1382776621":0,"1382776711":0,"1382777184":1,"1382777210":1,"1382777311":0,"1382777810":0,"1382777911":0,"1382778403":0,"1382778385":1,"1382778536":0,"1382778985":1,"1382779014":0,"1382779111":0,"1382779620":0,"1382779597":1,"1382779716":0,"1382780184":1,"1382780206":0,"1382780314":0,"1382780804":0,"1382780806":0,"1382780909":0,"1382781388":1,"1382781410":0,"1382781512":0,"1382782006":0,"1382782002":0,"1382782118":0,"1382782586":1,"1382782580":1,"1382782712":0,"1382783222":0,"1382783216":0,"1382783315":0,"1382783813":0,"1382783808":0,"1382783917":0,"1382784388":1,"1382784414":0,"1382784515":0,"1382784989":1,"1382785011":0,"1382785115":0,"1382785605":0,"1382785607":0,"1382785709":0,"1382786193":1,"1382786218":0,"1382786314":0,"1382786794":1,"1382786817":0,"1382786913":0,"1382787408":0,"1382787402":0,"1382787525":0,"1382787991":1,"1382788009":0,"1382788115":0,"1382788592":1,"1382788609":0,"1382788714":0,"1382789186":1,"1382789205":0,"1382789314":0,"1382789822":0,"1382789819":0,"1382789918":0,"1382790393":1,"1382790418":0,"1382790511":0,"1382791093":0,"1382791003":0,"1382791145":1,"1382791614":0,"1382791615":0,"1382791715":0,"1382792213":0,"1382792214":1,"1382792312":0,"1382792785":1,"1382792807":0,"1382792915":0,"1382793393":1,"1382793416":0,"1382793515":0,"1382793990":1,"1382794020":0,"1382794115":0,"1382794585":1,"1382794606":0,"1382794792":0,"1382795219":0,"1382795214":0,"1382795312":0,"1382795814":0,"1382795812":0,"1382795914":0,"1382796404":0,"1382796403":0,"1382796514":0,"1382797014":1,"1382797016":0,"1382797114":0,"1382797586":1,"1382797611":0,"1382797714":0,"1382798211":0,"1382798209":1,"1382798310":0,"1382798792":1,"1382798808":0,"1382798916":0,"1382799385":1,"1382799406":0,"1382799515":0,"1382799984":1,"1382800015":0,"1382800113":0,"1382800593":1,"1382800615":0,"1382800711":0,"1382801185":1,"1382801210":0,"1382801312":0,"1382801785":1,"1382801807":0,"1382801912":0,"1382802414":0,"1382802417":0,"1382802518":0,"1382802984":1,"1382803008":0,"1382803113":0,"1382803609":0,"1382803613":0,"1382803716":0,"1382804192":1,"1382804215":0,"1382804311":0,"1382804809":0,"1382804808":0,"1382804915":0,"1382805415":0,"1382805516":0,"1382806007":0,"1382805989":1,"1382806113":0,"1382806585":1,"1382806614":0,"1382806711":0,"1382807192":1,"1382807217":0,"1382807313":0,"1382807812":0,"1382807796":1,"1382807913":0,"1382808407":1,"1382808408":0,"1382808515":0,"1382808992":1,"1382809017":0,"1382809114":0,"1382809615":0,"1382809609":0,"1382809712":0,"1382810185":1,"1382810205":0,"1382810315":0,"1382810815":0,"1382810813":1,"1382810915":0,"1382811394":1,"1382811422":0,"1382811516":0,"1382811990":1,"1382812013":0,"1382812118":0,"1382812591":1,"1382812615":0,"1382812716":0,"1382813207":0,"1382813206":0,"1382813322":0,"1382813784":1,"1382813807":0,"1382813921":0,"1382814388":1,"1382814408":0,"1382814516":0,"1382814985":1,"1382815017":0,"1382815122":0,"1382815584":1,"1382815668":0,"1382815711":0,"1382816216":0,"1382816211":0,"1382816310":0,"1382816831":0,"1382816825":0,"1382816913":0,"1382817385":1,"1382817404":0,"1382817512":0,"1382817993":1,"1382818009":0,"1382818134":0,"1382818585":1,"1382818606":1,"1382818716":0,"1382819207":0,"1382819208":0,"1382819311":0,"1382819793":1,"1382819815":0,"1382819911":0,"1382820384":1,"1382820405":0,"1382820522":0,"1382821014":0,"1382821013":0,"1382821113":0,"1382821592":1,"1382821616":0,"1382821709":0,"1382822214":0,"1382822210":0,"1382822311":0,"1382822793":1,"1382822812":0,"1382822914":0,"1382823413":0,"1382823417":0,"1382823518":0,"1382823986":1,"1382824011":0,"1382824109":0,"1382824615":0,"1382824609":0,"1382824714":0,"1382825193":1,"1382825211":0,"1382825315":0,"1382825815":0,"1382825811":0,"1382825915":0,"1382826389":1,"1382826420":0,"1382826515":0,"1382826992":1,"1382827014":0,"1382827134":0,"1382827586":1,"1382827611":0,"1382827719":0,"1382828211":0,"1382828210":0,"1382828314":0,"1382828818":0,"1382828811":0,"1382828921":0,"1382829385":1,"1382829419":0,"1382829522":0,"1382830017":0,"1382830016":0,"1382830119":0,"1382830584":1,"1382830621":0,"1382830728":0,"1382831206":0,"1382831210":0,"1382831371":0,"1382831792":1,"1382831787":1,"1382831894":1,"1382832384":1,"1382832379":1,"1382832494":1,"1382832991":1,"1382832987":1,"1382833095":1,"1382833589":1,"1382833583":1,"1382833694":1,"1382834177":1,"1382834203":0,"1382834294":1,"1382834776":1,"1382834810":0,"1382834894":1,"1382835430":1,"1382835387":1,"1382835495":1,"1382835984":1,"1382835979":1,"1382836094":1,"1382836576":1,"1382836612":0,"1382836694":1,"1382837193":1,"1382837187":1,"1382837294":1,"1382837785":1,"1382837779":1,"1382837894":1,"1382838415":0,"1382838417":1,"1382838518":0,"1382839024":0,"1382839017":1,"1382839127":0,"1382839585":1,"1382839606":0,"1382839716":0,"1382840220":0,"1382840215":0,"1382840314":0,"1382840794":1,"1382840817":0,"1382840916":0,"1382841384":1,"1382841425":0,"1382841513":0,"1382842019":0,"1382842014":0,"1382842130":0,"1382842614":0,"1382842612":0,"1382842717":0,"1382843204":0,"1382843208":1,"1382843314":0,"1382843809":0,"1382844036":0,"1382844395":1,"1382844416":0,"1382844599":0,"1382845008":0,"1382845073":0,"1382845113":0,"1382845592":1,"1382845618":0,"1382845714":0,"1382846217":1,"1382846210":0,"1382846314":0,"1382846806":0,"1382846809":0,"1382846922":0,"1382847426":0,"1382847501":1,"1382847525":0,"1382847995":1,"1382848015":0,"1382848117":0,"1382848608":0,"1382848603":0,"1382848712":0,"1382849208":0,"1382849210":0,"1382849414":0,"1382849784":1,"1382849820":0,"1382849899":1,"1382850393":1,"1382850411":0,"1382850520":0,"1382851021":0,"1382851015":0,"1382851134":0,"1382851585":1,"1382851616":0,"1382851716":0,"1382852208":0,"1382852204":0,"1382852312":0,"1382852794":1,"1382852810":0,"1382852910":0,"1382853383":1,"1382853416":0,"1382853516":0,"1382854048":0,"1382854007":0,"1382854113":0,"1382854622":0,"1382854619":0,"1382854710":0,"1382855186":1,"1382855208":0,"1382855313":0,"1382855786":1,"1382855811":0,"1382855914":0,"1382856392":1,"1382856411":0,"1382856510":0,"1382856984":1,"1382857009":0,"1382857110":0,"1382857608":0,"1382857588":1,"1382857714":0,"1382858225":1,"1382858314":0,"1382858785":1,"1382858816":0,"1382858914":0,"1382859415":0,"1382859410":0,"1382859516":0,"1382860009":0,"1382860011":0,"1382860111":0,"1382860602":0,"1382860715":0,"1382861211":0,"1382861315":0,"1382861795":1,"1382861819":0,"1382861912":0,"1382862416":0,"1382862409":0,"1382862514":0,"1382862993":1,"1382863013":0,"1382863114":0,"1382863591":1,"1382863620":0,"1382863716":0,"1382864184":1,"1382864213":0,"1382864325":0,"1382864792":1,"1382864816":0,"1382864911":0,"1382865432":0,"1382865420":0,"1382865520":0,"1382866006":0,"1382865987":1,"1382866111":0,"1382866592":1,"1382866617":0,"1382866714":0,"1382867185":1,"1382867209":0,"1382867319":0,"1382867784":1,"1382867809":0,"1382867924":0,"1382868414":0,"1382868410":0,"1382868515":0,"1382868986":1,"1382869018":0,"1382869116":0,"1382869612":0,"1382869609":0,"1382869715":0,"1382870189":1,"1382870212":0,"1382870318":0,"1382870809":0,"1382870805":0,"1382870913":0,"1382871384":1,"1382871399":1,"1382871514":0,"1382871988":1,"1382872008":0,"1382872113":0,"1382872585":1,"1382872616":0,"1382872714":0,"1382873185":1,"1382873212":0,"1382873310":0,"1382873808":0,"1382873815":1,"1382873912":0,"1382874407":0,"1382874405":0,"1382874513":0,"1382874992":1,"1382875016":0,"1382875117":0,"1382875621":1,"1382875612":0,"1382875714":0,"1382876184":1,"1382876210":0,"1382876315":0,"1382876791":1,"1382876811":0,"1382876915":0,"1382877392":1,"1382877413":0,"1382877509":1,"1382878003":0,"1382877986":1,"1382878121":0,"1382878612":0,"1382878609":0,"1382878718":0,"1382879192":1,"1382879211":0,"1382879322":0,"1382879811":0,"1382879917":0,"1382880423":0,"1382880416":0,"1382880511":0,"1382881024":0,"1382881021":1,"1382881117":0,"1382881585":1,"1382881608":0,"1382881714":0,"1382882192":1,"1382882230":0,"1382882317":0,"1382882812":0,"1382882810":0,"1382882914":0,"1382883385":1,"1382883418":0,"1382883509":0,"1382884018":0,"1382884016":0,"1382884119":0,"1382884605":0,"1382884602":0,"1382884719":0,"1382885205":0,"1382885204":0,"1382885315":0,"1382885793":1,"1382885813":0,"1382885940":0,"1382886409":0,"1382886403":0,"1382886518":0,"1382886985":1,"1382887013":0,"1382887112":0,"1382887618":0,"1382887616":0,"1382887720":0,"1382888188":1,"1382888210":0,"1382888320":0,"1382888806":0,"1382888785":1,"1382888912":0,"1382889393":1,"1382889414":0,"1382889514":0,"1382889988":1,"1382890005":0,"1382890124":0,"1382890603":1,"1382890609":0,"1382890720":0,"1382891221":0,"1382891222":0,"1382891312":0,"1382891784":1,"1382891812":0,"1382891916":0,"1382892425":0,"1382892413":0,"1382892527":0,"1382892991":1,"1382893007":0,"1382893116":0,"1382893584":1,"1382893608":0,"1382893713":0,"1382895951":1,"1382894224":1,"1382894319":0,"1382894815":0,"1382894922":0,"1382895398":0,"1382895517":0,"1382896001":0,"1382896000":0,"1382896050":0,"1382896117":0,"1382896620":0,"1382896611":0,"1382896717":0,"1382897185":1,"1382897206":0,"1382897312":0,"1382897793":1,"1382897917":0,"1382898422":0,"1382898421":0,"1382898523":0,"1382899013":0,"1382899009":0,"1382899115":0,"1382899615":0,"1382899595":1,"1382899721":0,"1382900193":1,"1382900210":0,"1382900316":0,"1382900809":0,"1382900802":0,"1382900915":0,"1382901412":0,"1382901395":1,"1382901515":0,"1382901992":1,"1382902025":0,"1382902117":0,"1382902585":1,"1382902605":0,"1382902710":0,"1382903192":1,"1382903219":0,"1382903321":0,"1382903804":0,"1382903805":0,"1382903926":0,"1382904385":1,"1382904406":0,"1382904511":0,"1382905027":0,"1382905023":0,"1382905116":0,"1382905612":0,"1382905718":0,"1382906219":1,"1382906205":0,"1382906313":0,"1382906794":1,"1382906812":0,"1382906917":0,"1382907404":1,"1382907408":0,"1382907517":0,"1382908010":0,"1382908007":0,"1382908115":0,"1382908589":1,"1382908612":0,"1382908722":0,"1382909186":1,"1382909213":0,"1382909323":0,"1382909815":0,"1382909814":0,"1382909915":0,"1382910390":1,"1382910411":0,"1382910513":0,"1382911018":0,"1382911002":0,"1382911122":0,"1382911614":0,"1382911611":0,"1382911716":0,"1382912196":1,"1382912217":0,"1382912315":0,"1382912785":1,"1382912812":0,"1382912920":0,"1382913396":1,"1382913424":0,"1382913526":0,"1382914019":0,"1382913994":1,"1382914115":0,"1382914585":1,"1382914608":0,"1382914711":0,"1382915193":1,"1382915221":0,"1382915324":0,"1382915821":0,"1382915818":0,"1382915911":0,"1382916412":0,"1382916411":0,"1382916513":0,"1382917017":0,"1382917014":0,"1382917137":0,"1382917589":1,"1382917610":0,"1382917716":0,"1382918209":0,"1382918184":1,"1382918318":0,"1382918917":1,"1382918809":0,"1382918919":0,"1382919421":0,"1382919417":0,"1382919517":0,"1382919989":1,"1382920016":0,"1382920116":0,"1382920613":0,"1382920611":0,"1382920717":0,"1382921184":1,"1382921206":0,"1382921317":0,"1382921830":0,"1382921912":1,"1382921926":0,"1382922392":1,"1382922399":1,"1382922512":0,"1382922985":1,"1382923014":0,"1382923124":0,"1382923614":0,"1382923608":0,"1382923710":0,"1382924193":1,"1382924229":0,"1382924314":0,"1382924806":0,"1382924808":0,"1382924919":0,"1382925384":1,"1382925406":0,"1382925519":0,"1382925992":1,"1382926009":0,"1382926123":0,"1382926619":1,"1382926616":1,"1382926716":0,"1382927185":1,"1382927214":0,"1382927318":0,"1382927792":1,"1382927797":1,"1382927914":0,"1382928383":1,"1382928405":0,"1382928518":0,"1382928993":1,"1382929011":0,"1382929110":0,"1382929612":0,"1382929592":1,"1382929713":0,"1382930184":1,"1382930224":0,"1382930317":0,"1382930794":1,"1382930818":0,"1382930913":0,"1382931388":1,"1382931414":0,"1382931517":0,"1382932004":0,"1382932112":1,"1382932145":0,"1382932614":0,"1382932611":0,"1382932717":0,"1382933212":0,"1382933213":0,"1382933320":0,"1382933785":1,"1382933820":0,"1382933917":0,"1382934392":1,"1382934418":0,"1382934510":0,"1382935013":0,"1382935011":0,"1382935116":0,"1382935585":1,"1382935609":0,"1382935719":0,"1382936224":0,"1382936215":0,"1382936297":1,"1382936829":0,"1382936812":0,"1382936915":0,"1382937408":0,"1382937409":0,"1382937517":0,"1382938023":0,"1382938000":1,"1382938109":0,"1382938585":1,"1382938605":0,"1382938715":0,"1382939186":1,"1382939206":0,"1382939313":0,"1382939792":1,"1382939822":0,"1382939914":0,"1382940386":1,"1382940410":0,"1382940521":0,"1382940985":1,"1382941014":0,"1382941109":0,"1382941619":0,"1382941614":0,"1382941730":0,"1382942184":1,"1382942208":0,"1382942321":0,"1382942785":1,"1382942807":0,"1382942913":0,"1382943390":1,"1382943412":0,"1382943516":0,"1382943984":1,"1382944010":0,"1382944116":0,"1382944609":0,"1382944610":0,"1382944711":0,"1382945221":0,"1382945218":0,"1382945316":0,"1382945785":1,"1382945805":0,"1382945916":0,"1382946414":0,"1382946404":0,"1382946433":0,"1382946487":0,"1382946511":0,"1382947011":1,"1382947115":0,"1382947300":1,"1382947352":0,"1382947614":1,"1382947605":0,"1382947715":0,"1382948209":0,"1382948322":0,"1382948787":1,"1382948810":0,"1382948913":0,"1382949413":0,"1382949405":0,"1382949515":0,"1382949984":1,"1382950008":0,"1382950119":0,"1382950585":1,"1382950608":0,"1382950712":0,"1382951208":0,"1382951205":0,"1382951320":0,"1382951789":1,"1382951780":1,"1382951902":1,"1382951923":1,"1382951943":1,"1382951980":1,"1382952067":1,"1382952196":1,"1382952245":1,"1382952387":1,"1382952421":0,"1382952434":0,"1382952517":0,"1382953016":0,"1382953013":0,"1382953131":0,"1382953595":1,"1382953591":1,"1382953717":1,"1382954209":0,"1382954225":0,"1382954382":1,"1382954811":0,"1382954815":0,"1382955196":1,"1382955405":0,"1382955412":0,"1382955519":1,"1382955997":1,"1382956156":0,"1382956617":0,"1382956614":0,"1382956726":0,"1382957176":1,"1382957211":0,"1382957338":0,"1382957819":0,"1382957821":1,"1382957912":1,"1382958550":1,"1382958415":1,"1382958529":0,"1382959131":0,"1382960078":0,"1382960127":0,"1382960205":0,"1382960211":0,"1382960313":0,"1382960806":0,"1382960809":0,"1382960915":0,"1382961405":0,"1382961412":1,"1382961524":0,"1382962026":0,"1382962014":0,"1382962127":0,"1382962624":0,"1382962626":0,"1382962716":0,"1382963215":0,"1382963212":0,"1382963317":0}
the function parseDatas calculates and index of 24 for the data item "1382911614" which is not allowed ina 24 hour day leading to an exception.
It would be great to have a property to get domains to nicely fill the gap in these scenarios. Maybe leveraging domainMargin
or a new separate key.
var cal = new CalHeatMap();
cal.init({
domain: "month",
subDomain: "day",
domainMargin: -1 // -1 could be used to fill gaps
});
Would be nice if the examples would also contain your first "header" example styling.
E.g. there, the "load previous day" and "load next day" browsing buttons and position (in form of just arrows), look much better than in the "day > hour" examples where they're buttons on top only:
http://jsfiddle.net/Kamisama/EsN62/3/
Hello,
Thanks for a great lib. Browsing seems not to work with me and I imagine Im doing something wrong but I cant imagine what as my code is quite simple.
On first load I can see the green squares coloured in where there is data and thats fine. However, it seems as soon as I click next or previous (so using the buttons you get with browsing: true) all the data disappears. So clicking next and then previous again -> data has gone (all squares grey).
This is running on a bootstrap themed page with some other js/d3 widgets but I cant see where there would be interference.
Any pointers where to look?
Many thanks,
Dirk
Edit: accidentally submitted too soon
To go well with vertical oriented calendar
I am having issues with a couple of days in March 2013.
My JSON file contains 3/9/2013 11:00 GMT, 3/10/2013 11:00 and GMT 3/11/2013 11:00 GMT:
{
"1362826800":19952.14,
"1362913200":10000.00,
"1362999600":16050.47
}
For some reason 3/10 and 3/11 are getting combined and the sum of the values are getting entered into the 3/10 cell.
I can't figure out why I'm getting this error. Any ideas what I'm doing wrong?
I really like the "Months > days (horizontally)" graph on this page:
http://kamisama.github.io/cal-heatmap/
I'm totally new to D3JS though and I'm wondering if its possible to label the day of the month (ie. 1,2,3...,31) directly on the calendar's HTML (not via tooltip). I basically just want to create a calendar with the day number on the day, just like a real calendar.
How would I go about doing that? Thanks!
Example: next(5)
will shift the calendar 5 domains forward.
When a cal-heatmap has the 'onClick' event bound, the mouse pointer should be rendered as a "hand" to indicate that it's click-able (like the links), otherwise the users won't know, only hover, but not click on the cells.
Thanks in advance.
Please make all examples editable in JSFiddle so that users can try them right away.
Frameworks that do this:
http://handsontable.com/demo/renderers.html
(most examples can be tried and modified right away from that edit button)
http://api.highcharts.com/highcharts
(most properties have a "try" link)
Thanks in advance.
Having some of the values as "non-integers", won't get them rendered in the tooltip.
Having own colors seems to work - the legend is displayed correctly, but values from the last interval are rendered with the wrong color. See following fiddle:
http://jsfiddle.net/aadrian/4aDdJ/2/
The last value is '99' and should be rendered in red (q5), but the last element loads the style q4
So, I agree the two days getting summed up issue has been fixed and using the domain Day and subdomain Hour things look correct. However, the days in March 2013 are still off when you use the domain Month and subdomain Day.
Here is the JSON: (the unix timestamps for the 0 are all sundays but it still populate a day off after the 10th)
{"1362049200":20000.89,
"1362135600":22000.84,
"1362222000":23000.75,
"1362308400":0,
"1362394800":18000.06,
"1362481200":17000.19,
"1362567600":17000.93,
"1362654000":20000.5,
"1362740400":19000.2,
"1362826800":19952.14,
"1362913200":0,
"1362999600":16000.47,
"1363086000":16000.61,
"1363172400":16000.34,
"1363258800":17000.38,
"1363345200":17000.97,
"1363431600":18000.72,
"1363518000":0,
"1363604400":16000.14,
"1363690800":17000.77,
"1363777200":16000.04,
"1363863600":19000.62,
"1363950000":21000.28,
"1364036400":19000.64,
"1364122800":0,
"1364209200":16000.8,
"1364295600":17000.18,
"1364382000":19000.79,
"1364468400":21000.23,
"1364554800":18000.2,
"1364641200":210.84,
"1364727600":0,
"1364814000":17000.37}
Is it possible to create custom domains, for example by grouping subdomains together?
In our use case it would be ideal to have a month domain with two 'half-day' blocks as the subdomain, the first block representing hour 0-11 and the second block hour 12-23. It doesn't seem like cal-heatmap supports this currently, is it possible to add such functionality?
On unknown dataset, where you don't know anything about the results, set a legend interval isn't usefull.
I can set a dynamic legend interval setting in the afterLoadData function:
afterLoadData: function (data) {
var stats = {};
var interval = Math.round(data.max/5);
cal.options.legend = [interval, 2 * interval, 3 * interval, 4 * interval, data.max];
for (var d in data.values) {
stats[data.values[d].ts] = data.values[d].v;
}
return stats;
}
But the legend isn't refreshed. I've tried calling cal.displayLegend(); manually but the duplicates the legend and show 2 legends, the default one [10, 20, 30, 40, 50] and on the bottom the new one.
I think if you move
// Display legend if needed
if (self.options.displayLegend) {
self.displayLegend(graphDim.width - self.options.domainGutter - self.options.cellPadding);
}
from the init() function to afterLoadData(), the legend will be refreshed on every data load and can set dynamic legend intevals
I am using the latest master and am trying to implement the last example to show all the hours of the day on the same line using the code below. The days are showing as a 4x6 and the legend colors are staying the standard green. Thanks!
<div>
<div id="cal-heatmap"></div>
<script>
// datas is an array of object
var datas = [
{date: 946702811, value: 15},
{date: 946710000, value: 25},
{date: 946715000, value: 10}
]
var parser = function(data) {
var stats = {};
for (var d in data) {
stats[data[d].date] = data[d].value;
}
return stats;
};
var cal = new CalHeatMap();
cal.init({
itemSelector: "#cal-heatmap",
domain: "day",
subDomain: "hour",
rowLimit: 1,
domainGutter: 0,
data: datas,
afterLoadData: parser,
start: new Date(2000, 0, 1),
cellSize: 15,
cellPadding: 5,
range: 7,
verticalOrientation: true,
displayLegend: false,
label: {
position: "left",
offset: {
x: 20,
y: 12
},
width: 110
},
legend: [10, 20, 30, 40],
legendColors: ["#ecf5e2", "#232181"]
});
</script>
</div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.