JS Charting Таблицы Google Javascript


Как получить доступ к электронным таблицам Google Sheet только с помощью Javascript?

Я хочу получить доступ к таблицам Google, используя только JavaScript. (нет .NET С#, Java)

Я пришел здесь и был шоком, чтобы знать, что нет JavaScript для JavaScript для доступа к электронной таблице Google.

Скажите, пожалуйста, как получить доступ (CREATE/EDIT/DELETE) Таблицы Google с помощью JavaScript или любых его фреймворков, таких как jQuery и т.д.

Я создал простую библиотеку javascript, которая извлекает данные электронной таблицы google (если они опубликованы) через JSON api:

Вы можете увидеть это в действии здесь:

Здесь Gist.

Вы можете создать электронную таблицу, используя API Google Таблиц. В настоящее время нет способа удалить таблицу с помощью API (см. Документацию). Подумайте о API Google Документов в качестве маршрута для создания и поиска документов.

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

Обновление электронной таблицы выполняется через списки на основе списка или на основе ячейки каналы.

Чтение электронной таблицы можно выполнить с помощью API-интерфейсов Google Spreadsheets, упомянутых выше, или только для опубликованных листов, используя Язык запросов API визуализации Google для запроса данных (которые могут возвращать результаты в формате CSV, JSON или HTML-таблицы).

Забудьте jQuery. jQuery действительно очень ценен, если вы пересекаете DOM. Поскольку GAS (Scripting) не использует DOM, jQuery не добавит никакого значения вашему коду. Придерживайтесь ванили.

Я действительно удивлен, что никто не предоставил эту информацию в ответе. Не только может сделать это, но это относительно легко сделать с использованием vanilla JS. Единственным исключением является API визуализации Google, который является относительно новым (с 2011 года). API визуализации также работает исключительно через URI строки запроса HTTP.

Янв 2020 UPDATE. Когда я ответил на этот вопрос в прошлом году, я забыл упомянуть третий способ доступа к API Google с помощью JavaScript, и это было бы из приложений Node.js, используя его клиент библиотеке, поэтому я добавил ее ниже.

Он Мар 2020, и большинство ответов здесь устарели — принятый ответ теперь относится к библиотеке, которая использует более старую версию API. Более актуальный ответ: вы можете получить доступ к большинству Google API только с использованием JavaScript. Google предлагает 3 способа сделать это сегодня:

  • Как упоминалось в ответе Дэна Даскалеску, вы можете использовать Google Apps Script, решение JavaScript в Google. То есть, не-w631 > серверные JS-приложения за пределами браузера, которые запускаются на серверах Google.
    • Вы кодируете свои приложения в Приложения Script редактор кода, и они могут получить доступ к Google Таблицам двумя различными способами:
      • Служба электронных таблиц (поддержка родных объектов руководство по использованию); родной легче, но обычно старше, чем.
      • расширенный сервис Google Таблиц (напрямую обращайтесь к последнему API REST Google Таблиц [см. ниже]; руководство по использованию)
    • Приложения Script также поддерживают add-ons, и вы можете расширить функциональность пользовательского интерфейса Sheets с помощью надстроек листов (например, эти)
    • Вы даже можете написать мобильные дополнения, которые расширяют Таблицы приложений на Android
    • Чтобы узнать больше об использовании приложений Script, просмотрите эти видео, которые я создал (большинство из них связано с использованием таблиц)
  • Вы также можете использовать Клиентскую библиотеку API Google API для JavaScript для доступа к последнему Google Lets REST API на стороне клиента.
    • Ниже несколько общих образцов с использованием клиентской библиотеки
    • В последнем листе API (v4) был выпущен в Google I/O 2020; он намного более мощный, чем все предыдущие версии, предоставляя разработчикам программный доступ к большинству функций, найденных в пользовательском интерфейсе Sheets
    • Ниже представлен быстрый запуск JavaScript для API, который поможет вам начать работу
    • образец «recipes» (полезные нагрузки JSON) для запросов основного API
    • Если вы не «аллергия» на Python (если хотите, просто притворитесь, что это псевдокод;)), я сделал несколько видеороликов с более «реальными» образцами использования API, с помощью которого вы можете учиться, и перейти на JS если это необходимо (ПРИМЕЧАНИЕ. Несмотря на то что это код Python, большинство запросов API имеют JSON и легко переносятся в JS):
      • Перенос данных SQL на листе (глубокое погружение кода post)
      • Форматирование текста с использованием API таблиц (глубокое погружение с текстом post)
      • Создание слайдов из данных электронных таблиц (глубокое погружение кода post)


  • Третий способ доступа к API Google с помощью JavaScript состоит из приложений Node.js, используя свою клиентскую библиотеку. Он работает аналогично использованию JavaScript-клиентской библиотеки, описанной выше, только вы будете получать доступ к тому же API со стороны сервера. Здесь пример Node.js Quickstart для листов. Вы можете найти видео на основе Python выше, чтобы быть еще более полезными, поскольку они также получают доступ к API со стороны сервера.

При использовании REST API вам необходимо управлять и хранить исходный код, а также выполнять авторизацию, скопировав собственный код auth (см. примеры выше). Приложения Script обрабатывают это от вашего имени, управляя данными (уменьшая «боль», как упоминалось Ape-inago в их ответе), и ваш код хранится на серверах Google. Но ваша функциональность ограничена возможностями, предоставляемыми сервисами App Script, и более старыми JS (ES3 + некоторыми функциями ES5 и настройками Google), тогда как REST API предоставляет разработчикам гораздо более широкий доступ к API. Но эй, хорошо иметь выбор, не так ли? Итак, чтобы ответить на исходный вопрос OP, вместо нуля у разработчиков есть три способа доступа к Google Таблицам с использованием JavaScript.

Configuration

The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc.

Global Configuration

This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.

Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. This way you can be as specific as you would like in your individual chart configuration, while still changing the defaults for all chart types where applicable. The global general options are defined in Chart.defaults.global . The defaults for each chart type are discussed in the documentation for that chart type.

The following example would set the hover mode to ‘nearest’ for all charts where this was not overridden by the chart type defaults or the options passed to the constructor on creation.

Создание диаграмм с помощью Google Chart

Представляем Вам небольшой Премиум курс по созданию диаграмм с помощью Google Chart.

В нескольких уроках данного курса мы с Вами познакомимся с API Google-диаграмм (Google Charts). Данное API позволяет легко добавлять на страницы вашего сайта всевозможные диаграммы. При этом это могут быть как стандартные диаграммы, так и довольно оригинальные.

Курс позволит Вам не только получить навыки работы с API Google-диаграмм, но и освежит знания в таких областях, как работа с JavaScript, jQuery, AJAX, PHP и т.д.

Диаграммы, создаваемые в данном курсе безусловно станут украшением любого сайта, так или иначе работающего со статистикой. Используя построенные диаграммы, Вы визуализируете данные, тем самым сделав их более понятными и наглядными. А добавлением анимации оживит построенные диаграммы.

Значительное внимание в курсе по созданию диаграмм с помощью Google Chart уделено получению данных из внешнего хранилища (базы данных) и, соответственно, построению диаграмм на динамических (изменяемых), а не статических данных.

Видеокурс по API Google Charts на русском языке, с примерами для начинающих и продолжающих.

Все уроки курса:

Количество уроков: 4

Продолжительность курса: 01:37:22


Автор: Андрей Кудлай

Меня зовут Андрей Кудлай — один из авторов проекта webformyself и практикующий веб-разработчик. Имею хорошие навыки работы с HTML, CSS, jQuery, PHP, MySQL, Bootstrap, CakePHP, Yii2, WordPress, OpenCart. Являюсь автором нескольких курсов-бестселлеров издательства WebForMySelf.com

Описание курса: Представляем Вам небольшой Премиум курс по созданию диаграмм с помощью Google Chart. В нескольких уроках данного курса мы с Вами познакомимся с API Google-диаграмм (Google Charts). Данное API позволяет легко добавлять на страницы вашего сайта всевозможные диаграммы. При этом это могут быть как стандартные диаграммы, так и довольно оригинальные.

Категории премиум

Все права защищены © 2020
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Chart.js 2.0 — красивые графики с использованием HTML5

Простая в использовании библиотека, позволяет строить красивые графики использую .

— Библиотека содержит 8 типов графиков
— Графики адаптивны — будут выглядеть везде хорошо, как на десктопах, так и на мобильных устройствах
— Можно совмещать разные типы графиков
— Отличная документация
— Простое API

Теперь покажу пример подключения и использования библиотеки, и перейдём к типам видов графиков (картинки).

JS Charting: Таблицы Google Javascript

Частная коллекция качественных материалов для тех, кто делает сайты

  • Фотошоп-мастер2000+ уроков по фотошопу
  • Фото-монстр300+ уроков для фотографов
  • Видео-смайл200+ уроков по видеообработке
  • Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
  • Главная»
  • Уроки»
  • Уроки jQuery для начинающих

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.


Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

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

Начинаем работать с Chart.js: линейные и столбчатые диаграммы

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

В первом руководстве из этой серии — Знакомство с Chart.js, вы узнали как устанавливать и использовать Chart.js. Также вы изучили некоторые глобальные параметры, с помощью которых можно изменять шрифт и всплывающие подсказки для различных графиков. Из этого руководства, вы знаете как создавать линейные и столбчатые диаграммы с использованием Chart.js.

Создание линейных диаграмм

Линейные диаграммы полезны, когда вы хотите показать изменение значения данной переменной относительно изменений какой-либо другой переменной. Другая переменная — обычно временная. Например, линейные диаграммы могут использоваться для отображения скорости транспортного средства в определенные промежутки времени.

Chart.js позволяет создавать линейные диаграммы, если задать type как line . Вот пример:

Теперь мы предоставим данные, а также параметры конфигурации, которые нам нужны для построения линейной диаграммы.

Как как мы не предоставили цвета для линейной диаграммы, будут использоваться цвет по умолчанию rgba(0,0,0,0.1) . Мы не вносили никаких изменений в подсказку или легенду. Чтобы узнать больше об изменении размера, подсказки или легенды прочитайте первую часть из этой серии.


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

Цвет области под кривой определяется ключом backgroundColor . Все линейные диаграммы, построенные с использованием этого метода, будут заполнены данным цветом. Вы можете установить значение ключа fill (заливка) равным false , если вы хотите просто нарисовать линию, без заполнения области по дней каким-либо цветом.

Еще одна вещь, которую вы могли заметить, это то, что для построения диаграммы мы используем отдельные указатели данных (точки). Библиотека автоматически интерполирует значения всех остальных точек с помощью встроенных алгоритмов.

По умолчанию точки строятся с использованием пользовательской взвешенной кубической интерполяции. Однако, вы можете установить значение ключа cubicInterpolationMode в monotone для более точного построения точек, если график, который вы создаете, определяется уравнением y = f (x) . Упругость кривой Безье определяется ключом lineTension . Вы можете установить его значение равным нулю, чтобы нарисовались прямые линии. Обратите внимание, что этот ключ игнорируется, если уже указано значение cubicInterpolationMode .

Вы также можете задать значения цвета границы и её ширины с помощью ключей borderColor и borderWidth . Если вы хотите построить диаграмму, используя пунктирную линию вместо сплошной линии, вы можете использовать ключ borderDash . Он принимает массив в качестве значений, элементы которого определяют длину и промежуток штрихов соответственно.

Появление построенных точек можно контролировать с помощью свойств pointBorderColor , pointBackgroundColor , pointBorderWidth , pointRadius и pointHoverRadius . Существует также ключ pointHitRadius , который определяет расстояние, с которого, точки на графике, начнут взаимодействовать с мышью.

Указанный выше объект speedData отображает те же точки данных, что и предыдущий график, но с другими значениями, установленными для всех свойств.

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

Создание столбчатых диаграмм

Столбчатые диаграммы (или гистограммы) полезны, когда вы хотите сравнить одно измерение для разных объектов — например, количество автомобилей, продаваемых разными компаниями, или количество людей определенной возрастной группы в городе. Вы можете создать столбчатые диаграммы в Chart.js, установив ключ type в bar . По умолчанию это создаст диаграммы с вертикальными столбцами. Если вы хотите создать диаграммы с горизонтальными столбцами, вы должны установить type как horizontalBar .

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

Параметры, приведенные выше, создадут следующую диаграмму:

Так же как в линейных диаграммах, полосы заполнены светло-серым цветом. Вы можете изменить цвет полос, используя ключ backgroundColor . Аналогично, цвет и ширина границ разных полос могут быть заданы с помощью ключей borderColor и borderWidth .

Если вы хотите, чтобы библиотека не рисовала границы для определенной стороны, вы можете указать сторону в качестве значения для ключа borderSkipped . Вы можете установить следующие значение: top , left , bottom или right . Также вы можете изменить границы и цвет фона различных полос, которые вы увидите при наведении на них курсора мыши, с помощью hoverBorderColor и hoverBackgroundColor .

Размер столбцов в столбчатой диаграммы выше был вычислен автоматически. Однако вы можете контролировать ширину отдельных столбцов, используя свойства barThickness и barPercentage . Ключ barThickness используется для настройки толщины столбцов в пикселях, а barPercentage используется для настройки толщины в процентах от доступной ширины группы.

Также вы можете показать или скрыть конкретную ось, используя для неё ключ display . При установке значения display в false будет скрыта эта конкретная ось. Вы можете узнать подробнее обо всех этих опциях на странице документации.

Давайте сделаем график плотности (планет) более интересным, переопределим значения по умолчанию для гистограмм, используя следующий код.

Объект densityData используется для установки границ и фонового цвета столбцов. В приведенном выше коде стоит обратить внимание на две вещи. Во-первых, значения свойств barPercentage и borderSkipped были установлены внутри объекта chartOptions вместо объекта dataDensity .

Во-вторых, на этот раз type диаграммы установлен в значение horizontalBar . Что также означает, что вам придется изменить значение barThickness и barPercentage для оси Y вместо оси X, чтобы эти значения имели хоть какой-либо эффект на столбцах.

Приведенные выше параметры создадут следующую гистограмму.

Вы также можете сделать графики из несколько наборов данных на одной и той же диаграмме, присвоив >xAxisID используется для присвоения >yAxisID используется для присвоения идентификатора любой оси вашего набора данных. Обе оси также имеют ключ id , который вы можете использовать для назначения им уникальных идентификаторов.

Если последний абзац был немного запутанным, следующий пример поможет прояснить ситуацию.

Здесь мы создали две оси Y с уникальными идентификаторами и они были назначены на отдельные наборы данных, используя ключ yAxisID . Ключи barPercentage и categoryPercentage используются, чтобы сгруппировать столбцы для отдельных планет. Настраиваем categoryPercentage на более низкое значение, чтобы увеличить расстояние между столбцами разных планет. Аналогичным образом, установив barPercentage на более высокое значение, мы уменьшим расстояние между столбцами одной и той же планеты.


На последок

В этом уроке мы рассмотрели все аспекты линейных и столбчатых диаграмм в Chart.js. Теперь вы должны уметь создавать базовые диаграммы, изменять их внешний вид и отображать несколько наборов данных на одном графике без каких-либо проблем. В следующей части серии вы узнаете о радиальных и полярных диаграммах в Chart.js.

Надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, пожалуйста, сообщите о них в комментариях.

Прикладное программирование с нуля.

AVR, STM, Android, IoT. Встраиваемые системы.

Графики и диаграммы на сайте. Google Charts на примере. Шаг №68

Всем привет. Рассмотрев в прошлой статье сохранение информации в базе данных, в этой статье настало время вывести данные из этой же базы в графическом виде. Да друзья для начала мы поверхностно посмотрим на имеющиеся технологии. И остановив свой выбор на одной, интегрируем на свой сайт.

Список некоторых из них:
— D3.js – JavaScript-библиотека с открытым кодом, для обработки и визуализации данных. Графики генерируются посредством HTML, SVG и CSS;
— ChartJS — open source проект. Использует HTML5 canvas для рендеринга. Поставляется с набором «готовых» основных графиков;
— Chartlist.js — используется SVG для рендеринга графиков/схем, а также управляться и конфигурироваться посредством CSS3 media queries и Sass;
— n3-charts — создан поверх D3.js и AngularJS. Он предоставляет множество стандартных графиков в виде настраиваемых AngularJS директив;
— EmberCharts – open source , построенный на D3.js и Ember.js. Использует SVG для рендеринга графиков;
— Smoothie Charts – для работы с потоком данных в реальном времени. Для рендеринга графика здесь используется элемент HTML5 canvas. Библиотека на чистом JavaScript, которая предоставляет такие опциональные возможности для графиков реального времени;
-Chartkick – JavaScript библиотека для построения графиков/схем в Ruby приложениях. Диаграммы генерируются через SVG;
— MeteorCharts — Для рендеринга графиков предоставляется возможность выбора любой из этих технологий: HTML5 canvas, WebGL, SVG и даже DOM;
-Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы.

А также многие другие. Я остановлюсь на Google Charts – JavaScript библиотека, для простого создания графиков. Предоставляет множество предварительно созданных диаграмм. Имеется множество конфигурационных настроек (Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных.), которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG дабы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

JS Charting: Google Sheets

In this article, we will chart data from a publicly accessible google spreadsheet feed (via JSON) and create a dashboard using the JS Charting library. By consuming the spreadsheet in this way, updated results will show live as soon as any shared edits are made by those with permissions to edit the data.

We will use this spreadsheet (Figure 1):

To create the following dashboard (Figure 2):

Setting up the spreadsheet

When parsing the spreadsheet data feed, it will be more practical to access the columns by header names. In order to setup a header row, you must freeze a row in the spreadsheet page. Click View > Freeze > 1 row to create a header row. This can also be done with columns but for our case we only freeze a single row which is styled in bold in figure 1.

The next step is to publish the spreadsheet to the web so it can be accessible in the browser. From the menu in google docs with the spreadsheet open, select: File > Publish to the web.

There will be a link generated, which in our case is

Copy this link for reference as we will use it to fetch the data feed. Then click the Publish button.

Fetching the data feed

Now that the spreadsheet is available online, we will use the jQuery getJSON function to fetch it as JSON. The following specific URL formatting is required to obtain the JSON:

https://spreadsheets.google.com/feeds/list/ 1D1vL8EI0uRzeiGM-A8hZLgUCexXrocw5B_qTGnCekNE /od6/public/basic?alt=json

Notice the highlighted portion of the URL which is taken from the, “Publish to the web” URL popup in the previous step.

The code to get this data feed with jQuery is:


This line would just access the JSON and write it in the browser’s console, but we need to parse and consume the data.

Parsing the data

The raw JSON data structure looks like:

Each entry represents a row in the spreadsheet. This is an example row from the data

Please note that only the cells with content are included in the $t property.

The following code parses spreadsheet data into a series of points and takes two parameters. The data, and the name of the column that represents the x values that are shared by all data points.

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

It works by passing each entry with a series name, x, and y value to the addPointToSeries() function. If a series with that name doesn’t exist, a new series is created, otherwise, a point is added to the series. After all entries are processed, an array of series is returned.

NOTE: When parsing the $t content property, make sure to split the values to using a comma with a space after it ‘, ‘ The same goes for the column name and value ‘: ‘ This is required as numeric values can be formatted including a comma such as $1,120.00 and Datetime values can contain a colon within the time part, both of which can cause issues when parsing.

Making your chart dashboard

Now we get to the fun part—visualizing this data. jQuery is already included, so we only need to add the chart script to get started.

Next, a div element is added for the chart itself:

And the code to create a chart from the data we have so far:

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

Now that the basic chart is setup, we will add some settings to tune the chart and take advantage of the customization offered by JSCharting.

First, some y axis settings to describe the values presented in this chart.

Note: notice how this block of options is an object under the yAxis property whereas in the previous example a single property at the options root was used to set similar options. This is possible because the JSCharting options API allows joining the property hierarchical names into a single property setting for convenience.

Here we format the y data values as currency and set the y axis label. Describing the data in this way will propagate to all other parts of the chart that utilize y values. For example, whenever a y value is mentioned in a tooltip, or elsewhere, it will be automatically formatted as currency. By giving the axis a label, it will also help the automatic tooltips describe the data points.

Next we specify a title for this chart using the following code:

Notice the %sum token included in the title text. There are many tokens that can be used in the chart title. These tokens are all listed under the series collection section of this token reference.

Also, note how the sum takes on the currency format since it related to values on the y axis.

Next, let’s modify the legend labels to include sums for each series:


See the Pen by Arthur Puszynski (@jsblog) on CodePen.

The next chart we create will be based on calculations retrieved from this first chart and it will have average monthly income for each unit shown as a bar chart. Another div is added to the html for the second chart of our dashboard:

Then, in order to interact with the first chart’s data and use those calculations, the code for the average chart will be placed inside a callback of the first charts initialization method.

This chart will contain only one series with a bar representing the average monthly income of each series. To do this, the main chart’s series are iterated and a new point is created for each where the y value is the series sum divided by 12 months.

By specifying a palette for this series, each bar will take on a different color and match the color coding of the main chart.

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

The final chart will be a pie chart using this original data to show the percentage of income each unit contributed to the total. Our current chart can be converted to a pie chart by simply adding a type:’pie’ property. You can view a list of JS charting chart types along with samples for each to experiment with other types. This setting causes the chart to show a pie where each series become a slice. If the goal was to have a pie represent each series, the setting would be defaultSeriesType:’pie’ which would have each series be a pie type instead.

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

Notice how the y axis format string is specified despite the fact that pies do not have axes. This is because the y axis setting describes the y values rather than an actual axis.

The default point label text is also specified for this pie chart using the following code:

Again, we leverage tokens, but this time they are from the point token set.

JS Charting Spreadsheet helper

It is worth mentioning an interesting feature of JS Charting that can be helpful in some spreadsheet cases. In the above chart, we use a time scale for the x axis, so the order and position of each data point is defined by the value itself. In some cases, such as three letter month abbreviations, x values are names or any arbitrary strings. Since some of these strings cannot be parsed into dates or any quantitative values that indicate a position along the x axis, the sort order of points may not be correct. That is, of course, if there are empty cells in a spreadsheet and the first few values of the first series are missing. Generally you would expect the first processed series to define the initial x axis values. Then any new x axis values encountered in subsequent series would be placed at the end of the x axis. JSCharting will automatically analyze the order of all the series points to determine what the intended order is even when some series have missing points. You can see an example of this here.

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

Here, we assign the date values as point names and remove the x axis time scale setting. The result is that the chart looks the same as when using time scales and values.

Conclusion

Google spreadsheets offer some unique capabilities for storing data in the cloud and allows fetching it for use in any web apps. It is also possible to dynamically update these spreadsheets providing a cloud based database backend. JSCharting makes visualizing this data effortless and with its label tokens support, rich and descriptive charts can be created with very little code. There are many chart types available including mapping which is bundled with the product at no additional cost. The full suite of chart types and features is free to download and experiment with for development purposes. The JSCharting documentation describes the declarative API and is quite exhaustive.

About Arthur Puszynski

Initially inspired by C++ graphics demoscenes in the 90s, Arthur’s passion for graphics programming has continued to grow since that time. With 15+ years focused on chart and mapping visualizations, the death of plugins have brought a renewed passion for platform independent graphics using JavaScript and SVG.

Interactive JavaScript Charts Using Data from Google Sheets

This article was peer reviewed by Jeff Smith. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Meet my friend Jenny. She recently started coding websites. She loved her job and was very happy until she met Steve, who has a reputation of being, let’s say, not a very easygoing client.

Steve had a lot of data in a spreadsheet and he wanted to display that on his website. Our friend (now Jenny is your friend too!) suggested that Steve make the charts in Excel and upload them as images to the website.


But Steve being Steve, he wanted the charts to be interactive. Not only that, he also wanted the charts to get updated whenever he made a change to the data in his spreadsheet .

Jenny didn’t know how to tackle this issue, so she came to me. And, being the good friend I am, I gave her this advice:

First ask your client to move his data to Google Sheets (because that’s what all the cool people are doing nowadays). Then we can easily implement the features that he needs — interactive JavaScript charts and dynamic updating.

Her client agreed (luckily!), and Jenny and I coded rest of the solution. But how? Well, that’s what this tutorial will teach you.

I have divided this tutorial into five easy-to-follow steps:

  1. Exporting data from Google Sheets
  2. Fetching JSON from Google Sheets via Ajax
  3. Restructuring the data
  4. Creating a chart with FusionCharts.
  5. Customizing the chart

So without further ado, let’s dive in!

Exporting Google Sheets Data as JSON

Before delving into how to export data, let’s first create a sheet. Assuming you’ve got a Google account, you can do this by going to the Google Sheets page and hitting the Start a new spreadsheet button. In the spreadsheet that opens, create two columns: Actor and Income. Then fill your newly created sheet with some data. I’ve taken mine from here: The World’s Highest-Paid Actors 2015.

As you can see, the left column contains labels for our chart, the right one values corresponding to those labels. For those of you following along at home, you can grab a copy of this sheet here (go to File > Make a copy).

The data available in Google Sheets can be exported to multiple formats like JSON, XML etc. And once exported to any of those formats, it can be easily accessed via the web.

To open your document to the web, you need to make the following changes to the document settings:

  • Set the sharing of the document to either Public on the web, or Anyone with the link. To achieve this, click the Share button in the top right-hand corner, then click the Advanced option that appears in the bottom right of the pop up.
  • Publish the document to the web. This option is available under File >Publish to the web

With these two changes made, the data in the document can be accessed in JSON format via: https://spreadsheets.google.com/feeds/list/SPREADSHEET/od6/public/basic?alt=json

You will need to replace SPREADSHEET with the ID of your Google Sheet, which in our case is 1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo . You can see the results here.

Using jQuery to Fetch JSON from Google Sheets

We will use jQuery’s get() method to fetch the data from Google Sheets. You can include jQuery from a CDN as shown:

As well as a containing element for the chart. This can contain some place holder text which will display before the chart renders.

To actually create and render a basic horizontal bar chart into #chart-container , we’ll add the following code to the success callback:

Let’s look at some of the configuration options we have defined for the chart:

  • type : defines the chart type we are going to plot – bar2d in this example.
  • height : height of the chart in pixels.
  • width : width of the chart.
  • chart : here we can set things like title, labels for both axes, a value prefix, etc.
  • data : the data the chart will be constructed from.


And here’s a demo of what we’ve got so far:

Customizing the Chart

Whilst the above demo works, it looks perhaps a little generic. Luckily you can customize almost every aspect of a chart’s appearance. FusionCharts has some excellent documentation, which I suggest you check out.

Here’s the same chart customized to look a little more, ahem, appealing.

Conclusion

As you have seen, it is not so difficult to create a live chart from Google Sheets. Live JavaScript charts can even also be generated for complex chart types, such multi-series charts. The only thing that needs to be worked out for complex charts is how to restructure the data from Google Sheets to the format accepted by the chart. Everything else remains the same.

  • For more information on how to work with Google Sheets data check out Google’s documentation.
  • I used a basic bar chart for this tutorial, but if you want something different, check out different chart types available here.

PS: I will be hanging around in the comments section below So feel free to shoot any questions you have about this tutorial. I’more than happy to help!

Google charts tutorial

Google charts tutorial is an introductory tutorial to Google charts library. It shows how to create interactive charts in JavaScript with Google charts library. In our examples, we create a scatter chart, a line chart, and a pie chart.

is an interactive Web service that creates graphical charts from user-supplied information. The user supplies data and formatting in JavaScript embedded in a web page; in response the service sends an image of the chart. The library provides a large number of ready-to-use chart types.

Charts have some default appearance and we can change the look of the chart. Charts are highly interactive and expose events that let us connect them to create complex structures. Charts are rendered using HTML5/SVG technology to provide cross-browser and cross-platform compatibility (including iPhones, iPads, and Android).

DataTable

The charts are populated with the DataTable class. It is a two-dimensional, mutable table of values. It has methods for sorting, modifying, and filtering data. It can be populated directly from a web page, a database, or any data provider supporting the Chart Tools Datasource protocol.

Scatter chart

A scatter chart is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. A scatter chart is created with google.visualization.ScatterChart .

In this example, we create a scatter chart.

In this example, we have a line chart which displays an average salary per age.

The arrayToDataTable() is a helper method that takes a two-dimensional array, and converts it to a DataTable .

We can smooth the lines by setting the curveType to function .

The line chart is generated with google.visualization.LineChart .

Figure: Line chart

Pie chart

A is a circular chart which is divided into slices to illustrate numerical proportion. A pie chart is created with google.visualization.PieChart .

The example creates a pie chart.

In the chart we show the proportions of available fruits.

In the chart options, we set the chart title, change the default title font size, and set the size of the chart.

The pie chart is created with google.visualization.PieChart .

Figure: Pie chart

In this tutorial we have created scatter, line, and pie charts with Google charts library.

Мастер Йода рекомендует:  Как защитить сайт на WordPress
Добавить комментарий