Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3.js - Time scale with ticks in milliseconds

Tags:

d3.js

nvd3.js

I need to plot a line graph where x-axis will have ticks representing time with milliseconds detail.

For x-scale, I am using d3.time.scale()

var xScale = d3.time.scale()
    .range([0, width])

x-axis looks like:

var xAxis = d3.svg.axis()
    .scale(xScale)   
    //.ticks(d3.time.second, 1)
    .orient("bottom")        
    .tickFormat(d3.time.format("%H:%M %L"));

But values/ticks on x-axis are not generating as expected.

x-axis with time scale

data for x-axis are date objects and they hold following values(sample data)

13:25:6 794 (%H:%M%S %L)
13:25:6 898 
13:25:6 994 
13:25:7 95 
13:25:7 194 
13:25:7 295 
13:25:7 395 
13:25:7 495 
13:25:7 595 
13:25:7 710 
13:25:7 795 
13:25:7 895
13:25:7 995 
13:25:8 95 
13:25:8 195 
13:25:8 294
13:25:8 395 
13:25:8 495
13:25:8 594
13:25:8 795 

However if I take linear scale d3.scale.linear() Ticks generated follow a expected series.

x-axis with linear scale

whats the correct way of using time scale with data having millisecond details.

How can I have tick intervals in seconds:milliseconds?

EDIT:

Also, how can I have ticks every few milliseconds say every 500 ms?

there is an API d3.time.second but nothing like d3.time.millisecond. How can I add one?

Fiddle using time scale

like image 410
hitesh israni Avatar asked Aug 27 '13 09:08

hitesh israni


1 Answers

intervals in seconds:milliseconds means, you can try out this

.tickFormat(d3.time.format("%S %L"));
like image 55
Pandiyan Cool Avatar answered Oct 11 '22 18:10

Pandiyan Cool