GOOGLE CHARTS BUG REPORT
Inconsistent X-Axis Gridlines with timeofday Data Type

================================================================================

SUMMARY

Google Charts' LineChart produces unpredictable and inconsistent X-axis gridline
spacing when using the timeofday data type, particularly in charts with sliding
windows or dynamic axis ranges. The library ignores configuration parameters for
gridline control and auto-calculates divisions based on pixel-space calculations
rather than respecting explicit time-interval specifications.

PROBLEM DESCRIPTION

OBSERVED BEHAVIOR
When rendering a chart with:
• Data type: addColumn('timeofday', 'Time')
• Data: 360 one-minute-interval data points (6-hour range)
• Display window: Sliding 120-point window (2-hour visible range)
• Configuration: Explicit gridline count parameters

The X-axis gridlines consistently shift between multiple intervals:
• 30-second divisions (2 subdivisions per minute)
• 1-minute divisions (single gridline per minute)
• 2-minute divisions
• 5-minute divisions
• Other arbitrary intervals

This occurs RANDOMLY as the user scrolls the slider, making the chart appear
broken or malfunctioning to end users.

ROOT CAUSE ANALYSIS
Google Charts appears to be calculating gridline positions using internal axis
range mathematics in MILLISECONDS rather than respecting data-based time
intervals. The library:

1. Converts the visible time range to millisecond deltas
2. Calculates "nice" numbers for gridline divisions (powers of 2, 5, 10)
3. Renders gridlines at those calculated positions
4. IGNORES or overrides explicit configuration parameters

This causes the number and spacing of gridlines to vary based on:
• How many pixels are available for rendering
• The exact pixel width of the chart container
• The visible data range (which changes as the user scrolls)

ATTEMPTED WORKAROUNDS (ALL FAILED)

1. EXPLICIT COUNT PARAMETERS
   javascript code:
   gridlines: {color:'numberfomat within controlwrapper type controlType:numberrangefilter #999', count:24},
   minorGridlines: {color:'#ddd', count:4}

   Result: Ignored by library

2. SHOWTEXTEVERY PARAMETER
   javascript code:
   showTextEvery: 5

   Result: Parameter doesn't work reliably with timeofday type

3. EXPLICIT TICKS ARRAY
   javascript code:
   var ticks = [];
   for (var i = 0; i < data.getNumberOfRows(); i += 5) {
   ticks.push(data.getValue(i, 0));
   }
   options.hAxis.ticks = ticks;

   Result: Ticks are placed, but gridlines still auto-calculate based on axis
   range

4. TICKINTERVAL SPECIFICATION
   javascript code:
   hAxis: {tickInterval: [5, 'minute']}

   Result: Parameter not supported for timeofday type

5. CUSTOM SVG GRIDLINE OVERLAY

   • Disabled Google Charts gridlines
   • Drew custom lines at precise intervals
     Result: Works but causes rendering performance issues with frequent redraws

SUCCESSFUL WORKAROUND (Using String Type Instead of timeofday)

The only successful workaround is abandoning timeofday and using string type:

javascript code:
data.addColumn('string', 'Time'); // Instead of 'timeofday'
data.addRows([['14:23:45', 2.5, 0.042], ...])

Then explicitly setting ticks works:

javascript code:
options.hAxis.ticks = ['14:00:00', '14:05:00', '14:10:00', ...];

DISADVANTAGE: Requires manual time formatting and loses automatic
time-formatting capabilities.

EXPECTED BEHAVIOR (DESIRED FIX)

When a user specifies gridline configuration parameters, Google Charts should:

1. RESPECT EXPLICIT COUNT SETTINGS for both major and minor gridlines
2. RESPECT EXPLICIT TICKS ARRAYS by placing gridlines only at specified
   tick positions
3. PROVIDE A TIMEINTERVAL PARAMETER for timeofday axes, similar to numeric
   axes
4. MAINTAIN CONSISTENT GRIDLINE SPACING across axis range changes
   (scrolling/zooming)
5. ENSURE GRIDLINES ALIGN WITH DATA INTERVALS rather than arbitrary
   pixel-space calculations

STEPS TO REPRODUCE

1. Create a chart with 360+ data points at 1-minute intervals

2. Use addColumn('timeofday', 'Time')

3. Implement a sliding window that shows only 120 points

4. Apply configuration:
   javascript code:
   gridlines: {count: 24},
   minorGridlines: {count: 4}

5. Render chart and scroll slider to change visible range

6. OBSERVE: Gridline spacing changes inconsistently as window moves

EXPECTED: Gridlines remain at consistent 5-minute intervals regardless of
scrolling.

IMPACT ASSESSMENT

• User Experience: Appears as a broken/buggy chart
• Data Visualization: Inconsistent axis makes trend analysis difficult
• Accessibility: Creates visual confusion for monitoring applications

TECHNICAL ENVIRONMENT

Affected Versions: Google Charts 1.x (current version as of February 2026)
Tested In: Chrome, Edge, Firefox

PRIORITY SUGGESTION

HIGH - This affects any dashboard or monitoring application using time-series
data with interactive time windows (scrolling, zooming, range selection).

================================================================================
End of Bug Report