I'm trying to parse this date using the D3.js libary.
2013-07-07 00:06:02.480270
I have tried so many variation but it always returns null
For example :
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S.%L").parse;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S+0000").parse;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
It´s endless trial and error.
Any advice ?
According to the documentation, D3 expects the milliseconds to be three digits at most. You will either have to cut off the last three digits of your string or use something else to parse it.
Related
I am trying to parse date with my specific timezone - not utc or browser. I am using
d3.timeFormat("%H:%M %p");
but this function is unsing browser timezone automatically.
d3.utcFormat("%H:%M %p"); // is using utc
I am thinking about using moment.js but don't know how. Any idea?
------UPDATE---------------------------------------
I am using unix timestamps as number to do linear scaling.
var xScale = d3.scaleLinear()
.range([0, width])
.domain([minTime, maxTime]);
and just parsing it when display it
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(7)
.tickFormat(d3.timeFormat("%H:%M %p"));
so input is e.g. 1647245248 and I want to set timezones that I get from moment.js list.
So I need to add timezone in data in unix timestamp or just in d3 display axis.
I am trying to get abbreviated month name in X-axis for DC.js line chart. I have formatted the month column and parsed it before sending it to dimension.Even after formatting the ticks in the line chart, I am getting "Dec" for all of them. Below is the code . Please help me to resolve it
var parseTime = d3.timeParse("%B %d, %Y");
var parseMonth = d3.timeFormat("%B");
canadaclimatProjects.forEach(function (d) {
var date = parseTime(d["year_mon"]);
d["year_mon"] = parseMonth(date);
});
var newMonth = ndx.dimension(function (d) { return d["year_mon"]; });
monthlyPrecipitationChart
.width(380)
.height(250)
.round(d3.timeMonth.round)
.xUnits(d3.timeMonths)
.x(d3.scaleTime().domain(newMonth))
.dimension(newMonth)
.group(precipitationByMonth)
.brushOn(false)
.valueAccessor(function (p) { return p.value.count > 0 ? p.value.total / p.value.count : 0; })
.elasticX(true)
.elasticY(true);
.xAxis().ticks(12).tickFormat(d3.timeFormat("%b"));
d3.scaleTime() won't work if you are passing in strings as the keys of your data. You need to pass in Date objects instead.
You've already handled printing the ticks with abbreviated months with
.xAxis().ticks(12).tickFormat(d3.timeFormat("%b"));
so it's redundant (and won't work) to format the dates on input.
Rarely is it a good idea to pass formatted data into a chart. Formatting usually happens after the chart is drawn.
Hard to say why you are getting the results you describe, without a complete runnable example.
I have the following parsing code of time in h:m:s format
var ISO8601format=d3.time.format("%Y-%m-%dT%H:%M:%SZ");
var hoursandminsformat=d3.time.format("%H:%M:%S");
e.time=hoursandminsformat(ISO8601format.parse(e.time));
I have a json file with reading at different times from different sensors.
Sample data is=
[
{"id":1,"time":"2015-03-29T20:32:24Z"},
{"id":2,"time":"2015-03-29T20:32:24Z"},
{"id":3,"time":"2015-03-29T20:32:24Z"},
{"id":1,"time":"2015-03-29T20:33:24Z"},
{"id":2,"time":"2015-03-29T20:33:24Z"},
{"id":3,"time":"2015-03-29T20:33:24Z"},
]
I am going to plot a dc.js rowchart where there will be time in minutes in the x axis and frequency in the y axis. I am using the following code to do this. But its returning NaNs.
var freqchart= dc.lineChart("#chart1");
var countByTime=ndx.dimension(function (d) {return d.time; });
var freqbyTimeGroup = countByTime.group().reduceCount();
freqchart.width(400).height(200).transitionDuration(500)
.dimension(countByTime).group(freqbyTimeGroup).elasticY(true).x(
d3.time.scale().domain([d3.min(data,function(d){return d.time;}),
d3.max(data,function(d){return d.time;})])).xUnits(d3.time.minutes).yAxisLabel("Frequency").xAxisLabel('Time').elasticX(true)
How can I solve this problem? Here is the jsfiddle that's not working
Hurray I got the solution. Here is the code
var data=[
{"id":20,"time":"2015-03-29T20:32:24Z","speed":20},
{"id":21,"time":"2015-03-29T20:32:24Z","speed":15},
{"id":22,"time":"2015-03-29T20:32:24Z","speed":16},
{"id":23,"time":"2015-03-29T20:33:25Z","speed":14},
{"id":20,"time":"2015-03-29T20:33:26Z","speed":20},
{"id":21,"time":"2015-03-29T20:34:24Z","speed":10},
{"id":22,"time":"2015-03-29T20:34:24Z","speed":15},
{"id":23,"time":"2015-03-29T20:35:24Z","speed":15},
]
// The datset is much larger with many detector. This is sample
var dateformat=d3.time.format("%H:%M:%S").parse;
var ISO8601format=d3.time.format("%Y-%m-%dT%H:%M:%SZ");
var hoursandminsformat=d3.time.format("%H:%M:%S");
data.forEach(function(d) {
d.time=d.time.substring(11,19);
d.time=dateformat(d.time);
});
Here is the working jsfiddle
I'm using the code below to display the day of the week and the month value for my data. D3 displays the date as expected e.g. "Sat 18" but for Sunday it shows the month instead e.g. "Oct 19"!
Can't figure out why this is happening. The code is:
var xScale = d3.time.scale()
.domain([new Date($scope.dataset[0][0].time),d3.time.day.offset(new Date($scope.dataset[0][$scope.dataset[0].length-2].time),2)])
.rangeRound([0, w-0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(d3.time.days,1);
Any ideas why this is happening? the sample dataset looks like this:
{time: "2014-10-19",y: 0,y0: 0}
By default, D3 will apply some adaptive formatting to the date tick values (see "This set of time intervals is somewhat arbitrary and additional values may be added in the future" section), but you can override this with a specific date format, for example:
.ticks(d3.time.days,1)
.tickFormat(d3.time.format('%a %e'));
You can find the remainder of the formatting options here.
I have added a datetime X-axis to my rickshaw graph:
var x_axis = new Rickshaw.Graph.Axis.Time({
graph: graph,
timeFixture: new Rickshaw.Fixtures.Time(),
});
However, it doesn't generally give me the format I want. Can I give it a specifier so the datetimes are always in a specified format (i.e. something like d3.time.format(specifier) )?
Based on Lars' linked example I have done the following:
var format = function(d) {
d = new Date(d)
return d3.time.format("%c")(d)
}
var x_axis = new Rickshaw.Graph.Axis.X({
graph: graph,
tickFormat: format,
});
Which seems to work, so now I just have to find a way to make the spacing come out okay....
The formatter will only format the string, it will not determine the spacing.
In order to control spacing and formatting, you could write your own 'Fixture', e.g. take a look at https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js for an example.
The fixture provides two things: the spacing (e.g. year, month, day, hour) and the formatting of each.
Create a similar fixture, space and format to your needs and set it on the x-axis:
var xAxis = new Rickshaw.Graph.Axis.Time( {
graph: graph,
//timeFixture: new Rickshaw.Fixtures.Time()
timeFixture: new MyOwnTimeFixture()
} );
try this one it will work
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
tickFormat: function(x){
return new Date(x).toLocaleString();
},
ticks: 4
});