Google Visualization API & Google Apps Script & Google Sheet (10)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load('visualization', '1', {packages: ['corechart', 'controls']});
google.setOnLoadCallback(drawDashboard);

function drawDashboard() { 
  var query = new google.visualization.Query('你的Google Sheet的共用URL');  
  query.send(handleQueryResponse); 
}

function handleQueryResponse(response) {

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', "日期");  //日期
  dataTable.addColumn('number'); //開盤價
  dataTable.addColumn('number'); //最高價
  dataTable.addColumn('number'); //最低價
  dataTable.addColumn('number'); //收盤價
  dataTable.addColumn('number', '成交量');
  dataTable.addColumn('number', '未平倉量');

  var symbol, trade, low, open, close, high, vol, OI, day;
  var data = response.getDataTable();
  var rows = data.getNumberOfRows();
  for (var i = 1; i < rows; i++)
  {       
       trade =  new Date(data.getValue(i, 0));  
       low   = parseFloat(data.getValue(i, 3));
       open  = parseFloat(data.getValue(i, 1));
       close = parseFloat(data.getValue(i, 4));
       high  = parseFloat(data.getValue(i, 2));
       vol   = parseInt(data.getValue(i, 6));
       OI    = parseInt(data.getValue(i, 7));
       dataTable.addRow([trade, low, open, close, high, vol, OI]);
  }
  symbol = data.getValue(0, 24).substring(0, 6);
  
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  var CandlestickChart = new google.visualization.ChartWrapper({
      chartType: 'CandlestickChart',
      containerId: 'chart1_div',
      options: {
                  chartArea: {'height': '80%', 'width': '90%'},
                  title: symbol + '月 台指契約',
                  legend: {position: 'none'},
                  hAxis: {'slantedText': false},
                  candlestick: {
                                 fallingColor: { stroke : '#0f9d58', strokeWidth: 0, fill: '#0f9d58' },   // green
                                 risingColor: { stroke : '#a52714', strokeWidth: 0, fill: '#a52714' } // red
                  }
      },
      'view': {
            'columns': [
            {
                'calc': function(dataTable1, rowIndex) {
                    return dataTable1.getFormattedValue(rowIndex, 0);
                },
                'type': 'string'
            }, 1, 2, 3, 4]
      }

  });
  
  var columnVolChart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart2_div',
      'options': {
                 chartArea: {'height': '80%', 'width': '90%'},
                 title: symbol + '月 契約成交量',
                 legend: {position: 'none'},
                 hAxis: {'slantedText': false},
                 colors: ['rgb(153, 102, 255)']
      },
      'view': {
            'columns': [
            {
                'calc': function(dataTable1, rowIndex) {
                    return dataTable1.getFormattedValue(rowIndex, 0);
                },
                'type': 'string'
            }, 5]
      }
  });
  
  var columnOIChart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart3_div',
      'options': {
                 chartArea: {'height': '80%', 'width': '90%'},
                 title: symbol + '月 契約未平倉量',
                 legend: {position: 'none'},
                 hAxis: {'slantedText': false},
                 colors: ['rgb(255, 206, 86)']
      },
      'view': {
            'columns': [
            {
                'calc': function(dataTable1, rowIndex) {
                    return dataTable1.getFormattedValue(rowIndex, 0);
                },
                'type': 'string'
            }, 6]
      }
  });
  
  var control = new google.visualization.ControlWrapper({
      'controlType': 'ChartRangeFilter',
      'containerId': 'control_div',
      'options': {
                  'filterColumnIndex': 0,
                  'ui': {
                        'chartType': 'LineChart',
                        'chartView': {
                                   'columns': [0, 4]
                         },
                         'chartOptions': {
                                           'chartArea': {'width': '90%'},
                                           'hAxis': {'baselineColor': 'none'}
                         },
                         'minRangeSize': 86400000
                  }
      },
      'state': {'range': {'start': new Date(data.getValue(rows-15, 0)), 'end':  new Date(data.getValue(rows-1, 0))}}
  });  
  
  dashboard.bind(control, [CandlestickChart, columnVolChart, columnOIChart]);   
  dashboard.draw(dataTable);  
}
</script>