Google Charts - Area Chart Not Dividing Up Gridlines Properly

Question

I trying to create a twenty four hour graph showing the average wind direction in degrees for each three hour period. I'd like to have the grid lines at 45 degree increments so I've specified a viewWindow: {min: 0, max: 360}, gridlines: {count: 9}} which I expected to give me grid lines at 0, 45, 90, 135, 180, 225, 270, 315 and 360 however for some reason Google Charts is giving me gridlines at 0, 40, 80, 120, 160, 200, 240, 280 and 320 and there is no grid line at all at 360 even though points are being plotted there. I've created a stripped down version of my working code:

`google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(wind_history_render);

function wind_history_render() {
    var wind_history_data = google.visualization.arrayToDataTable([
        ['Time', 'Direction'],
        ['00', 170],
        ['03', 190],
        ['06', 90],
        ['09', 360],
        ['12', 280],
        ['15', 300],
        ['18', 0],
        ['21', 320]
    ]);
    var wind_history_options = {
        title: 'Summit 24 Hour Wind History',
        width: '100%',
        height: '100%',
        legend: {
            position: 'none'
        },
        axisTitlesPosition: 'out',
        areaOpacity: 0.0,
        series: {
            0: {
                color: "purple",
                targetAxisIndex: 0,
                pointSize: 5,
                lineWidth: 0
            }
        },
        vAxes: {
            0: {
                title: 'Direction',
                titleTextStyle: {
                    color: 'purple',
                    italic: false,
                    bold: true
                },
                textStyle: {
                    bold: true
                },
                viewWindow: {
                    min: 0,
                    max: 360
                },
                gridlines: {
                    count: 9
                }
            }
        },
        hAxis: {
            textStyle: {
                bold: true
            }
        }
    };
    var windHistoryChart = new google.visualization.AreaChart(document.getElementById('windspeed-and-direction'));
    windHistoryChart.draw(wind_history_data, wind_history_options);
}`

A working jsfiddle example here: http://jsfiddle.net/rpushor88/K4Gnh/3/ to demonstrate what is going on. I've tried rendering this in both IE 11 and Chrome Version 35.0.1916.153 m which is the latest version as of this writing.

Any help would be greatly appreciated

Answer 1

Since you know exactly what values you want the gridlines to appear on, the easiest way to do this is to specify the vAxis.ticks option:

vAxis: {
    ticks: [0, 45, 90, 135, 180, 225, 270, 315, 360]
}

ex: http://jsfiddle.net/asgallant/K4Gnh/7/