Historical data using Cubism

问题:

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?

回答1:

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

回答2:

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");