time labels are offset

The time labels are sometimes placed in the wrong place. I don't know under what conditions it occurs, but I've attached an example. The vertical lines mark the day boundaries and the labels are ambiguously centred below them. It would make more sense if they had their left hand edges aligned with the vertical lines, or if they were centred in the interval that represents the day the label describes.

Hmm, github won't let me attach a FF screenshot png showing the problem, sorry. 'Something went really wrong, and we can't process that file'. Anyway it's just a weekly graph of any data item - it's always the same.

@djh42

Thanks @djh42 I think it might be possible to do what your looking for by adjusting the value here to align:left: https://github.com/emoncms/graph/blob/master/graph.js#L689, the graph module would likely need an option to be user settable.

@TrystanLea

Thanks @TrystanLea. Can I just edit the graph.js file to experiment or do I need to build something?

@TrystanLea

@TrystanLea, I've been looking but I still don't understand. I found I can just edit the .js so that's fine. But I don't understand your suggestion. The line you pointed at is: 'plotdata.push(plot);' and I don't see what that has to do with time tick alignment. I've looked at the flot docs and there doesn't seem to be anything there about options for label alignment, so I'm a bit lost on helping myself.

The line you pointed at is: 'plotdata.push(plot);' and I don't see what that has to do with time tick alignment.

Actually at the time he posted Line 689 was

if (feedlist[z].plottype=="bars") { plot.bars = { align: "center", fill: (feedlist[z].fill ? (stacked ? 1.0 : 0.5) : 0.0), show: true, barWidth: view.interval * 1000 * 0.75 } };

it is currently line 687 due to a commit Trystan made after he posted the link but before you followed said link, that commit added 2 line of code pushing line 689 back to 687.

This is the pitfall of pointing to a line in "master" as master is always changing. for the link to be (always) useful it should point to a line at a specific point in time either by released version or by commit number, ie the link should have been https://github.com/emoncms/graph/blob/1.2.1/graph.js#L689.

@pb66

Ah thanks @pb66 that makes it clearer. It still doesn't help me I'm afraid, because that line is using flot options described at https://github.com/flot/flot/blob/master/API.md#customizing-the-data-series whereas I would need https://github.com/flot/flot/blob/master/API.md#customizing-the-axes or https://github.com/flot/flot/blob/master/API.md#time-series-data but none of those allow for the possibility. I think I may be getting some way to resolving the problem, but I still have to learn some more first.

Just to be clear, the problem is that time series ticks can be of two fundamentally different types. Those that include a time describe a particular instant or epoch and are appropriately aligned below the grid line/tick. But those that don't include a time, and just express a date, describe an interval, not an instant. So they are more appropriately aligned with the centre of the interval, or at least to the correct side of the tick so they are under the interval.

OK, so I have a fix for this. The problem is actually in flot rather than the graph module but here are the three lines that need inserting to get my desired behaviour:

*** Lib/flot/jquery.flot.time.orig.js
--- Lib/flot/jquery.flot.time.js
***************
*** 389,400 ****
--- 389,402 ----
                                                        }
                                                } else if (t < timeUnitSize.month) {
                                                        fmt = "%b %d";
+                                                       axis.options.interval = 1;      // djh 2019-01-14
                                                } else if ((useQuarters && t < timeUnitSize.quarter) ||
                                                        (!useQuarters && t < timeUnitSize.year)) {
                                                        if (span < timeUnitSize.year) {
                                                                fmt = "%b";
                                                        } else {
                                                                fmt = "%b %Y";
+                                                               axis.options.interval = 1;      // djh 2019-01-14
                                                        }
                                                } else if (useQuarters && t < timeUnitSize.year) {
                                                        if (span < timeUnitSize.year) {

*** Lib/flot/jquery.flot.orig.js
--- Lib/flot/jquery.flot.js
***************
*** 2206,2211 ****
--- 2206,2212 ----
  
                      if (axis.direction == "x") {
                          halign = "center";
+                         if (axis.options.interval) { halign = "left"; }       // djh 2019-01-16
                          x = plotOffset.left + axis.p2c(tick.v);
                          if (axis.position == "bottom") {
                              y = box.top + box.padding;

sounds like you need to raise an issue here then:
https://github.com/flot/flot

There seems to be activity there, so I am sure they would appreciate/consider a PR

Ah, excellent. It seems the project has sparked back into life. I've created issue #1608

Shouldn't this stay open until flot #1608 is resolved or some other solution is found?

Sorry, I assumed since the issue was with Flot rather than Emoncms this issue could be closed. In retrospect, I can see there is a good reason to keep it open. Apologies, I will past the full link to the Flot issue so the two issues will be referenced together: flot/flot#1608

Im not sure if Im following this issue correctly but looking at the offset I can see in the screenshots that you posted on #1608 and comparing to what I see here, is this still an issue? they look centred to me, but I'm sure that was always the case?

Im not sure if Im following this issue correctly but looking at the offset I can see in the screenshots that you posted on #1608 and comparing to what I see here, is this still an issue? they look centred to me, but I'm sure that was always the case?

You're looking at an image where the labels should be centred, since they reference a point in time. If you look at the other image I posted, where the labels refer to a period (a whole day), you can see I've modified it so the labels are NOT centred, to make it clear which interval the label belongs to. In unmodified code labels are always centred, which is ambiguous.

Navigation Menu

Repository navigation

time labels are offset #39

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

time labels are offset #39

Description

Activity

TrystanLea commented on Jan 10, 2019

djh42 commented on Jan 10, 2019

djh42 commented on Jan 12, 2019

pb66 commented on Jan 13, 2019

djh42 commented on Jan 13, 2019

djh42 commented on Jan 16, 2019

Frogmore42 commented on Feb 9, 2019

djh42 commented on Feb 9, 2019

djh42 commented on May 12, 2019

glynhudson commented on May 12, 2019

TrystanLea commented on Jan 21, 2020

djh42 commented on Jan 21, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions