Untitled

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
  Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
</script>
<script type="text/javascript">


google.load("visualization", "1", {packages:["controls"]});
  google.setOnLoadCallback(drawVisualization);


            function drawVisualization() {
                var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

     var control = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control',
        'options': {
            // Filter by the date axis.
            'filterColumnIndex': 0,
            'ui': {
                'chartType': 'LineChart',
                'chartOptions': {
                    'chartArea': {'width': '90%'},
                    'hAxis': {'baselineColor': 'none'}
                },
                'chartView': {
                    'columns': [0, 1, 2]
                },
                'minRangeSize': 1
            }
        },
        // Initial range: 1 to 4.
        'state': {'range': {'start': 1, 'end': 4}},
        view: {
            columns: [{
                type: 'number',
                calc: function (dt, row) {
                    return {v: row, f: dt.getFormattedValue(row, 0)};
                }
            }, 1, 2]
        }
    });

    //then reverse the process in the ChartWrapper's view.columns:

    var chart = new google.visualization.ChartWrapper({
        'chartType': 'AreaChart',
        'containerId': 'chart',
        'options': {
            // Use the same chart area width as the control for axis alignment.
            'chartArea': {'height': '80%', 'width': '90%'},
            'hAxis': {'slantedText': false},
            'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
            'legend': {'position': 'none'}
        },
        view: {
            columns: [{
                type: 'string',
                label: data.getColumnLabel(0),
                calc: function (dt, row) {
                    return dt.getFormattedValue(row, 0);
                }
            }, 1, 2]
        }
    });

  var dataTable = new google.visualization.DataTable();

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1SphK7Dqcok03TEGaxL-sO7JkovXoYOO3rDbtKGEjjEU/edit#gid=0');

      var nowone = getNowDate();
      query.setQuery("select A,B,C where A >= datetime '"+nowone+"' ");
      query.send(handleQueryResponse);

                dashboard.bind(control, chart);
                dashboard.draw(data);

function getNowDate(){
var d=new Date();
d.setDate(d.getDate() - 1);

var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var microsecond = d.getDate();

if (month.toString().length == 1) {
    month = '0' + month;
}

if (day.toString().length == 1) {
    day = '0' + day;
}

if (hour.toString().length == 1) {
    hour = '0' + hour;
}

if (minute.toString().length == 1) {
    minute = '0' + minute;
}

if (second.toString().length == 1) {
    second = '0' + second;
}

//while(microsecond.toString().length < 3) {
//    microsecond = '0' + microsecond;
//}

var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
return dateString;
}

function handleQueryResponse(response) {
    if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
    }

    var data = response.getDataTable();

 }
 }


        </script>
    </head>

    <body style="font-family: Arial;border: 0 none;">
        <div id="dashboard" style="width:1300px;overflow:scroll;">
            <div id="chart" style="position: relative; width: 1300px; height: 300px;"></div>
            <div id="control"></div>
        </div>
        <div id="junk_div" style="display: none;"></div>
    </body>

</html>