I am using a kendo scatter chart with pan and zoom option and locale setting. I have set locale as bg-BG and when I zoom in or zoom out the date/ time format not working correctly.
For example for bg-BG Month'year format is coming properly which is proper.
When I zoom in the format changes to month/day format which is not correct as per locale.
Zoom in again the format changes to HH:mm which is again wrong according to lcale format,
Here is the fiddle with the issue
I set locale in this way
kendo.culture('bg-BG');
If the kendo chart does not fit tomlocale then it should not work for first time itself.
Any help is appreaciated. Thanks in advance
If kendo shows you wrong date formats you can chceck date patterns for your language like this:
kendo.culture('bg-BG');
console.log(kendo.culture());
And then if you wanna explicitly set date patterns in your chart do it like so:
...
categoryAxis: {
labels: {
dateFormats: {
minutes: culture.calendar.patterns.T,
hours: culture.calendar.patterns.g,
days: culture.calendar.patterns.d,
weeks: culture.calendar.patterns.d,
months: "MM" + culture.calendar['/'] + "yyyy",
years: "yyyy"
},
},
....
Related
The following image contains a part of a scatter plot generated with plotly.js:
The red arrow shows the wrong value in ticklabel. It should be 53 2020.
If a zoom is made, then the right ticklabels are obtained:
The layout for xaxis.tickformat gives Week / Year.
This problem appears just when the ticklabel is generated when date is December 31st of any year.
The layout for xaxis is set as:
xaxis: {
type: 'date',
tickformat: '%V\n%Y',
ticks: 'outside',
ticklabelmode: 'period',
tickmode: 'auto',
autorange: true,
},
After a little research, the issue seems to be related to:
Plotly uses Date.getUTCFullyear to calculate ticklabels,
For a date given on December 31st, the result may be different according to getUTCFullYear in MDN.
One attention calling point is that the value of data showed in the first image when the mouse is over the point (following the green arrow), is the right one: 53, 2020!
The code for this issue can be found at:
codepen
Please, can anyone help to solve this issue? Thanks.
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 want to change the language to spanish in d3 dates.
to do this in D3 v3 you can use
var format = {
"decimal": ".",
"thousands": "",
"days": ["Domingo", "Lunes", .....]}
var localeFormatter = d3.locale(format)
but now in D3 v4 d3.locale is gone. and
d3.timeFormatDefaultLocale(format)
seems to do nothing i dont know if is a bug or what.
I dont want to format the time like this link D3 time-format.
i want the language to change.
i have tried
d3.local(format)
d3.timeFormatDefaultLocale(format)
d3.timeFormatLocale(format)
¿Can some one help me on this?...
In D3 v4, you should use
d3.formatDefaultLocale(format)
Looks like you need to do:
d3.timeFormatDefaultLocale(format);
Before you declare your scales, else D3 will take English as default.
I'm building a page with a Kendo scatter chart of data over time. The only catch is that the client wants the most recent data to the left. I've sorted the input datasource by date descending, but that seems to be blithely ignored, with the chart stubbornly plotting the data with dates ascending to the right.
Am I missing something, or is this simply unsupported?
You can set the reverse property on the xAxis to true:
xAxis: {
reverse: true
},
API Doc
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.