Google Charts - how to add a fixed scale on an axis

Question

I'm having trouble scaling my chart correctly. My chart represents data for every hour of the day in a 24 hour format, meaning that I need the numbers 0-24 on my linechart.

I've tried adding the logScale , minValue and maxValue properties to the hAxis , but nothing is working.

As you can see on the chart, the hour axis is not spanning a fixed axis from 0-24 hours, but instead from 9-15 hours.

I also only have 3 rows in my data set, which reside on the hours 9 , 14 and 15 . Despite this, the lines are spanning from 9-14 as if they have values; however there is no data there, so the lines should be running along the bottom at 0 between these two points.

How can I put a fixed horizontal scale on my chart, and have individual values on my lines for each hour?

Here's my code:

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);

function drawChart()
{
    var json = $.getJSON('my JSON data link', function(data)
    {
        var chartStructure = new google.visualization.DataTable();
        var chartData = [];

        chartStructure.addColumn('number', 'Hour');
        chartStructure.addColumn('number', 'Pageviews');
        chartStructure.addColumn('number', 'Unique Pageviews');
        chartStructure.addColumn('number', 'Sales');
        chartStructure.addColumn('number', 'Earnings in $AUD');

        for (i = 0; i < data.length; i++)
        {
            chartData[i] = [];
            chartData[i][0] = parseInt(data[i].hour);
            chartData[i][1] = parseFloat(data[i].profit);
            chartData[i][2] = parseFloat(data[i].profit);
            chartData[i][3] = parseFloat(data[i].sales);
            chartData[i][4] = parseFloat(data[i].profit);
            // These chartData values are not correct because I am testing

            chartStructure.addRows(chartData);
        }

        var options = {
            hAxis: {
                'minValue': 0, 
                'maxValue': 24
            }
        };

        var chart = new google.charts.Line(document.getElementById('todays-total-sales'));

        chart.draw(chartStructure, options);
    });
}

$(window).resize(function()
{
    drawChart();
});

Answer 1

Use viewWindow .

hAxis: {
      title: 'Time',
      viewWindow:{
          max:1000,
          min:-100
      }
    },

JSFiddle

UPDATE

If you are using MaterialCharts please note that the options have different syntax !

In order for you to be able to use the classic options, you need to change

chart.draw(data, options); 

to

chart.draw(data, google.charts.Line.convertOptions(options));

HERE is your updated fiddle.

Answer 2

 var options = {
                title: "Posted Memes",
                width: 450,
                height: 300,
                is3D:true,
                bar: { groupWidth: "95%" },
                legend: { position: "none" },
                vAxis: {
                    title: 'No of Memes',
                    viewWindowMode: 'explicit',
                    viewWindow: {
                        max: 180,
                        min: 0,
                        interval: 1,
                    },

                }

            };