Создание интерактивных JavaScript графиков используя данные из Google Таблиц

Недавно ко мне поступил заказ на создание сайта с большим количеством графиков, все данные у клиента находились в таблицах. Есть два варианта решения. Первый и самый простой, вставка графиков в качестве картинок. Второй более сложный и продуктивный, использовать силу JavaScript и сделать графики на сайте интерактивными.

Конечно мы решили использовать второй вариант, и для его реализации было необходимо перенести все данные клиента, в Google Таблицы. Затем мы можем легко реализовать все необходимые функции - интерактивные JavaScript графики и динамическое обновление.

Разделим наш урок на несколько шагов:

  1. Экспорт данных в Google Таблицы
  2. Выборка JSON данных из Google Таблиц при помощи AJAX
  3. Реструктурирование данных
  4. Создание графиков с помощью библиотеки FusionCharts
  5. Кастомизация графиков

Экспорт данных Google Таблиц с JSON

Прежде чем перейти к созданию графиков, необходимо экспортировать все данные. Я предполагаю что у вас уже есть аккаунт Google, перейдите в Google Таблицы и нажмите на большую кнопку "Создать таблицу". Откроется редактор таблиц, создайте две колонки "Actor" и "Income" и заполните необходимыми данными. Для демонстрационного примера я взял данные здесь.

Google Таблицы

Обратите внимание, левая колонка содержит названия, правая - значения. Вы можете просто сделать копию данной страницы, для этого перейдите в Файл > Создать копию.

После того как мы подготовили необходимые данные в Google Таблицах, мы можем экспортировать их в различных форматах (JSON, XML и т.д.). После экспорта, с ними можно будет работать в сети.

Чтобы открыть документ в сети, необходимо проделать следующие настройки документа:

  • Открыть доступ и включить доступ к документу по ссылке.
  • Опубликовать документ, для этого перейдите в Файл > Опубликовать.

Теперь, документ доступен в формате JSON:
https://spreadsheets.google.com/feeds/list/SPREADSHEET/od6/public/basic?alt=json

Просто замените слово SPREADSHEET на свой идентификатор Google таблицы, в нашем случае это будет 1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo. Результат.

Использование jQuery для выборки JSON данных.

Используя jQuery метод get(), мы можем выбрать необходимые нам данные из Google таблицы. Вы можете добавить jQuery при помощи CDN:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

В теге script, объявим метод $.get с тем URL который мы создали выше:

var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
    url = "https://spreadsheets.google.com/feeds/list/" +
          spreadsheetId +
          "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    console.log(response);
  }
});

В приведенном выше jQuery коде, мы создали AJAX запрос на URL Google таблицу, после извлечения данных, вызываем функцию success. Функция log, возвращает данные от сервера в консоль.

Реструктуризация данных

Полученные JSON данные из Google таблиц необходимо реструктуризировать, чтобы они соответствовали формату данных нашей библиотеки. В этом уроке мы используем FusionCharts.

FusionCharts принимает JSON данные в виде массива объектов, с ключами "label" и "value". Выглядит следующим образом:

[{
  "label": "Robert Downey Jr.",
  "value": "80"
}
...]

Для этого нам необходимо выполнить следующий фрагмент кода функции обратного вызова success в jQuery функции get, которую мы определили ранее.

var data = response.feed.entry,
    len = data.length,
    i = 0,
    parsedData = [];

for (i = 0; i < len; i++) {
  parsedData.push({
    label: data[i].title.$t,
    value: data[i].content.$t.replace('Income: ', '')
  });
}

Здесь мы перебираем каждый объект данных Google Таблиц, который присутствует в response.feed.entry и извлекаем ключи label и value. Затем мы переводим их в новый массив parsedData который используем для создания графика.

label равен ключу title.$t, value равен ключу content.$t. Значение содержит имя столбца, нам оно не нужно, поэтому мы его убираем. Другие данные не нуждаются в визуализации.

Массив parsedData содержит информацию в подходящем формате для библиотеки FusionCharts, теперь можно приступить к визуализации.

Создание графика

После того как мы подготовили все необходимые данные, мы можем приступить к созданию графиков. Создание графика разделяется на следующие этапы:

  • Создание контейнера графика.
  • Создание экземпляра FusionCharts, который использует данные из Google Таблиц.
  • Вызов метода render в экземпляре FusionCharts, для рендеринга данных в контейнере.

Добавим библиотеку FusionCharts из CDN:

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>

Далее создадим контейнер для графика, с классом chart-container. Текст в контейнере будет отображаться до загрузки графика.

<div id="chart-container">
  <p>The chart will render here!</p>
</div>

Чтобы создать и визуализировать горизонтальный график внутри #chart-container, мы добавим следующий код функции обратного вызова success:

new FusionCharts({
  type: 'bar2d',
  renderAt: 'chart-container',
  width: '100%',
  height: '300',
  dataFormat: 'json',
  dataSource: {
    "chart": {
      "caption": "Highest Paid Actors",
      "yAxisName": "Annual Income (in milion USD)",
      "numberPrefix": "$"
    },
  "data": parsedData
  }
}).render();

Опции графика:

  • type: определение типа графика, мы выбрали - bar2d.
  • height: высота графика в пикселях.
  • width: ширина графика в пикселях.
  • chart: здесь мы можем установить все заголовки, названия, размеры, префиксы и т.д.
  • data: здесь расположены данные графика.

результат:

See the Pen JavaScript Charts + Google Sheets (1) by SitePoint (@SitePoint) on CodePen.

Кастомизация графика

Наше текущее демо выглядит немного примитивно. Благодаря хорошей документации FusionCharts мы можем с легкостью его кастомизировать на свое усмотрение.

See the Pen JavaScript Charts + Google Sheets (2) by SitePoint (@SitePoint) on CodePen.

 

Перевод статьи Interactive JavaScript Charts Using Data from Google Sheets

Тэги: chartplugin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.