HTML形式のスプレッドシートを使用したGoogleダッシュボード

私の膝に落ちたばかりの新しいプロジェクトに取り組んでいます。私はGoogleのグラフを作成する方法と、これまでのところGoogleのスプレッドシートからデータをフィードする方法を検討してきました。HTML形式のスプレッドシートを使用したGoogleダッシュボード

私は情報のためにhereを見てきましたが、データを取得するためにGoogleスプレッドシートに照会して対ファイルに含まれているときにデータを操作するだけでは接続できません。

Googleのスプレッドシートに手を差し伸べるために何が置き換えられ、調整される必要があるかを把握しようと、以下のコードを見てきましたが、私は何か作業を試みることができず、このような特定のもののために、YouTubeのガイドの方法で多くのt。

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the controls package. 
     google.charts.load('current', {'packages':['controls']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawDashboard); 

     // Callback that creates and populates a data table, 
     // instantiates a dashboard, a range slider and a pie chart, 
     // passes in the data and draws it. 
     function drawDashboard() { 

     // Create our data table. 
     var data = google.visualization.arrayToDataTable([ 
      ['Name', 'Donuts eaten'], 
      ['Michael' , 5], 
      ['Elisa', 7], 
      ['Robert', 3], 
      ['John', 2], 
      ['Jessica', 6], 
      ['Aaron', 1], 
      ['Margareth', 8] 
     ]); 

     // Create a dashboard. 
     var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div')); 

     // Create a range slider, passing some options 
     var donutRangeSlider = new google.visualization.ControlWrapper({ 
      'controlType': 'NumberRangeFilter', 
      'containerId': 'filter_div', 
      'options': { 
      'filterColumnLabel': 'Donuts eaten' 
      } 
     }); 

     // Create a pie chart, passing some options 
     var pieChart = new google.visualization.ChartWrapper({ 
      'chartType': 'PieChart', 
      'containerId': 'chart_div', 
      'options': { 
      'width': 300, 
      'height': 300, 
      'pieSliceText': 'value', 
      'legend': 'right' 
      } 
     }); 

     // Establish dependencies, declaring that 'filter' drives 'pieChart', 
     // so that the pie chart will only display entries that are let through 
     // given the chosen slider range. 
     dashboard.bind(donutRangeSlider, pieChart); 

     // Draw the dashboard. 
     dashboard.draw(data); 
     } 
    </script> 
    </head> 

    <body> 
    <!--Div that will hold the dashboard--> 
    <div id="dashboard_div"> 
     <!--Divs that will hold each control and chart--> 
     <div id="filter_div"></div> 
     <div id="chart_div"></div> 
    </div> 
    </body> 
</html>

出典

2016-06-29 itzteajay

データ変数にリテラルFRBは範囲へのコールに置き換えることができる〔でgetValues（https://developers.google.com/apps-script/reference/spreadsheet/range#getValues（）） –

あなたはCreating a Chart from a Separate Spreadsheetを読むことによって開始することができます。

一般的に、人々はデータテーブルを作成し、そのデータを使用してグラフを描画することによってGoogleグラフを作成します。あなたが代わりにGoogleスプレッドシートからデータを取得したい場合は、グラフ化するデータを取得するために、スプレッドシートを照会します：

function drawChart() { 
var query = new google.visualization.Query(URL); 
query.send(handleQueryResponse); 
} 

function handleQueryResponse(response) { 
var data = response.getDataTable(); 
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart')); 
chart.draw(data, null); 
}

Query Source Ranges

問合せソースのURL特定のセル、セルの範囲、行、列、またはスプレッドシート全体をクエリで使用するスプレッドシートの部分を指定します。例えば、 "範囲=" 構文を使用して範囲を指定：

A1：ここ

https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4は構文実証いくつかの例であり、B10を - セルA1から範囲B10を介し

5：7 - 行5-7

D：F - カラムDF

出典

2016-06-30 16:49:44

HTML形式のスプレッドシートを使用したGoogleダッシュボード

答えて

Query Source Ranges

関連する問題