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();
});

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();
});

• javascript
• charts
• google-visualization

2 Answers 2

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.

 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,
                    },

                }

            };