Заполните диаграмму google с данными из электронной таблицы google

Question

Это похоже на что-то очень простое, но я искал и не нашел решение. Я пытаюсь создать диаграмму на своем сайте на основе данных в электронной таблице google. Я смог заставить его работать с использованием жестко закодированных значений, но не уверен, как заполнить таблицу.

Мой текущий сценарий выглядит следующим образом:

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options = { 
     title: 'Company Performance' 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 

Мои данные о моем распространения листа simlilar к тому, что закодирована, но я хочу, чтобы дать ему URL-адрес таблицы и иметь его заполнить его из этого (URL как это: https://docs.google.com/spreadsheet/ccc?key=0AnD0SFr9ooPgdG83Wm)

Answer 1

есть учебник с примером здесь:

https://google-developers.appspot.com/chart/interactive/docs/spreadsheets

в основном , код будет выглядеть следующим образом: (Я не уверен, что ваш URL правильный. Кроме того, установите для конца URL-адреса правильный диапазон данных):

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

function initialize() { 
     var opts = {sendMethod: 'auto'}; 
     // Replace the data source URL on next line with your data source URL. 
     var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AnD0SFr9ooPgdG83Wm&transpose=0&headers=1&merge=COLS&range=A1%3AA5%2CB1%3AC5&gid=0&pub=1', opts);   
     - 
     // Optional request to return only column C and the sum of column B, grouped by C members. 
     //query.setQuery('select C, sum(B) group by C'); 

     // Send the query with a callback function. 
     query.send(handleQueryResponse); 
} 

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

    var data = response.getDataTable(); 

    var options = { 
    title: 'Company Performance' 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 

     google.setOnLoadCallback(initialize);