google / google-visualization-issues

288 stars 35 forks source link

Bug: LineChart renders ugly, multi-line truncated dates, with ellipses. #1137

Open orwant opened 9 years ago

orwant commented 9 years ago
What steps will reproduce the problem?

1. Visit my demo page:
   http://www.pmarks.net/posted_links/gviz_date_axis_bug.html

2. Manipulate the time axis, and observe the dates as they approach
   the right side of the chart.

Expected behavior: The date should appear normally until the grid
line exits the right side, at which point it should cleanly disappear.

Actual behavior: Madness; the date jumps through several states:
- One line
- Two lines
- Two lines with ellipsis
- One line with ellipsis
- Three-dot ellipsis
- Two-dot ellipsis
- Blank

In my demo page, the LineChart is maximized, and the axis is controlled
by a ChartRangeFilter.

What component is this issue related to?
LineChart

Are you using the test environment (version 1.1)?
No

What operating system and browser are you using?
Tested on Goobuntu, with Chrome 25 and Firefox 18.

I've attached a copy of my demo page, along with a few screenshots
of the bug.

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by pmarks@google.com on 2013-02-02 04:20:55


orwant commented 9 years ago
I found a solution, but I don't know if it's fully correct.  In the getTicksInfoForAlt_
function, the width is calculated as:

Min(interval between ticks,
    distance from left canvas edge,
    distance from right canvas edge)

But, in my example above, the text is always rendered to the *left* of the grid line,
so it doesn't make any sense for the right edge to limit the available width.

When I commented out the third case, the bug disappeared.

Original issue reported on code.google.com by pmarks@google.com on 2013-05-09 01:24:24

orwant commented 9 years ago
I think I understand what's going on now.  The width calculations assume that the text
is *centered* on the grid line.  This assumption makes sense for hAxis:{textPosition:
'out'}, but it breaks down for hAxis:{textPosition: 'in'}.

Original issue reported on code.google.com by pmarks@google.com on 2013-05-09 21:28:02

orwant commented 9 years ago
I've found a workaround:
  options: {
    ...
    theme: 'maximized',
    hAxis: {allowContainerBoundaryTextCufoff: true},
  }

The documentation claims that allowContainerBoundaryTextCufoff requires a discrete
axis.  Mine is continuous, but it works nonetheless.

Original issue reported on code.google.com by pmarks@google.com on 2013-05-09 23:04:35