Leon Gaban Leon Gaban - 19 days ago 7
AngularJS Question

How to convert time range to display in hours not date? (nvd3 chart)

http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview

enter image description here

Above is my chart, the values I've passed it are for 1 day, 30 minute intervals:

var data =[{
"key" : "Price",
"color" : "#4C73FF",
"values" : [ [ 1443621600000 , 71.89],
[ 1443619800000 , 75.51],
[ 1443618000000 , 68.49],
[ 1443616200000 , 62.72],
[ 1443612600000 , 70.39],
[ 1443610800000 , 59.77]]
}];


Which correspond to the following (Epoch Converter):

9/30/2015, 9:00:00 AM GMT-5:00 DST
9/30/2015, 8:30:00 AM GMT-5:00 DST
9/30/2015, 8:00:00 AM GMT-5:00 DST
9/30/2015, 7:30:00 AM GMT-5:00 DST
9/30/2015, 6:30:00 AM GMT-5:00 DST
9/30/2015, 6:00:00 AM GMT-5:00 DST


How do I change the format of the date on the chart from showing
9/30/2015
to show instead
9:00
?

I couldn't find anything in their docs talking about time or timespans http://nvd3-community.github.io/nvd3/examples/documentation.html#line

Full code from Directive:

var data =[{
"key" : "Price",
"color" : "#4C73FF",
"values" : [ [ 1443621600000 , 71.89],
[ 1443619800000 , 75.51],
[ 1443618000000 , 68.49],
[ 1443616200000 , 62.72],
[ 1443612600000 , 70.39],
[ 1443610800000 , 59.77]]
}];

nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.y(function(d) { return d[1] })
.color(d3.scale.category10().range());

chart.xAxis
.showMaxMin(false)
.tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx))
});

chart.y1Axis
.tickFormat(d3.format(',f'));

chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',f')(d) });

chart.bars.forceY([0]);

d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);

nv.utils.windowResize(chart.update);

return chart;
});

Answer

Just found this question Understanding nvd3 x-axis date format

Which helped me find this: https://github.com/mbostock/d3/wiki/Time-Formatting

I'm able to correct change time now:

From my timerangeConvertFactory service I just made

function convertTime(when) {
    switch(when) {
        case 'lh':
        case 'ld':
            return '%I:%M';
            break;
        case 'lw':
        case '1mo':
        case '3mo':
            return '%x';
            break;
        case '1yr':
        case '2yr':
        case 'max':
            return '%m:%y';
            break;
    }
}

And now back in my Directive:

// Get timespan:
var timeRange = TimeSpanFactory.getTimeSpan();
console.log('timeRange =',timeRange.when);

// Convert timespan to nvd3 format:
var nvd3timeRange = TimespanConvertFactory.convertTime(timeRange.when);
console.log('nvd3timeRange =',nvd3timeRange);

nv.addGraph(function() {
    var chart = nv.models.linePlusBarChart()
        .margin({top: 20, right: 40, bottom: 50, left: 40})
        .x(function(d,i) { return i })
        .y(function(d) { return d[1] })
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function(d) {
        var dx = res[0].values[d] && res[0].values[d][0] || 0;
        return d3.time.format(nvd3timeRange)(new Date(dx))
        // return d3.time.format('%I:%M')(new Date(dx))
        // return d3.time.format('%x')(new Date(dx))
    });
    ....