3

I observed that multibarchart in nvd3.js expects the following JSON format input.

[
  {
    "key": "abcd",
    "values": [
      {
        "x": 1221578789000,
        "y": 40
      },
      {
        "x": 1222578789000,
        "y": 103
      },
      {
        "x":1224181799000,
        "y": 35
      }
    ]
  }
]

But, I want to have the x labels with DateTimestamp. Is it necessary that 'x' should be only of int/long datatype?

Having said that, I tried to convert the long data type to date time stamp inside the nvd3.js code.

nv.models.axis = function() {    
  {code block}
  switch (axis.orient()) {
    case 'bottom':
      {code block}
      if (showMaxMin) {
      //if (showMaxMin && !isOrdinal) {
        var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
            //.data(scale.domain())
            .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]);
        axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text');
        axisMaxMin.exit().remove();
        axisMaxMin.attr('transform', function(d,i) {
            return 'translate(' + (scale(d) +
                    (isOrdinal ? scale.rangeBand() / 2 : 0)) + ',0)'
          })
          .select('text')
          .attr('dy', '.71em')
          .attr('y', axis.tickPadding())
          .attr('transform', function(d,i,j) {
             return 'rotate('+ rotateLabels + ' 40,60)'
          })
          .attr('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ?
                                               'start' : 'end') : 'middle')
          .text(function(d,i) {
            **var dat = new Date(d);**                  
            **return dat.toUTCString();**
            //return v;
          });

          d3.transition(axisMaxMin)
            .attr('transform', function(d,i) {
              //return 'translate(' + scale.range()[i] + ',0)'
              //return 'translate(' + scale(d) + ',0)'
              return 'translate(' + (scale(d) + (isOrdinal ?
                                scale.rangeBand() / 2 : 0)) + ',0)'
          });
      }
   }
}

With that change, I'm able to convert MaxMin 'x labels' to Datetime stamp. But I'm unable to find where to make the same conversion for the tick labels (the labels between the 'min x' and 'max x' axis are displaying the long value itself).

VividD
  • 10,456
  • 6
  • 64
  • 111
Krishna
  • 71
  • 1
  • 6
  • Krishna, I edited your post to improve code formatting. It was terrible. For your benefit, you should improve code formatting habits. – VividD Jan 16 '14 at 10:20

1 Answers1

4

Making the necessary changes in the chart object solved the problem.

var chart = nv.models.multiBarChart();

chart.xAxis
    .showMaxMin(true)
    .rotateLabels(440)
    .tickFormat(function(d) {
                     return d3.time.format('%x')(new Date(d))
                   });
Krishna
  • 71
  • 1
  • 6