How to get google charts X-Axis points starting at the left most point

问题

I'm using the Google API for charts in my application. For that I'm using multiple charts in the same page. My problem is giving padding to the charts, if I give more points the chart area occupy more space in that div and if i give only a few points the chart area occupy less space and in center aligned. the first chart is aligned properly from left to right and the second chart with two points is aligned in center.

How do I make all the charts with the same alignment from left most to the right most point as like in the first chart?

Here is my code.

<script>                                                     

             var data1 = google.visualization.arrayToDataTable([
                    ['year', 'Cats'],                       
                    ['2009',   20],
                    ['2010',   23],
                    ['2011',   34],
                    ['2012',   43]
            ]);  
            var data2 = google.visualization.arrayToDataTable([
                    ['year', 'Cats'],                       
                    ['2007',   20],
                    ['2008',   23]

            ]);                 
        var options = {
            pointSize: 5,
            width: 211,
            height: 90,
            backgroundColor: '#ffffff',
            chartArea: {
            left: 10,
            top: 10,
            width: 195,
            height: 56
        },
            legend: {position: 'none'},
            hAxis: {
            baselineColor: '#fff',
            gridlineColor: '#fff',
            textStyle: {italic: false, color: '#ccc', fontSize: 10}
        },
        vAxis: {
            baselineColor: '#fff',
            gridlineColor: '#fff',
            textPosition: 'none'
        },
        tooltip: {
            textStyle: {fontSize: 10}
        },
        series:{
            0:{
                color:'#0066CC'
            }
        }
    };
    var chart1 = new google.visualization.LineChart(document.getElementById('chart1'));
    var chart2 = new google.visualization.LineChart(document.getElementById('chart2'));
    chart1.draw(data1, options);
    chart2.draw(data2, options);
</script>

回答1:

See the following fiddle for how I got the start and end points of both charts to be vertically aligned:

http://jsfiddle.net/Fresh/E2yq6/

To achieve this I inserted null data points into "data2" to ensure that both charts would have the same amount of points:

var data2 = google.visualization.arrayToDataTable([
    ['year', 'Cats'],                       
    ['2007',   20],
    [null, null],
    [null, null],
    ['2008',   23]
]);

I then used the "interpolateNulls : true" setting in the second chart's options object to automatically calculate the positions of the null data points.

As both charts now have the same amount of data points the end result is this: