I'm using the javascript rickshaw library to visualize realtime data in a diagram. Does anyone know why a time stamp of the x-Axis starts at "01 Jan 1970 00:00:00 GMT" instead of the current time stamp?
Here the x-Axis time stamp is the current time which I'd like to use:
http://jsfiddle.net/n68teee2/
Here in my project the time stamp is set to the wrong unix time stamp above:
http://jsfiddle.net/t2cch5rw/1/
I think the affected code could be the following lines:
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var annotator = new Rickshaw.Graph.Annotate( {
graph: graph,
element: document.getElementById('timeline')
} );
Thanks.
I've found the origin of the problem. The function Rickshaw.Fixtures.RandomData(150) adds timestamps to the data. The time stamp is defined in Rickshaw.Fixtures.Time.
Related
I am building a timeline chart - that will change its date scale at the top when the brush becomes small to the scope of 1 day -- but when it hits this mode -- the labels overlap and it looks messy until you get to a 12 hour spread.
What is the best way of cleaning this functionality up so it doesn't overlap. I thought about having 1 line that shows date -- and another line under it that shows the hours at that level.
https://jsfiddle.net/aLh9d51t/
var tFormat = '%Y-%m';
var tTick = 'timeMonth';
if (days < 40) {
tFormat = '%Y-%m-%d';
tTick = 'timeWeek';
}
if (days <= 7) {
tFormat = '%Y-%m-%d';
tTick = 'timeDay';
}
if (days <= 1) {
tFormat = '%Y-%m-%d %H%p';
tTick = 'timeHour';
}
First, you can hide redundant parts of date when possible: show years, months, days only if there are more than one visible. So you definitely do not need years and months when you show hours and minutes.
Just look how default d3 axis handles this (e.g. https://bl.ocks.org/mbostock/1166403).
Second, considering your chart has fixed width, you can fine-tune different formats for different zoom levels (you already do this in your code snippet).
Take a look at this example: http://bl.ocks.org/oluckyman/6199145
It has similar logic as in your code snippet:
https://gist.github.com/oluckyman/6199145#file-axisdaysview-js-L33-L58
But the decision which format to choose depends on chart width:
https://gist.github.com/oluckyman/6199145#file-axisdaysview-js-L72-L75
And third, if you restricted to long labels for some reason, you can rotate them to 30°-45°
Also this could be useful: https://bl.ocks.org/mbostock/4149176
Summary
I have a large collection of data with various datetimes. Currently I have been able to group all my data to display properly in a local timezone; however, when trying to display this data in a different timezone the lines on a lineChart get choppy and the connection between them is not as smooth as when in a local timezone.
I had found this link here detailing a possible solution, but sadly this won't work without me duplicating my entire dataset with times offset from utc and then once as normal. The data I have is not only used in several charts to gain insights about trends and statistics, but there is a raw table used for display/editing/reviewing specific data members. Thus translating one into a utc time and calculating the time change in utc time would throw the other off.
https://groups.google.com/forum/#!msg/d3-js/iWmP9Npv2Go/xyypdLjWu2QJ
My question is: Is there a way to translate datetime data across timezones and have dc.js respect the timezone you would like to display in. I would like the adjusted graphs to look the same way the local graph looks where the lines are not one-sided based on the timezone.
code and photos
fiddle: https://jsfiddle.net/spacarar/j0urt9sy/49/
this is the correctly displaying image for my local timezone. The lines are smooth transitions between dates.
This is the incorrectly displaying image for any other timezone (depending on which side of my local changes orientation from leaning left to leaning right)
A simplified version of my data looks something like this:
var data = [
{
value: 42,
datetime: '2019-10-24T07:18:00.000000'
},
{
value: 10,
datetime: '2019-10-24T07:19:12.000000'
},
{
value: 12,
datetime: '2019-10-29T04:18:00.000000'
},
{
value: 8,
datetime: '2019-10-29T09:18:00.000000'
}
]
which I then fake group to fill in any dates that may not be present in the data and translate them using moment-timezone to end up with a data structure similar to this
{
value: 0,
datetime: moment timezone object with full datetime,
date: moment timezone object representing only date (0 hours, minutes, seconds, ms)
}
this fake grouped/fixed data is then used to create the chart with the following code
var ndx = dc.crossfilter(fakeGroupedData)
var dateDim = ndx.dimension(dc.pluck('date'))
var top = dateDim.top(1)[0] ? dateDim.top(1)[0].date : null
var bottom = dateDim.bottom(1)[0] ? dateDim.bottom(1)[0].date : null
var chart = dc.lineChart('#date-chart')
chart.yAxis().tickFormat(dc.d3.format(',.0f'))
chart.xAxis().ticks(10).tickFormat(d => moment(d).format('M/D'))
chart.dimension(dateDim)
.group(dateDim.group().reduceSum(dc.pluck('value')))
.x(dc.d3.scaleTime().domain([bottom, top]).nice())
.elasticY(true)
.renderArea(true)
.render()
A couple of points about your date-filling.
This is not what's normally meant by a "fake group". You're filling in the source data and all of your crossfilter groups are completely "real" :)
There isn't any point in filling at a higher resolution than you intend to show. To simplify the problem, I changed your code to fill by days, and it worked exactly the same:
let start = moment.tz(startDate, tzSelection).startOf('day')
let end = moment.tz(endDate, tzSelection).endOf('day')
let hours = end.diff(start, 'days')
for (let i = 0; i < hours; i++) {
let fakeTime = moment(start).add(i, 'days')
let date = moment(fakeTime.format('YYYY-MM-DD'))
fakeGroupedData.push({
value: 0,
datetime: fakeTime,
date
})
}
It might be easier to use d3-time, since that integrates tighter with dc.js, but I didn't want to make big changes to your code.
However, you are essentially quantizing by day, so you can set up your dimension to quantize to the beginning of the day in the current timezone, and that will fix your chart:
var dateDim = ndx.dimension(d => d3.timeDay(dc.pluck('date')(d)))
If you do this, you don't need to modify your input dates:
el.date = el.datetime //.clone().startOf('day')
D3 will truncate to the current day, and then crossfilter will bin at that resolution.
https://jsfiddle.net/gordonwoodhull/Lxvcoq3h/19/
Note that it's binning both of the 10/29 entries into one.
In my timezone UTC-5, the moment startOf('day') rounding was causing the first of those entries to land on the 28th, which matches what you said you wanted:
https://jsfiddle.net/gordonwoodhull/Lxvcoq3h/21/
You'll have to decide which one is correct for your application. The main point is that if you're displaying your charts in the local timezone, the data should be quantized to local days.
I have a mix of a line chart and bar chart in D3. Though the y-axis(dates) mapped to 'usageDate' is incremental in nature, the resulting line graph seems to plot in the reverse direction.
Image
LineChart
The Line chart plots 'usageTrendDetails' on the X and usageDate on Y. Attaching a link with the code.
Clickhere
The line chart is plotting from left to right, however as highlighted in the image, it suddenly begins plotting from right to left and then goes back in the right direction. Any idea why this happening?
Sort your data before making the line:
data = data.sort(function(a,b){return a.date.getTime() - b.date.getTime();})
working code here
The data is sorted, the issue was with the way dates were being formatted after September. The logic for pre-pending a zero for months 0(Jan) to 8(Sep) wasn't handling Oct, Nov and Dec correctly, resulting in the months after September plotting backwards.
OLD CODE :
if(month<= 8){
month = "0"+(month+1);
}
NEW CODE : Handling Oct - Dec
if(month<= 8){
month = "0"+(month+1);
}else{
month = month + 1;
}
Here's the graph after the issue is fixed.
Click Here
I'm trying to plot data on a line graph where the x-axis are the months January to December.
The issue is: I can't seem to commence the line graph from anything other than the x-axis origin - which would be January.
Question - How can I set a start point, so the data line is plotted from March to December. I could set the data to be 0 for Jan and Feb, but I don't want the line to appear at these months.
Via http://c3js.org/samples/simple_regions.html - I can see you can set start and end regions to specify different types of lines (in this case dashes). Is there a similar way to set a start and end so January and February are hidden.
thanks
You can just use a null data point.
Here's sample code:
var chart = c3.generate({
data: {
columns: [
['data', null, null, 30, 200, 100, 400, 150, 250]
]
}
});
Here's the working fiddle: http://jsfiddle.net/jrdsxvys/1/
Having the current scale level for the time scale from d3.event.scale (e.g. 0.5 or 1.5), is there any rule of how to convert it to human readable form, like - day, week, month or year?
UPDATE:
Here is a draft of what I'm working on: http://cdpn.io/gzfyj. I'm basically seeking for a way to get time boundaries after zooming or panning and the zoom factor in above mentioned identifiers.
After zooming,
var width = x.domain();
var dur = width[1] - width[0];
will return the width of the scale in milliseconds. Then this duration can be converted to any form you like.
This is an working example where I have used moment.js to humanize the duration at the bottom of the graph: http://codepen.io/musically_ut/pen/DJqtw
var ext = x.domain();
var duration = moment.duration(ext[1] - ext[0]).humanize();
chart
.select("text.duration")
.text(duration);