Заполнение панели инструментов Google с помощью внешнего листка Google

Я только что закончил реализацию solution from this question по аналогичной теме, но решение для меня не работает.Заполнение панели инструментов Google с помощью внешнего листка Google

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

я обычно получаю следующее сообщение об ошибке, когда я загрузить веб-страницу:

One or more participants failed to draw()

Вот код, я использую прямо сейчас:

<html> 
<head> 
<script type="text/javascript"> 

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

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

    function initialize() { 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=0'); 
     query.send(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(response) { 

    // Create our data table. 
    var data = response.getDataTable(); 

    // 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 id="dashboard_div"> 
     <!--Divs that will hold each control and chart--> 
      <div id="filter_div"></div> 
      <div id="chart_div"></div> 
    </div> 
</body> 
</html>

Ссылка на таблицу можно посмотреть здесь : https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=420659822

Панель инструментов, которую я пытаюсь сделать, берется непосредственно из исходной документации, приведенной здесь: https://developers.google.com/chart/interactive/docs/gallery/controls

Я пытаюсь следовать примеру о загрузке внешних таблиц здесь: https://developers.google.com/chart/interactive/docs/spreadsheets

ссылка на рабочий файл, я использую для этого проекта можно увидеть здесь: https://s3-us-west-2.amazonaws.com/example-server/index.html

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

также:

конфиденциальности для таблицы установлен в «Общедоступный в Интернете»
В ссылке используется в запросе берется непосредственно из адресной строки, но я также использовал «обмен link ', предоставленный Google, когда вы запрашиваете его.
Я использую данные, которые в точности совпадают с примерами в документации Google, чтобы сделать реализацию максимально простой.

Редактировать

Из-за отвечающей-х подскажите, я experiemented с различными модификациями моего URL запроса, который до сих пор не работали.

Вот URL в моей адресной строке:

URL

Это единственный документ, лист.

В ответ на первый ответ я пробовал следующие URL-адреса запроса, но безуспешно.

Первое:

https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?sheet=Sheet1

Второе:

https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=0

Третье:

https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws

Идея последнего URL является что в новых листах google gid является строкой после d/и перед/редактировать.

Ваша помощь очень признательна.

источник

2016-11-14 Jonathan Bechtel

Найти ваши dataSourceURL по адресу:

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

Заменить:

edit#gid=0

с:

gviz/tq?sheet=Sheet1

Если это не сработает, то вам нужно использовать gid, который является уникальным 9 до 10 цифр. (например, gid=1104711743). Откройте свой лист и посмотрите адресную строку, вы должны увидеть его в конце URL-адреса.

Ваша линия должна выглядеть следующим образом:

var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=1234567890');

источник

2016-11-14 14:56:51 zer00ne

спасибо за этот ответ. Тем не менее, я пробовал ваши предложения по URL, и они не работали для меня. Я обновил вопрос, чтобы отразить эти попытки. Вопрос: возможно ли, что работа на местном уровне повлияет на это вообще? Я помню, что у меня была аналогичная проблема с графическими картами Google, когда она не работала, когда я просматривал страницу локально, но загружался, когда я помещал ее на сервер. –

Хорошо, спасибо. Таким образом, при догадке я дублировал лист, чтобы создать 10-значный номер gid, чтобы использовать формат URL, который вы использовали, и он все еще не работает. Затем я изменил настройки конфиденциальности на моей электронной таблице с «Любой, у кого есть ссылка на просмотр», на «Публикация в Интернете», и это тоже не сработало. Вы знаете, есть ли какие-то настройки в моей таблице, которые могут помешать заполнению этих данных? –

Посмотреть скриншот http://i.imgur.com/FighmHg.png – zer00ne

Заполнение панели инструментов Google с помощью внешнего листка Google

ответ

Смежные вопросы