Just scrolling instead of browsing? about cal-heatmap

[wa0x6e]

Can you give a concrete example ?

As the domains are infinite, it'll be pretty hard to do, or are you talking about something else ?

[aionescu-zz]

Can you give a concrete example ?

Let's say I have data loaded for 12 domains (12 months groups).
If where the chart is displayed, there's enough place, than all the 12 domains will show.
If however I need to place the chart in a 2-column layout, than I can show only 6 or 7 domains at once.
I would like to be able to scroll the same way visually how the user would use the cal-heatmap browse controls
inside this loaded once domain (but this to trigger no further Ajax requests, since all the data was already loaded).

As the domains are infinite, it'll be pretty hard to do, or are you talking about something else ?

Yes. Just scrolling. The domains might be infinite, but there's a "first" and a "last" item that will correspond to a domain.

[wa0x6e]

Are you talking about responsive design ? Where you want the calendar to resize to show less domains when asked to ?

Or you want to save ajax request by loading more datas than showed with the first request ?

[aionescu-zz]

Or you want to save ajax request by loading more datas than showed with the first request ?

Yes. Not just save Ajax requests, but server code too: some data comes from other systems where would complicated to modify it ( to have extra parameters for the browsing), since we have no control over it, so just scrolling would be enough.

[wa0x6e]

From the server data, you want to preload all the data it's returning, or you want to filter them first ? (limiting with a first and end date).

[aionescu-zz]

From the server data, you want to preload all the data it's returning, or you want to filter them first ? (limiting with a first and end date).

From a user's perspective I don't really know what's the difference between "preload" and "filter" :).
Of course I wouldn't want to give an extra first and end property since there's already a start and range property, so the chart can figure out everything else.

What I want is just an extra setting (e.g. scroll:true or even better: browsing:'scroll' ). When this is used, and the user clicks on the browsing buttons, the chart would "scroll" or visibly "shift" or "re-render" with one domain at left or right if there's data in those previous or next domains.

[wa0x6e]

When this is used, and the user clicks on the browsing buttons, the chart would "scroll" or visibly "shift" or "re-render" with one domain at left or right if there's data in those previous or next domains.

I'm wondering how do you fill these datas in the "hidden" domain. I believe you're loading these in the same ajax request than the visible domains.

Let's say the ajax request can return datas for a whole month, and you're just displaying one week. So for the remaining 3 weeks, it'll be loaded automatically the first time, so when browsing, there's no more ajax request.

What I want to know is if you want to use all the datas return by the server (3 weeks), or want to limit them with a first and end date (just use the data for let's say 2 weeks).

[aionescu-zz]

What I want to know is if you want to use all the datas return by the server (3 weeks), or want to limit them with a first and end date (just use the data for let's say 2 weeks).

I want to use the entire data (4 weeks) loaded in one single AJAX request. The chart would scroll to the left or to the right, so jumping one domain (like it is doing with browsing too) until there's a domain with no more data.

[wa0x6e]

until there's a domain with no more data

I guess you want to disable browsing beyond certain date ?

[aionescu-zz]

see here an illustration. I hope it helps http://www.asciiflow.com/#Draw5106642043834590516/1312689001

I guess you want to disable browsing beyond certain date ?

If there's no more data in the next domain than can be the domains where the scrolling ends on the right or the left side.

[wa0x6e]

Maybe you can do that "outside" cal-heatmap ? With the new features added since version 3, it should be possible, or close.

First, don't pass the data's API url directly to cal-heatmap, fetch the data first and extract the first and last date, then pass them to init() via the minDate and maxDate => your calendar is now bounded.

Now that you have a json object, just pass it directly to cal-heatmap via data, since it can takes directly a json object.

Example:

var data = d3.json('www.api.com/data.html');

// Extract the timestamps
var dates = Object.keys(data);

// Convert all string timestamp to integer
dates.map(function(d) { return parseInt(d, 10); });

// Sort the dates
dates.sort();

var cal = new CalHeatMap();
cal.init({
   data: data,
   minDate: dates.shift(),
   maxDate: dates.pop()
});