Graphic lines are not supported for category axes. Since the data in question uses rows as categories (X-axis labels), it is impossible to determine how to “separate” them. However, you can get around this using the following methods.
Trick 1: Rotate Numeric Data
So now you have lines, which means there are no grid lines. However, we want to use grids, so we need to fix this small problem. Thus, we rotate our first column (X) into a number with a format on it so that it indicates “A” or “B” or “C” when you hover over it (and in the legend):
var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'Cats'); data.addColumn('number', 'Blanket 1'); data.addRows([ [{v: 1, f:'A'}, 1, 10], [{v: 2, f:'B'}, 2, 5], [{v: 3, f:'C'}, 4, 12], [{v: 4, f:'D'}, 8, 5] ]);
However, this does not solve the problem. Now we have the numbers on the lower axis, cut off at weird 0.8 intervals. Therefore, we want to fix it. Unfortunately, with hAxis you cannot set the min / max value and stick to it (I don't know why). We can fix the mines by adding the baseline: 0 to our parameters.
To get max, we need to add a dummy series.
Put it all together and we get the following:
function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'Cats'); data.addColumn('number', 'Blanket 1'); // This dummy series is to extend the chart from 0-5 for padding data.addColumn('number', null); data.addRows([ [{v: 1, f:'A'}, 1, 10, null], [{v: 2, f:'B'}, 2, 5, null], [{v: 3, f:'C'}, 4, 12, null], [{v: 4, f:'D'}, 8, 5, null], [{v: 5, f:''}, null, null, {v: 0, f:''}] ]); options = { curveType: 'function', lineWidth: 2, hAxis: { // Show a baseline at 0 baseline: 0, // 6 Gridlines, 4 labels + left and right for padding gridlines: { count: 6 }, }, vAxis: { baseline: 0, }, series: [ {}, {}, // Hide our dummy series { lineWidth: 0, pointsize: 0, visibleInLegend: false }, ] }; chart1 = new google.visualization.LineChart(document.getElementById('visualization')); chart1.draw(data, options); }
Now it looks more like what you want. There are two main questions. One of them is that if you hover over the bottom right of the chart, a tooltip will appear (this is not a big problem, I hope, although you may need to capture errors if you make the chart interactive with events). Another is that the bottom of our chart displays numbers, not letters.
Unfortunately, there is no easy way to format numbers as letters (at least until Google uses the full set of ICU templates, not just dates / numbers). Therefore, we need to make another way around the problem. Basically, I am creating a completely new diagram to make shortcuts. Then I will format it so that it hides everything except the shortcuts, and make sure that it is aligned horizontally using the diagram above.
function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('number', 'x'); data.addColumn('number', 'Cats'); data.addColumn('number', 'Blanket 1'); // This dummy series is to extend the chart from 0-5 for padding data.addColumn('number', null); data.addRows([ [{v: 1, f:'A'}, 1, 10, null], [{v: 2, f:'B'}, 2, 5, null], [{v: 3, f:'C'}, 4, 12, null], [{v: 4, f:'D'}, 8, 5, null], [{v: 5, f:''}, null, null, {v: 0, f:''}] ]); options = { curveType: 'function', lineWidth: 2, hAxis: { // Show a baseline at 0 baseline: 0, // 6 Gridlines, 4 labels + left and right for padding gridlines: { count: 6 }, // Hide our labels textPosition: 'none' }, vAxis: { baseline: 0, }, series: [ {}, {}, // Hide our dummy series { lineWidth: 0, pointsize: 0, visibleInLegend: false }, ] }; // Add dummy data for the axis labels var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'x'); data2.addColumn('number', 'dummy'); data2.addRows([ ['A', null], ['B', null], ['C', null], ['D', null] ]); chart1 = new google.visualization.LineChart(document.getElementById('visualization')); chart1.draw(data, options); chart2 = new google.visualization.LineChart(document.getElementById('visualization2')); chart2.draw(data2, { chartArea: { top:0, height:"0%" }, min: 0, max: 0, hAxis: { baselineColor: '#FFFFFF' }, vAxis: { baselineColor: '#FFFFFF', direction: -1, textPosition: 'none', gridlines: { color: '#FFFFFF' } } }); }
Just make another one below the first one and use CSS to align it correctly (put it in the same position or something else), and it looks like the labels belong to the diagram above.
This is not nice, but it works.