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

<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"]});

google.setOnLoadCallback(getSpreadsheetData);

function getSpreadsheetData() {
         $("#auth").html("免責聲明：以下資料與圖片內容皆為教學使用，勿作為投資之依據，所有內容將不負任何投資盈虧之責!!!");
         google.script.run.withSuccessHandler(getSGXPicData).getSGXData();
}

function getSGXPicData(data) {
         //create data table object
         var dataTable = new google.visualization.DataTable();

         //define columns
         dataTable.addColumn('string', data[0][0]);  //日期
         dataTable.addColumn('number', data[0][4]);  //收盤價
         dataTable.addColumn({type: 'string', role: 'annotation'});
         dataTable.addColumn('number', data[0][25]); //摩台換倉成本
         dataTable.addColumn({type: 'string', role: 'annotation'});
         dataTable.addColumn('number', data[0][6]);  //未平倉量

         var trade, closeprice, averageprice, OI;
         for (var i = 0; i < data.length; i++)
         {
              trade = data[i][0];
              closeprice = parseFloat(data[i][4]);
              averageprice = parseFloat(data[i][25]);
              OI = parseInt(data[i][6]);
              if(i != data.length-1)
                 dataTable.addRow([trade, closeprice, null, averageprice, null, OI]);
              else if(i == data.length-1)
                 dataTable.addRow([trade, closeprice, String(closeprice), averageprice, String(averageprice), OI]);
          }               

          var options = {
                         width: 1500, 
                         height: 380, 
                         title: '折線圖：摩台未平倉量與成本',
                         hAxis: { 
                                  title: "日期", 
                                  format: 'y/d/m'
                                  },
                         vAxes: { 
                                  0:{ title: '摩台指數'}, 
                                  1:{ title: '摩台未平倉量', maxValue: 420000}
                                  },
                         series:{
                                  0:{targetAxisIndex:0},
                                  1:{targetAxisIndex:0},
                                  2:{targetAxisIndex:1}
                                  },
                         crosshair: { trigger: 'both' },
                         tooltip: { trigger: 'selection' }
                         };                        
                         
          var chart1 = new google.visualization.LineChart(document.getElementById('chart'));          
          
          google.visualization.events.addListener(chart1, 'ready', function () {
                 chart1.setSelection([{row:99, column:1}]); // Select one of the points.
                 png = '<a href="' + chart1.getImageURI() + '">Printable version</a>';
                 console.log(png);
          });
          
          chart1.draw(dataTable, options);          
          
          var options2 = {
                         width: 1500, 
                         height: 380, 
                         title: '組合圖：摩台未平倉量與成本',
                         hAxis: { 
                                  title: "日期", 
                                  format: 'y/d/m'
                                  },
                         vAxes: { 
                                  0:{ title: '摩台指數'}, 
                                  1:{ title: '摩台未平倉量', maxValue: 420000}
                                  },
                         series:{
                                  0:{type: "line", targetAxisIndex:0},
                                  1:{type: "line", targetAxisIndex:0},
                                  2:{type: "bars", targetAxisIndex:1}
                                  },
                         crosshair: { trigger: 'both' },
                         tooltip: { trigger: 'selection' }
                         };
          
          var chart2 = new google.visualization.ComboChart(document.getElementById('chart2'));
          
          google.visualization.events.addListener(chart2, 'ready', function () {
                 chart2.setSelection([{row:99, column:1}]); // Select one of the points.
                 png = '<a href="' + chart2.getImageURI() + '">Printable version</a>';
                 console.log(png);
          });
          
          chart2.draw(dataTable, options2);
          
          var content = '資料來源：<a href=\"http://www.sgx.com/\" target=\"_blank\" title=\"新加坡期貨交易所\">新加坡期貨交易所</a>';
          $("#source").html(content);
} 
</script>