Set Google visualization line chart hAxis origin to its initial value

Question

Here is a sample fiddle with goole line chart where the chart is drawn as,

 var Xmin = data.getValue(0, 0);

        var options = {
                title : 'Sample graph',
                legend : {
                    position : 'bottom'
                },
                height : 400,
                interpolateNulls : true,
                'pointSize' : 5,
                'vAxis' : {
                    title : "Count",
                    'minValue' : 0,
                },
                'hAxis' : {
                    title : "Month",
                    'minValue' : Xmin,
                },
                'animation' : {
                    'duration' : 1000,
                    'easing' : 'in'
                },
            };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

How can i set the hAxis origin to Jan-13 instead of 0

Answer 1

If you want to stretch the lines to the edge of the chart, you need to use a continuous data type for your domain axis (number, date, datetime, timeofday) instead of a discrete (string) type. Since your data is month and year, you could use a date type:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Sales', 'Expenses'],
        [new Date(2013, 0), 1000, 400],
        [new Date(2013, 1), 1170, 460],
        [new Date(2013, 2), 660, 1120],
        [new Date(2013, 3), 1030, 540]
    ]);

    // get the range of dates
    var range = data.getColumnRange(0);
    // pull back the start just a bit so the first axis label will show
    range.min = new Date(range.min);
    range.min.setMilliseconds(-1);

    // format the dates
    var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM-yy'});
    dateFormatter.format(data, 0);

    var options = {
        title : 'Sample graph',
        legend : {
            position : 'bottom'
        },
        height : 400,
        interpolateNulls : true,
        pointSize : 5,
        vAxis : {
            title : "Count",
            minValue : 0,
        },
        hAxis : {
            title : "Month",
            format: 'MMM-yy',
            viewWindow: {
                min: range.min,
                max: range.max
            }
        },
        animation : {
            duration : 1000,
            easing : 'in'
        },
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});

see example: http://jsfiddle.net/asgallant/k3c9Q/