How to display data as KB, MB, GB, TB on y axis.

[Dania]

I am drawing a chart which is displaying traffic volume on server. I want to display units as KB, MB etc on y axis. Any help how can I do this via d3 axis scales.

Thanks

[Chris Viau]

This will format in SI.  

var xAxis = d3.svg.axis()

    .scale(x)

    .orient("bottom")

    .tickFormat(d3.time.format("s"));

Just note that SI will be K and M. If you want KB and MB, you can use a custom formatter or you can reselect axis ticks and use regexes. Let me know if that's what you want.

Chris

On Tue, Nov 12, 2013 at 6:47 AM, Dania <atifa....@gmail.com> wrote:

I am drawing a chart which is displaying traffic volume on server. I want to display units as KB, MB etc on y axis. Any help how can I do this via d3 axis scales.

Thanks

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Dania]

Thanks for your reply. I am not getting how you are explaining it. Can you explain it a bit more please. I want the behaviour on y axis such that if data has highest value in MBs the scale should be like 0 MB, 20 MB, 40 MB etc. Is that possible or any of its variation. like 0, 20 KB, 20 MB etc

[Ian Johnson]

you could write your own custom format function

function byteFormat = function(bytes) {

  if(bytes > 1024 && bytes < 1000000) { return bytes + "kb" }

  else if(...)

}

then you could pass that to your tick format of the axis.

--
Ian Johnson - 周彦

http://enja.org

[Chris Viau]

There is an error in my code snippet. It should read .tickFormat(d3.format("s")); But the result is what you want: ticks will be formatted with proper SI units (K, M, G). Just try it in the console: d3.format("s")(1000000000) returns 1G

ChrisV

[Dania]

I have tried with a custom format function in tickFormat, but the problem with it is , after rendering through this function it do not keep track of rounding in a nice figures, For example at one point I had on output as 0 B, 4 KB, 17KB, 3MB, etc ie no pattern is observed in y axis scale, for example a typical scale would be like 0 KB, 5KB,  10KB, 15KB .... ie with uniform distribution.

[Ian Johnson]

for that you can specify tickValues to manually force the axis to use the ticks you want. otherwise its just going to try and make a best guess.