discrete hAxis values with gridlines

1,587 views
Skip to first unread message

Allen Firstenberg

unread,
Jul 3, 2012, 5:35:04 PM7/3/12
to google-visua...@googlegroups.com
If I read the documentation for https://developers.google.com/chart/interactive/docs/gallery/linechart correctly, the hAxis.gridlines are only available if the values are continuous. We have several charts that have discrete values for which we want to provide the gridlines for. 

Am I missing an alternate way to provide the lines? 
Are there any suggestions about how we can create a pseudo-continuous set of values with the X-axis labeled as if they were the discrete values? 
Any other thoughts about the best way to achieve this effect?

Thanks!
Allen

asgallant

unread,
Jul 3, 2012, 5:59:32 PM7/3/12
to google-visua...@googlegroups.com
It largely depends on your data, but the answer is likely no.  You would have to have axis values that can be translated into a continuous set ("Set 1, Set 2, Set 3" into type number, "January, February, March" into type date; "Foo, Bar, Baz" would not work).

What you can try, though, is using domain-column annotations of type "line".  This draws a vertical line for each axis value with a non-null entry in the annotation role column (use a blank space " " to avoid showing a label on the line).  See column roles for details.

Israel Brewster

unread,
Mar 18, 2015, 12:58:14 PM3/18/15
to google-visua...@googlegroups.com
Sorry to resurrect an old thread, but I'm trying to accomplish this as well. I need a discrete axis because I need to use a stepped area chart, which requires a discrete axis (rather than simply being able to say this value remains until the next data point on a continuous axis). But I also need vertical dividers at certain points - specifically, in my case, the graph shows days of the week (Sunday, Monday, etc), and I want a vertical line between the days.

Following this suggestion, I added an annotation column:

data.addColumn({type:'string',role:'annotation'});

and populated it either with a string (just using a space didn't appear to work) or null. This had the effect of giving me short little lines at the bottom of my graph, in the proper locations, with the string as a label. Ok, good start, but now I need to extend the line vertically to cover the entire graph. The documentation has a passing reference to this:

You can specify the line style by setting this chart option: annotation: {'column_id': {style: 'line'}}

However, adding the following to my options didn't appear to have any effect:

annotation:{
    2:{style:'line'}
}
 
Of course, I have no idea if 2 is even the proper value for column id - it is column 2, assuming 0 based numbering, starting from the first data column (I have the X axis column, two data columns, and then this "annotation" column).

Any additional hints as to how to make this work? Thanks.
Reply all
Reply to author
Forward
0 new messages