Historical data using Cubism

Question

I have been playing with Cubism for a few days now. After successfully visualizing real time data, now I'm trying to visualize historical data.

Here is my scenario: I want to make a history page for each user with each horizon bar showing for each day of the week. Since I have data for every 10 mins the .size would be 144. So the axis should also show 12 AM to 11:59 PM. This would show data for the last week, a day at a time.

Some problems I faced:

I couldn't get the axis to show only time, it shows day and date as well. Even if it is some other day it won't matter much since I can change the start and stop within the metric definition. How can I change the axis to only show time of day in 144px?

Is it possible to do this using Cubism?

having the exact same problem. how did you set the context to ask for historical data, i.e. the start/stop/step ? — Dan, Aug 05 '13 at 15:01
step was fixed for me i.e 10 mins. For historical data i had to just calculate a time difference from now to last sunday and give that as serverdelay. — Dan, Aug 05 '13 at 19:22
have you tried the d3 plugin horizon() ? has all the rendering you need without the messing with real-time data. — Dan, Aug 06 '13 at 14:15

score 1 · Answer 1 · answered Jul 14 '13 at 03:37

1

Change cubism_axisFormatDays on line 1061 on cubism.js like this and tell me if it works:

cubism_axisFormatDays = d3.time.format("%I:%M %p");

answered Jul 14 '13 at 03:37

doesn't work. shows the same viz with the day and date (Thu 08) showing – Dan Jul 14 '13 at 11:31

score 1 · Answer 2 · edited May 23 '17 at 12:15

Changing the .step should actually help you to author the axis, you can also play with the .serverDelay which will also author the axis itself:

var context = cubism.context() // set the cubism context
//.serverDelay(0) // No server delay
//.clientDelay(0) // No client delay
.step((1 * (1000*60*60))) // step once ever second
.size(1440) // and make the horizon div 1440 px wide.
.stop(); //to stop the cubism from flowing like a real time cubism

    //1e3 or 1 seconds
    //1e4 or 10 seconds
    //6e4 or 1 minute 
    //3e5 or 5 minutes
    //36e5 or 1 hour 
    //864e5 or 1 day

You can also check out this post for more detail regarding .serverDelay(). Change scale default in cubism.js

Historical data using Cubism

2 Answers2