CODEWITHSUNDEEP
javascriptdated3.js
QPTR
QPTR

Reputation: 1690

Timeline doesn't work when reading from a .csv file

I am trying to implement a timeline with a brush using Mike Bostock's code over here.

The code that I have can be found over here on a CodePen link.

Inside the function drawTimeline, I am defining a variable data (from line 19-23) that takes in the first seven values of my .csv file. The issue I am having is that even though the code works fine when I hardcode the variable data (on line 24), it doesn't work when I use it by pushing in the first seven values inside an array I create. I've used console.log to print the values outside and they seem to be identical in format to the ones that I hardcode, and yet the timeline doesn't show anything in the case of the csv-derived array. Could anyone please help with this issue?

Thanks!

Upvotes: 1

Views: 108

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Your timeline is working. The problem is just the time span.

When you hardcode the data, you have this domain (I'm in Australia, you may see different times according to your time zone):

[Fri Jan 19 2018 20:36:02 GMT+1100, Thu Jan 25 2018 20:36:02 GMT+1100]

This domain has almost one week in the time span. On the other hand, when you push the first 7 values, this is the domain:

[Tue Mar 06 2018 21:52:42 GMT+1100, Tue Mar 06 2018 23:55:30 GMT+1100]

As you can see, just a couple of hours. But it is a correct domain, so the chart should work. What's happening here?

The problem is that you set this for the ticks:

.ticks(d3.timeDay)

Obviously, there is just a couple of hours in that domain, not days.

Solution:

Remove your ticks method.

Here is the updated CodePen:https://codepen.io/anon/pen/eMxzGM?editors=0010

Upvotes: 2

Related Questions