Problem with overlapping tick labels

[james...@sri.com]

Hi,
  I'm having trouble with the labels on my graph.  It is a time series graph with time on the X axis.  I'm updating the data in realtime, and I'm also using selection/overview/zoom capabilities to zoom in and out of the data.
My issue is that under some circumstances the zoom factor is such that the ticks are spaced too closely and the tick labels are butted right against one another or partially overlap.  For example, two consecutive tick labels such as "15:05:45" and 15:05:50" might appear on the screen as "15:05:4515:05:50" or, even worse, the starting digits of the next label will be overlapped on top of ending digits of the previous one.
  It looks like the algorithm that figures out the tick spacing is going just a little too far -- i.e. it is allowing too many ticks to be displayed before bumping out to the next quantization level.

  My graph options are minimal:
xaxis: {
  mode: "time",
  timeformat:  "%H:%M:%S"
}
(Actually, I get the same problem when I don't specify timeformat at all and just use the defaults...)

I'm using jquery.flot.js v0.8.1, jquery.flot.time.js v1.0, and jquery.flot.selection.js v1.1

I would very much like to continue using Flot's default algorithms for automatically figuring out the appropriate number of ticks to display rather than somehow roll my own. 

Does anyone know a way around this problem???
Thanks,
Jim

[dnschnur]

This sounds like a bug in 0.8; we reworked the way axis labels are drawn, and it's entirely possible that we overlooked something.  Can you provide us with a screenshot demonstrating the problem?  And are those really the only plot options that you're using?

[james...@sri.com]

On Saturday, October 19, 2013 11:10:29 PM UTC-4, dnschnur wrote:

This sounds like a bug in 0.8; we reworked the way axis labels are drawn, and it's entirely possible that we overlooked something.  Can you provide us with a screenshot demonstrating the problem?  And are those really the only plot options that you're using?

Here's a screenshot showing the problem:

Those were just the label options.  Here is the complete list of options I use for that particular graph.
      var CapacitySummaryGraphOptions = {
        series: {
          shadowSize: 0  //Drawing is faster without shadows
        },
        legend: {
          show: true,
          position: "nw",
          backgroundOpacity: 0.75
        },
        lines: {
          show: true,
          lineWidth: 1
        },
        points: {
//          show: true
        },
        yaxis: {
          min: 0,
          position: "right"
        },

        xaxis: {
          mode: "time",
          timeformat: "%H:%M:%S"

        },
        selection: {
          mode: "x"
        }
      };
 
Thanks!
Jim

[dnschnur]

I've created issue 1174 to track this problem.  In the meantime try using minTickSize: [20, "second"] to force the ticks to spread out a little more.  Let me know how that works.