Интерактивные диаграммы JavaScript с использованием данных из Google Sheets

• Установите для общего доступа к документу значение « Публичный в Интернете» или « Любой, у кого есть ссылка» . Для этого нажмите кнопку « Поделиться» в верхнем правом углу, а затем выберите параметр « Дополнительно», который отображается в правом нижнем углу всплывающего окна.
• Опубликовать документ в Интернете. Этот параметр доступен в меню « Файл» > « Опубликовать в Интернете».

После внесения этих двух изменений данные в документе могут быть доступны в формате JSON по адресу: https://spreadsheets.google.com/feeds/list/SPREADSHEET/od6/public/basic?alt=json.

Вам нужно заменить SPREADSHEET идентификатором вашего Google Sheet, который в нашем случае равен 1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo . Вы можете увидеть результаты здесь .

Использование jQuery для получения JSON из Google Sheets

Мы будем использовать метод get () jQuery для извлечения данных из Google Sheets. Вы можете включить 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 Sheets, а после успешного извлечения данных вызывает функцию success . Эта функция регистрирует данные, возвращенные с сервера на консоль. Я бы посоветовал вам запустить этот скрипт и уделить минутку, чтобы изучить, что именно возвращается.

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

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

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

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

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

 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 Sheet, присутствующему в response.feed.entry и извлекаем из него label и value . Затем мы сохраняем их в новом массиве parsedData , который будет использоваться диаграммой.

label доступна в ключе title.$t а значение доступно в ключе content.$t объекта данных. Однако значение содержит имя столбца листа, которое не является необходимым, поэтому мы удаляем его. Остальные данные в Google Sheet не нужны для визуализации.

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

Шаг 3: Создание диаграммы

Теперь, когда наши данные готовы и доступны, мы можем перейти к созданию диаграмм. Создание диаграммы включает в себя следующие шаги:

• Создание <div> внутри которого будет отображаться диаграмма.
• Создание экземпляра FusionCharts с использованием проанализированных данных из Google Sheet.
• Вызов метода render для экземпляра FusionCharts для его рендеринга в div .

В разметку мы включаем библиотеку FusionCharts через CDN:

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

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

 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();