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

admin管理员组

文章数量:1386673

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

Share Improve this question Follow asked Jul 8, 2015 at 11:51 mightyspaj3mightyspaj3 47111 gold badge88 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

                }

            };

本文标签： javascriptGoogle Chartshow to add a fixed scale on an axisStack Overflow