0

I want to display the web traffics with StackedAreChart use nvd3.js. I need to show a tick per hour on X axis:00:00 01:00 02:00 ... 24:00. How do I do that?
reference the StackedAreaChart in this page 

nv.addGraph(function() {
             var chart = nv.models.stackedAreaChart()
            .x(function(d) { return d[0] })
            .y(function(d) { return d[1] })
            .clipEdge(true)
            .useInteractiveGuideline(true)
            ;
  chart.xAxis
  .showMaxMin(false)
  //.ticks(d3.time.hour,2) //I wrote this line，but is does not work
  .tickFormat(function(d) { return d3.time.format('%H:%M')(new Date(d))

                          });



  chart.yAxis.tickFormat(d3.format(',.2f'));

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

  nv.utils.windowResize(chart.update);

  return chart;
});
tao4yu
  • 316
  • 1
  • 5
  • 16

2 Answers2

2

The underlying D3 tries to be helpful by selecting the number of ticks to display.

You can override this behavior by using raw D3's tickValues(), which in your case makes sense and should be safe, since you always know what they are (0-23).

    chart.xAxis
        .tickFormat(function (d) {
            return d3.time.format("%H:%M")(new Date(d))
        })
        .tickValues(
          [  
            Number(new Date(2015, 01, 24, 00)),
            Number(new Date(2015, 01, 24, 01)),
            Number(new Date(2015, 01, 24, 02)),
            Number(new Date(2015, 01, 24, 03)),
            Number(new Date(2015, 01, 24, 04)),
            Number(new Date(2015, 01, 24, 05)),
            Number(new Date(2015, 01, 24, 06)),
            Number(new Date(2015, 01, 24, 07)),
            Number(new Date(2015, 01, 24, 08)),
            Number(new Date(2015, 01, 24, 09)),
            Number(new Date(2015, 01, 24, 10)),
            Number(new Date(2015, 01, 24, 11)),
            Number(new Date(2015, 01, 24, 12)),
            Number(new Date(2015, 01, 24, 13)),
            Number(new Date(2015, 01, 24, 14)),
            Number(new Date(2015, 01, 24, 15)),
            Number(new Date(2015, 01, 24, 16)),
            Number(new Date(2015, 01, 24, 17)),
            Number(new Date(2015, 01, 24, 18)),
            Number(new Date(2015, 01, 24, 19)),
            Number(new Date(2015, 01, 24, 20)),
            Number(new Date(2015, 01, 24, 21)),
            Number(new Date(2015, 01, 24, 22)),
            Number(new Date(2015, 01, 24, 23))
          ]
        )

Then to make them fit you can add .rotateLabels(-45).

This Plunk shows an example of it in use.

Lucas
  • 1,359
  • 7
  • 16
0

NVD3 by default calculates the right amount of tick to be displayed on the chart. If you try to add a lot of ticks (for example, the 24 ticks you want) on a small chart, the result will be a cluttered, ugly chart. Because of that, if the chart is small nvd3 may, for example, create one tick for every three hours.

You really should let nvd3 choose the number of tick for you. You don't need hourly ticks, you need the right amount of ticks that fit right in the chart.

But if you really want to add 24 ticks, you can do something like this (I didn't test it, but I think it will work - maybe not with 0, 1, 2, ..., but indeed with 24 hourly ticks):

chart.xAxis
    .ticks(24)
    .tickFormat(function(d) { return d3.time.format("%H:%M")(new Date(d)) });
RenatoUtsch
  • 1,449
  • 1
  • 13
  • 20