With NVD3.js (nv.models.lineWithFocusChart), how do you set specific ticks on X-axis, when x values are dates?

Posted by Panagiotis Panagi on Stack Overflow See other posts from Stack Overflow or by Panagiotis Panagi
Published on 2013-07-03T10:55:11Z Indexed on 2013/07/03 11:05 UTC
Read the original article Hit count: 1346

Filed under:

JavaScript

|

d3.js

|

nvd3.js

I'm using nv.models.lineWithFocusChart, where I'm showing some hourly measurements. So the x domain is dates.

What I need is to show a tick per hour on X axis:

00:00 01:00 02:00 ... 24:00

I've tried everything I could find but nothing works. It seems that its easy to set specific ticks when values are not dates. But can't figure out how to do it for dates.

Here's the code that creates the graph, if it can help:

 nv.addGraph ->
    chart = nv.models.lineWithFocusChart(view)
    chart.yAxis.tickFormat(d3.format(".02f"))

    d3.select(graphSelector).datum([]).transition().duration(500).call(chart)
    nv.utils.windowResize ->
      d3.select(graphSelector).call(chart)

    chart.xAxis.tickFormat (d) ->
      d3.time.format(ticksFormat)(new Date(d)) 
    chart.x2Axis.tickFormat (d) ->
      d3.time.format(ticksFormat)(new Date(d))

    chart.xAxis.tickSubdivide(9)

© Stack Overflow or respective owner

Related posts about JavaScript

CHAT ROOMs 7 by 6

as seen on Stack Overflow - Search for 'Stack Overflow'
I am looking for chatroom on one page with 7 loggedin users and 6+rows for say 42 users.these users will keep on adding wthnew users.Need urgent help.A PRETTY UNUSUAL Q FOR MOST OF U.What is MORE REQ new features: Usernames are unique to users currently chatting You can see a "currently chatting"… >>> More
Integrating JavaScript Unit Tests with Visual Studio

as seen on Stephen Walter - Search for 'Stephen Walter'
Modern ASP.NET web applications take full advantage of client-side JavaScript to provide better interactivity and responsiveness. If you are building an ASP.NET application in the right way, you quickly end up with lots and lots of JavaScript code. When writing server code, you should be writing… >>> More
Has Javascript developed beyond what it was originally designed to do?

as seen on Programmers - Search for 'Programmers'
I've been talking with a friend about the purpose of Javascript, when and how it should be used, etc. He quoted that: JavaScript was designed to add interactivity to HTML pages [...] JavaScript gives HTML designers a programming tool HTML authors are normally not programmers… >>> More
PHP, javascript, single quote problems with IE when passing variable from ajax post to javascript fu

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi! I have been trying to get this to work for a while, and I suspect there's an easy solution that I just can't find. My head feels like jelly and I would really appreciate any help. My main page.php makes a .post() to backend.php and fetches a list of cities which it echoes in the form of: <li… >>> More
Javascript in XSL that is loaded by Javascript

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there anyway to have javascript run when a XSL sheet has been applied to an XML file by Javascript? I am using a JQuery plugin to apply the sheet to the xml but the javascript that is located inside of the XSL file will not run. I put the Javascript at the bottom of the file and it still does… >>> More

Related posts about d3.js

D3.js binding an object to data and appending for each key

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm a D3.js newbie and I'm learning how to play around with data. Let's say I have an object with names as keys, and each key has an array of numbers like this: var userdata = { 'John' : [0, 1, 3, 9, 8, 7], 'Harry': [0, 10, 7, 1, 1, 11], 'Steve': [3, 1, 4, 4, 4, 17], 'Adam' : [4… >>> More
D3.js transition callback on frame

as seen on Stack Overflow - Search for 'Stack Overflow'
Does anyone know how I could accomplish a per frame callback for a transition with D3. Here is and example of what I am doing currently. link.transition() .duration(duration) .attr("d", diagonal) .each("end",function(e) { if(e.target.id == current) show_tooltip(e.target) … >>> More
d3.js force layout increase linkDistance

as seen on Stack Overflow - Search for 'Stack Overflow'
How to increase linkDistance without affecting the node alignment, example: http://mbostock.github.com/d3/talk/20110921/force.html when I try to increase the circle radius and linkDistance the it collapse <script type="text/javascript"> var w = 1280, h = 800, z = d3.scale.category20c(); var… >>> More
Having trouble animating Line in D3.js using and array of objects as data

as seen on Stack Overflow - Search for 'Stack Overflow'
I can't seem to get an animated transition between line graphs when I pass in a new set of data. I am using an array of objects as data like this: [{ clicks: 40 installs: 10 time: "1349474400000" },{ clicks: 61 installs: 3 time: "1349478000000" }]; I am using this… >>> More
Filter on button click D3.js?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm working on a version of this bubble chart http://vallandingham.me/vis/gates/. As I'm using a different set of data - instead of the "All Grants" and "Grants by Year" buttons - I have one for 5 consecutive years - 2010, 2009 etc. My opening graph depicts the data for 2010 which is achieved… >>> More