google chart discrete axis show line?

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.

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?

asgallant asgallant · Accepted Answer · 2014-07-02T13:42:26

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/

google chart discrete axis show line?

1 Answers