Летом мне было поручено создать интерактивную панель управления с использованием данных из Google Таблиц, которую могли бы поддерживать и обновлять люди, не знакомые с HTML. Хотя это была непростая задача, в конце концов я нашел способ создать информационную панель с использованием HTML и Javascript, которую можно было бы обновлять напрямую, изменяя данные в Google Sheet. В этом уроке я покажу, как это сделать самостоятельно.

Шаг 1. Создайте лист Google для хранения данных, вот тот, который я буду использовать в этом руководстве. Эти данные взяты с сайта NOAA, который показывает годовую изменчивость температуры в Сан-Франциско.

Https://docs.google.com/spreadsheets/d/1YFu3mEJzUXsxWVFDTVK9RhZF91VlwzDB-3F4WzHITq4/edit#gid=0

Шаг 2. Убедитесь, что для доступа к Google Таблице установлено значение доступен для просмотра всем, имеющим ссылку.

Шаг 3. Создайте HTML-файл со следующим исходным кодом:

Ключевые части кода:

а. Включая библиотеки Javascript Chart.js и Google Charts. Я использую библиотеку Google Charts, чтобы получить доступ к языку запросов визуализации, который позволяет мне выбирать данные.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

б. Запросите данные в таблице Google с помощью языка запросов визуализации Google.

function initChart() {
    URL = "https://docs.google.com/spreadsheets/d/1YFu3mEJzUXsxWVFDTVK9RhZF91VlwzDB-3F4WzHITq4/edit#gid=0";
    var query = new google.visualization.Query(URL);
    query.setQuery('select *');
    query.send(function(response) {
      handleQueryResponse(response);
    });
  }

c. В ответ я прочитал данные как объект JSON, поскольку обнаружил, что это дает мне максимальную гибкость для анализа данных по мере необходимости.

var data = response.getDataTable();
.
.
.
dataj = JSON.parse(data.toJSON());
.
.
.
for (i = 0; i < dataj.rows.length; i++) {
      const series_data = [];
      for (j = 1; j < dataj.rows[i].c.length; j++) {
        if (dataj.rows[i].c[j] != null) {
          if (dataj.rows[i].c[j].v != null) {
            series_data.push(dataj.rows[i].c[j].v);
          } else {
            series_data.push(0);
          }
        }
}
.
.
.
datasets.push(dataset);

d. Настройте объект Chart.js «Chart» с нужными наборами данных и метками.

const chartdata = {
      labels: labels,
      datasets: datasets
    };
var canvas = document.getElementById("myChart");
var setup = {
      type: 'line',
      data: chartdata,
      options: {
        plugins: {
          title: {
            display: true,
            text: dataj.cols[0].label
          }
        },
        responsive: true,
      }
    }
chart = new Chart(canvas, setup);

Шаг 4. Чтобы просмотреть HTML-файл, вам необходимо получить к нему доступ с веб-сервера. Если вы знакомы с Python и хотите создать локальный веб-сервер, чтобы попробовать это, вы можете ввести следующую команду в оболочке:

python -m http.server

Шаг 5. В браузере введите расположение URL-адреса файла, и вы должны увидеть следующее: