How to create custom hAxis labels in Google Charts?

Question

I am using Google Charts for a simple Area Chart. I have many points to draw, i would like to set the interval between them. At the moment there is a list 1,2,3,4,5,6,7 etc

I would like to show all points but with custom hAxis labels, like: 0 5 10 15 20 etc

The code is:

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['Day', 'Visit', 'Applic.'],
            ['1', 19, 1],
            ['2', 100, 9],
            ['3', 103, 18],
            ['4', 42, 8],
            ['5', 34, 2],
            ['6', 63, 9],
            ['7', 35, 7],
            ['8', 427, 51],
            ['9', 314, 38],
            ['10', 71, 4],
            ['11', 27, 0],
            ['12', 25, 0],
            ['13', 78, 0],
            ['14', 54, 0],
            ['15', 60, 0],
            ['16', 47, 0],
            ['17', 29, 0],
            ['18', 16, 0],
            ['19', 10, 0],
            ['20', 26, 0],
            ['21', 200, 0],
            ['22', 255, 0],
            ['23', 160, 0],
            ['24', 30, 0],
            ['25', 35, 0],
            ['26', 9, 0],
        ]);

        var options = {
            vAxis: {minValue: 0},

            hAxis: {
                title: 'Days',               
            },                        
            pointSize: 8,
            colors: ['#9EC653', '#475825'],
            chartArea: {
                left: 40,
                top: 40,
                width: 600,
                height: 250
            },
            legend: {position: 'top', textStyle: {fontSize: 14}, alignment: 'center'},
            backgroundColor: '#f7f6f4',            
        };

        var chart = new google.visualization.AreaChart(document.getElementById('visits'));
        chart.draw(data, options);
    }
</script>

And the result is:

The horizontal labels represent all points, I need all of them, but showing specific horizontal labels. How can i set specific interval?

Thanks

Answer 1

This will be much easier to achieve if you enter your axis values as numbers instead of strings:

var data = google.visualization.arrayToDataTable([
    ['Day', 'Visit', 'Applic.'],
    [1, 19, 1],
    [2, 100, 9],
    [3, 103, 18],
    [4, 42, 8],
    [5, 34, 2],
    [6, 63, 9],
    [7, 35, 7],
    [8, 427, 51],
    [9, 314, 38],
    [10, 71, 4],
    [11, 27, 0],
    [12, 25, 0],
    [13, 78, 0],
    [14, 54, 0],
    [15, 60, 0],
    [16, 47, 0],
    [17, 29, 0],
    [18, 16, 0],
    [19, 10, 0],
    [20, 26, 0],
    [21, 200, 0],
    [22, 255, 0],
    [23, 160, 0],
    [24, 30, 0],
    [25, 35, 0],
    [26, 9, 0]
]);

You can then specify the hAxis.ticks option to tell the chart which values should be labeled on the axis:

hAxis: {
    title: 'Days',
    ticks: [0, 5, 10, 15, 25]
}