Using google charts API with line chart controlled by range finder.  
I am stuck with two annoying issues:   

1. The control has extra space before and after the data values it was set to follow, leaving an ugly space the control can slide to.
2. I can not seem to get the control to snap to data value.

If you can give me a pointer what I am doing wrong I will appreciate it a lot.  

I set a JSfiddle here: <http://jsfiddle.net/Db4fm/2/>  

Thank you very much!

JS
--

```
function drawChart() {
var activity_breakdown = [
    ['Text Index', 'Numeric Index', 'totals', 'Value 1', 'Value 2', 'Value 3', 
     'Value 4', 'Value 5', 'Value 6', 'Value 7'],
    ['W15', 1, 13, 2, 0, 20, 2, 1, 0, 0],
    ['W16', 2, 20, 0, 1, 10, 3, 0, 0, 2],
    ['W17', 3, 19, 3, 0, 20, 2, 0, 2, 0],
    ['W18', 4, 31, 0, 2, 10, 4, 1, 0, 3],
    ['W19', 5, 11, 1, 0, 10, 2, 0, 3, 0],
    ['W20', 6, 26, 0, 0, 10, 6, 0, 0, 4],
    ['W21', 7, 39, 2, 0, 30, 2, 1, 2, 0],
    ['W22', 8, 41, 0, 3, 10, 7, 0, 0, 0],
    ['Today', 9, 44, 0, 1, 20, 2, 1, 0, 5]
];

// Data table
var data1 = google.visualization.arrayToDataTable(activity_breakdown);

// Chart
var chart1 = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_activity',
    dataTable: data,
    options: {
        width: 950,
        height: 300,
        chartArea: {
            left: 40,
            top: 20,
            width: 700,
            height: 250
        },
        legend: {
            position: 'right',
            textStyle: {
                fontSize: 13
            }
        }
    },
    view: {
        columns: [0, 3, 4, 5, 6, 7, 8, 9]
    }
});

var control1 = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
        'containerId': 'control_activity',
        'options': {
        // Filter by the date axis.
        'filterColumnIndex': 1,
            'ui': {
            'chartType': 'LineChart',
                'snapToData': true, // this bugger is not working
            'chartOptions': {
                width: 950,
                height: 50,
                chartArea: {
                    left: 40,
                    top: 0,
                    width: 700,
                    height: 50
                },
                    'hAxis': {
                    textPosition: 'none'
                }
            },
                'chartView': {
                'columns': [0, 2]
            },
                'minRangeSize': 1
        }
    },
        'state': {
        'range': {
            'start': 7,
                'end': 8
        }
    }
});

var dashboard1 = new google.visualization.Dashboard(
document.getElementById('dashboard_activity'));

// Draw
dashboard1.bind(control1, chart1);
dashboard1.draw(data1);

google.visualization.events.addListener(control1, 'statechange', function () {
    var v = control1.getState();
    document.getElementById('dbgchart').innerHTML = v.range.start + ' -> ' +
    v.range.end;
    return 0;
});

// FSM knows why but without this line this line the code will not run...
var data = new google.visualization.DataTable();
}

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

```

HTML
----

```
<div id="dashboard_activity">
    <div id="chart_activity"></div>
    <div id="control_activity"></div>
</div>
<p>Debug range: <span id="dbgchart">Init</span></p>

```