google chart discrete axis show line? - google-visualization

Question

I'm using google charts with discrete values and can't seem to get the vAxis line to be drawn (in black).
It appears when graphic in Continuous values but I don't want the chart to be spaced out that way.
here are the 2 types of graphs.
http://jsfiddle.net/cFHJY/
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var discreteData = new google.visualization.DataTable();
discreteData.addColumn('string', 'Number');
discreteData.addColumn('number', 'Value');
discreteData.addRows([
['1.492', 10],
['30.701', 17],
['127.469', 6],
['749.382', 11]
]);
var discreteChart = new google.visualization.ColumnChart(document.getElementById('discrete_chart_div'));
discreteChart.draw(discreteData, {
title: 'Discrete Axis Line Chart'
});
var continuousData = new google.visualization.DataTable();
continuousData.addColumn('number', 'Number');
continuousData.addColumn('number', 'Value');
continuousData.addRows([
[1.492, 10],
[30.701, 17],
[127.469, 6],
[749.382, 11]
]);
var continuousChart = new google.visualization.ColumnChart(document.getElementById('continuous_chart_div'));
continuousChart.draw(continuousData, {
title: 'Continuous Axis Line Chart'
});
}
How do I get the vAxis line to be drawn?

Answer 1

The "vAxis line" is actually the hAxis baseline, which is only available to continuous axes. With a bit of hackery, you can put your data on a continuous axis while appearing to keep its discrete nature. Use a DataView to convert your data to a "number" type (using the row index for the value and the string value as the formatted value) and build the hAxis.ticks option from the value/formatted value pairs in the view:
function drawChart() {
var discreteData = new google.visualization.DataTable();
discreteData.addColumn('string', 'Number');
discreteData.addColumn('number', 'Value');
discreteData.addRows([
['1.492', 10],
['30.701', 17],
['127.469', 6],
['749.382', 11]
]);
var view = new google.visualization.DataView(discreteData);
view.setColumns([{
type: 'number',
label: discreteData.getColumnLabel(0),
calc: function (dt, row) {
return {v: row + 1, f: dt.getFormattedValue(row, 0)};
}
}, 1]);
var ticks = [];
for (var i = 0; i < view.getNumberOfRows(); i++) {
ticks.push({v: view.getValue(i, 0), f: view.getFormattedValue(i, 0)});
}
var range = view.getColumnRange(0);
var offset = 0.5; // change this to move the left/right margins of the chart
var discreteChart = new google.visualization.ColumnChart(document.getElementById('discrete_chart_div'));
discreteChart.draw(view, {
title: 'Discrete Axis Line Chart',
hAxis: {
ticks: ticks,
viewWindow: {
min: range.min - offset,
max: range.max + offset
},
// set gridlines.color to "transparent" to hide the vertical gridlines
/*
gridlines: {
color: 'transparent'
}
*/
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
Ex: http://jsfiddle.net/asgallant/h4Kfd/