API Google-диаграмм (Google Charts). Получение данных


Содержание материала:

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

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

В этой статье, мы возьмем данные из таблиц Google ( в формате JSON ) и создадим консоль диаграмм с использованием библиотеки JS Charting . Результаты будут обновляться, и выводиться в режиме реального времени.

Мы будем использовать эту таблицу ( рисунок 1 ):

Чтобы создать такую панель ( рисунок 2 ):

Настройка таблицы

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

Следующим шагом является публикация таблицы в интернете, чтобы она была доступна через браузер. При открытой таблице выберите из меню Google Docs : Файл> Опубликовать в Интернете .

Будет сгенерирована ссылка, в нашем случае:

Затем нажмите кнопку « Опубликовать ».

Извлечение исходных данных

Теперь, когда наша таблица доступна в интернете, мы будем использовать функцию JQuery getJSON для извлечения данных в формате JSON . Следующий специальным образом отформатированный URL-адрес требуется для получения JSON :

Обратите внимание на выделенную часть URL-адреса , которая берется из всплывающего окна « Опубликовать в Интернете » в предыдущем шаге.

Ниже приводится код для получения этих данных с помощью JQuery :

Эта строка просто получает доступ к JSON и записывает его в консоль браузера, но мы должны структурировать и обработать эти данные.

Разбор данных

Структура необработанных данных JSON выглядит следующим образом:

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

Обратите внимание, что только ячейки, содержащие данные, включаются в свойство $t .

Следующий код разбивает данные электронной таблицы на серию точек и принимает два параметра: данные и имя столбца, представляющие значения оси Х , которые являются общими для всех точек данных:

Этот код работает путем передачи каждой записи с именем серии точек и значениями Х и Y в функцию addPointToSeries() . Если серия с таким именем не существует, создается новая серия, иначе точка добавляется в серию. После записи обрабатываются, и возвращается массив серий.

Примечание: При обработке содержимого свойства $t значения должны разделяться запятой с пробелом после нее ( «, « ). Заголовки столбцов должны разделяться двоеточием с пробелом после него ( «: « ). Такой синтаксис применяется из-за того, что формат некоторых числовых значений предусматривает использование в числах запятой, например, $1,120.00. А значения даты и времени — двоеточие. При обработке этих данных могут возникнуть проблемы, если не следовать корректному формату.

Создание консоли диаграммы

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

Далее, добавляем элемент DIV к самой диаграмме:

И код для построения диаграммы на основе данных, которые мы имеем на данный момент:

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

Настройки оси Y для описания значений, представленных в этой диаграмме:

Примечание: Обратите внимание, что этот блок параметров является объектом для свойства уAxis , тогда как в предыдущем примере для определения аналогичных опций использовалось одно свойство. Это стало возможно благодаря тому, что JSCharting options API позволяет объединять иерархические имена свойств в один параметр свойства.

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

Далее с помощью следующего кода мы указываем название для этой диаграммы:

Обратите внимание, что маркер %sum включен в текст заголовка. Существует много маркеров, которые могут быть использованы в названии диаграммы. Подробно все эти маркеры описаны в разделе наборов серий в этом руководстве по маркерам .

Обратите внимание, что сумма принимает денежный формат, так как она связана со значениями оси Y .

Далее изменим метки описаний, чтобы вывести суммы для каждой серии:

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

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

Эта диаграмма будет содержать только одну серию с блоками, представляющими среднемесячный доход для каждой серии данных первой диаграммы. Для этого данные серии основной диаграммы объединяются, и создается новая точка, значение которой по оси Y равно сумме значений серии, разделенной на 12 месяцев.

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

И в конце мы создадим круговую диаграмму, которая с помощью исходных данных будет отображать процентное соотношение каждого блока в общей сумме дохода. Наш текущий график может быть преобразован в круговую диаграмму с помощью добавления свойства type:’pie’ .

Вы можете просмотреть полный список типов диаграмм JS Charting вместе с примерами для каждого и поэкспериментировать с другими типами диаграмм. Этот параметр задает соответствие каждого сегмента диаграммы определенной серии данных. Если нам нужно вывести отдельно круговую диаграмму для каждой серии данных, то следует использовать параметр defaultSeriesType:’pie .

Обратите внимание, что мы указываем формат оси Y string , хотя на самом деле круговая диаграмма не имеет осей. Потому что параметры оси Y , на самом деле, описывают значения, а не саму ось.

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

Мы используем маркеры, но на этот раз это набор маркеров точек.

Справка по таблицам JS Charting

Стоит упомянуть об интересной функции JS Charting , которая в может оказаться полезной. В приведенной выше таблице мы используем временную шкалу для оси х , так что порядок и положение каждой точки данных определяется самим значением. В некоторых случаях, например, для аббревиатур месяцев, значения оси Х — это названия или любые произвольные строки.

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

Тогда любые новые значения оси х , встречающиеся в последующих сериях, будут размещены на конце оси х . JS Charting автоматически анализирует порядок всех точек серии, чтобы определить, какой должен быть полный порядок, даже если в сериях отсутствуют данные для некоторых позиций. На приведенной ниже диаграмме можно увидеть пример этого:

Здесь мы присваиваем значения дат в качестве названий точек, и удаляем параметр шкалы времени оси Х . В результате диаграмма выглядит так же, как и при использовании шкалы времени и временных значений.

Топ-пост этого месяца:  Курс по jQuery. Урок 12. Работа AJAX. Часть 2

Заключение

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

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

Данная публикация представляет собой перевод статьи « JS Charting Google Sheets » , подготовленной дружной командой проекта Интернет-технологии.ру

getSelection() для получения данных из строки в API диаграмм Google

Я пытаюсь инициировать создание нового BarChart с помощью API диаграмм Google, когда пользователь нажимает на конкретную панель. Я думаю, что понимаю понятия, и хотел, по крайней мере, заставить функцию getSelection() работать и отображать, на какой бар щелкнул пользователь. Но каждый раз, когда вы нажимаете на панель, она просто зависает с дисплеем и без java-оповещения. Есть предположения?

Создан 07 сен. 11 2011-09-07 17:01:35 Graham Hukill

Как Создавать Профессиональные Диаграммы в Google Таблицах

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

Диаграммы и Графики являются средством визуального обобщения данных. Гораздо проще увидеть смысл в красивой круговой диаграмме или в гистограмме, чем в наборе цифр. Правильно поданная диаграмма в вашей презентации может вызвать «ага!»- эффект у вашей аудитории во время интерпретации ваших данных.

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

Когда у меня большой список данных, я часто «забрасываю» их в диаграмму, что бы иметь возможность их быстро проанализировать. Если мне нужно увидеть тренды, или самые большие значения, то это быстро можно сделать с помощью графиков. Графики — это то, что помогает понять смысл ваших данных.

Один из моих любимых инструментов по созданию графиков и диаграмм — это Google Таблицы (Google Sheets). Они бесплатные и «живут» в вашем браузере, так, что нет необходимости покупать другие инструменты, такие как Microsoft Excel. В этом уроке, я научу вас как использовать Google Sheets, для создания привлекательных диаграмм и графиков, легко и просто.

Как Быстро Создавать Диаграммы и Графики в Google Sheets (Смотри и Учись)

Если вы хотите начать создавать диаграммы в Google Sheets, посмотрите скринкаст выше. Я проведу вас по всем этапам создания вашей первой диаграммы в Google Sheets.

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

Как Создать Ваш Первый График в Google Sheets

Если у вас нет Google аккаунта, создайте его зайдя на домашнюю страницу Google Drive. Вы можете войти, использовав ваш Google аккаунт или создать бесплатно новый, что бы начать.

1. Создайте Таблицу

После того, как вы вошли в свой аккаунт Google Drive, создайте новую таблицу, нажав на New и выбрав Google Sheets. Это создаст новую таблицу, куда можно добавить данные и затем построить графики для этих данных.

Зайдите в New > Google Sheets, чтобы создать новую таблицу.

2. Добавьте Ваши Данные

Любой график начинается с данных таблицы. Для каждого параметра должны быть данные в соответствующей строке.

Используйте одну строку, для каждой категории данных, которые вы хотите анализировать.

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

3. Выделите Ваши Данные

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

Выделите столбцы с вашими данными, что бы создать ваш первый график.

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

Вы так же можете выделить отдельные столбцы, данные из которых вы хотите использовать. Кликните по столбцу, что бы включить его в график, затем удерживайте Control (Cmd для Mac) и кликните по другому хедеру колонки.

4. Выберите Insert > Chart

После того, как вы выделили ваши данные, найдите вкладку меню Insert над вашей таблицей. Выберите Chart что бы вставить ваш график в Google Sheets.

Выделив ваши данные, зайдите в Insert > Chart, чтобы создать ваш первый график.

5. Выберите Формат Диаграммы в Google Sheets

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

После того, как вы запустили редактор диаграмм, вы можете видеть в нем несколько вкладок, с помощью которых вы можете создать вашу первую диаграмму. То, что я люблю в Google Sheets, так это то, что они предлагают варианты диаграмм. Они действительно оценивают выбранные вами данные, и предлагают диаграммы, которые лучше подходят. Вкладка Recommendations содержит несколько идей и вариантов, как можно представить ваши данные.

Рекомендации Графиков в редакторе диаграмм в Google Sheets

Если вам не нравятся рекомендации, выберите меню Chart Types, что бы посмотреть все возможные варианты диаграмм. Вы можете выбирать из целого ряда типов диаграмм, а также у вас есть несколько вариантов для каждого типа (например, гладкие кривые вместо ломанных линий, для случаев линейных графиков).

Изменяйте тип графиков в Google Sheets.

Вы можете так же выбрать Customization что бы настроить представление вашей диаграммы. Я предпочитаю сначала вставить свою диаграмму, и затем настраивать ее по необходимости.

6. Настройте Свой График

После того, как вы вставили график в Google Sheet, вы можете настроить их, что бы они выглядели как нужно, включая название графика и изменение стиля отображения.

Изменяйте стиль отображения вашего графика с помощью Advanced Edit.

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

У вас есть длинный перечень вариантов для настройки вашей диаграммы, начиная от названия до цвета вашей линии. Ниже вы можете видеть пример изменения графика:

Пример Измененного Графика в Google Sheets.

Заметьте, что вы можете также вернуться назад к вкладке меню Chart types если хотите полностью изменить ваш график.

Вот вы и создали свою первую диаграмму в Google Sheets. Теперь пришло время подумать как лучше использовать диаграммы и чем каждый тип отличается от другого. Продолжим обучение.

4 Основные Типы Диаграмм (И Когда Их Использовать)

Google Таблицы позволяют вам создавать диаграммы различных типов. Мы приведем примеры для каждого типа диаграмм и поясним в каком случае, какую диаграмму лучше использовать.

1. Line Charts (Линейные Графики)

  • Когда Использовать — когда вам нужно показать аудитории, как данные изменяются во времени.
  • Пример — Показать расходы на заработную плату по месяцам.

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

Линейные графики очень удобны для отображения изменений за период времени.

2. Area Charts (Диаграммы с областями)

  • Когда Использовать — когда нужно показать соотношение двух частей, которые вместе составляют целое.
  • Пример — Показать полные выплаты работникам которые складываются из зарплат и пособий.

Я предпочитаю их использовать, что бы показать как складывается стоимость или количество, накладывая графики друг на друга.

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

Google таблицы предлагают различные варианты отображения диаграмм с областями. На примере ниже, я показал полные выплаты моим работником, которые складываются из окладов и пособий.

3. Column Charts / Bar Charts (Гистограммы/Линейчатые диаграммы)

  • Когда Использовать — Что бы показать высоту для каждой переменной, и сравнить их между собой.
  • Пример — Используйте гистограмму, что бы показать сколько вы делаете шагов за день, что бы было легче сравнить разные дни.

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

Гистограммы — это индикаторы, которые показывают вам величину переменной используя столбики.

4. Pie Charts (Круговые Диаграммы)

  • Когда Использовать — Что бы показать как часть относится к целому.
  • Пример — Что бы показать, сколько процентов времени вы потратили на каждый проект.

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

Круговая диаграмм в Google Sheets автоматически рассчитает для вас проценты. Поместите ваши данные в две колонки и создайте круговую диаграмму, что бы ваши данные автоматически разбились по категориям.

Круговая составит из ваших категорий, что-то вроде пирога, где каждый кусок пропорционален своему процентному вкладу; большой «кусок пирога» соответствует большему вкладу в процентах.

Какой Тип Диаграммы в Google Sheets Вам Следует Использовать?

Выбор нужной диаграммы — это личный выбор, так как одни данные можно успешно представить и одним стилем и другим (они пересекаются в использовании). В Google Sheets легко переключаться между различными стилями или настраивать их.

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

Подводим Итоги и Продолжаем Обучение

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

Топ-пост этого месяца:  Типы данных в Sass

Envato Tuts + является ценным ресурсом знаний об использовании электронных таблиц и презентаций. Посмотрите эти уроки, чтобы продолжить ваше обучение:

  • Преимущество Google Sheets в том, что их можно использовать совместно с другими веб-сервисами, такими как Google Finance. Попробуйте следить за рынком акций прочитав статью Как Отслеживать Данные Рынка в Google Sheets.
  • Таблицы так же позволят вам связать во едино разные сервисы, используя IFTTT, такими как Twitter, Dropbox, и другими.
  • Melissa Murphy создала отличный урок о том, как Превратить ответы на Google Формы в Красивую Визуализацию, в котором вы научитесь и как работать с опросами и как создавать диаграммы.

У вас остались еще какие-то вопросы по диаграммам? Раздел комментариев всегда доступен для ваших вопросов, а может и советов из вашего опыта.

Визуализация данных Google Analytics с помощью Google Chart Tools

Александер Лукас, команда Google Analytics API
Июль 2010 г.

Содержание

Введение

В этой статье показано, как получать данные из Google Analytics Data Export API и визуализировать их с использованием множества различных типов диаграмм с помощью Google Charts API. В данной конкретной статье основное внимание уделяется решению этой задачи с помощью языка Javascript, который позволяет, например, включить в веб-приложение изящные панели мониторинга без необходимости разбираться в том, как рисовать диаграммы. Но поскольку в запросах к Chart API используются только URL, можно использовать любой язык.

Код, который вы напишете, дает следующие возможности.

  1. Извлечение из службы Google Analytics данных за неделю.
  2. Приведение этих данных к формату, пригодному для использования в Charts API.
  3. Настройка параметров диаграммы, на которой будут отображаться данные.
  4. Преобразование этих параметров диаграммы в URL диаграммы и вставка изображения на веб-страницу с помощью этого URL.

Прежде чем начать

Чтобы получить максимальную пользу от этой статьи, вам потребуются:

  • знание основ JavaScript;
  • опыт работы с Google Analytics, в том числе понимание параметров и показателей;
  • доступ к активному аккаунту Google Analytics с реальными данными по меньшей мере за неделю;
  • знакомство с документом Руководство по началу работы с Data Export API на языке Javascript. Предполагается, что вам известно все, что описано в этом руководстве;
  • Загружаемые файлы gettingStarted.html и gettingStarted.js содержат локальную копию исходного кода, получаемого в результате выполнения всех инструкций этой статьи.

Извлечение данных из Data Export API

Требования

Для извлечения данных из Google Analytics требуется следующая информация.

  • Имя пользователя и пароль для аккаунта Google Analytics, имеющего по меньшей мере право на чтение для профиля, из которого требуется получить данные.
  • Идентификатор профиля Google Analytics, из которого требуется получить данные. Идентификатор профиля проще всего узнать на странице «Настройки профиля» в Google Analytics, как описано в разделе Справка по фидам Data Export API.

Сначала необходимо создать два файла: analyticsCharts.html и analyticsCharts.js . HTML-файл почти идентичен файлу, приведенному в разделе Настройка HTML-файла в Руководстве по началу работы. Для начала можно воспользоваться кодом из следующего примера.

Показать полный код HTML

Запрос

В рамках данной статьи мы создадим запрос, возвращающий посещения по типу посетителя и рассмотрим различные способы отображения этих данных. Параметр ga:visitorType необычен в том смысле, что у него есть только два возможных значения, в отличие от параметров типа ga:keyword , число значений которых не ограничено. Его возможные значения – «New Visitor» и «Returning Visitor». Построить график изменения этих значений с течением времени бывает очень полезно. Например, всплески числа новых посетителей по сравнению с вернувшими посетителями могут указывать на появление очень хорошей ссылки на данный сайт или свидетельствовать о начале эффективной рекламной кампании. Будем измерять эти показатели ежедневно и соберем данные за 10 дней. Запрос при этом будет иметь следующий вид:

Пока мы не увидели ничего нового. Этот запрос возвращает объект результата, который вам известен, поскольку вы уже изучили Руководство по началу работы с Data Export API на языке Javascript и умеете обрабатывать данные и извлекать их в форме красивых и удобных таблиц. В следующем разделе будет показано, как наглядно представить эти данные, чтобы их было легко воспринимать.

Все должно выглядеть великолепно – визуализация данных

Выбор типа диаграммы

Google Chart API позволяет создавать диаграммы практически любого типа. Однако широкие возможности означают и большую ответственность. Прежде чем создавать целую презентацию Powerpoint, полную графиков, гистограмм, стрелок и круговых диаграмм, потратьте немного времени и изучите, какие типы диаграмм можно создавать и какие из них лучше всего подходят для представления интересующих нас зависимостей данных. Для каждого из типов зависимостей существуют свои типы диаграмм, которые лучше всего подходят для его демонстрации. Кроме того, не забывайте, что строить диаграммы разумно именно для зависимостей; их построение для отдельных чисел смысла не имеет. Нанесем на диаграмму общее число посещений.

Несколько идей для начала работы: графики и столбчатые диаграммы лучше всего подходят для демонстрации трендов – относительного изменения тех или иных показателей с течением времени. Круговые диаграммы в основном предназначены для сравнения значений друг с другом и позволяет легко понять, во сколько раз одно значение, больше другого. Хотя графики и столбчатые диаграммы также позволяют демонстрировать это, с помощью круговой диаграммы гораздо проще понять, «как общее значение x делится на категории». Но хотя круговые диаграммы идеально подходят для демонстрации мгновенных состояний, они не позволяют показывать динамику изменения с течением времени, в отличие от графиков и столбчатых диаграмм. Вот простой пример.

Наглядная демонстрация тренда Ничего не значащий набор секторов
Видно, что одно значение больше Видно, что одно значение втрое больше

Преобразование данных Google Analytics

Чтобы можно было строить диаграммы, необходимо преобразовать данные, получаемые из Data Export API, к нужному формату. Этот формат может немного различаться в зависимости от типа диаграммы, как будет показано ниже, но если данные хотя бы перевести в более управляемую структуру, в дальнейшем их будет гораздо проще форматировать в соответствии с выбранным типом диаграммы. Для начала рекомендуется сделать следующее.

  • Перенести результаты каждого вида в свой массив В нашем случае получится один массив для новых посещений и второй массив для посещений вернувшихся посетителей. Пусть каждая запись массива представляет один день.
  • Создать словарь пар «имя-значения» для всех данных, которые будут отображаться на итоговой диаграмме. Цвета, используемые данные, параметры на диаграмме – все эти значения будет удобно находить и изменять с помощью такого словаря.

Начнем с запроса «Посещения по типу посетителя». Нам потребуются следующие данные:

  • значение дня для каждой записи;
  • тип посетителя для каждой записи;
  • число посетителей определенного типа для конкретного дня;
  • скользящее максимальное значение для каждого типа посетителей (для выбора правильного масштаба диаграммы).

Помните, что для 10-дневного промежутка времени и двух возможных типов посетителей в итоговом наборе может оказаться меньше 20 записей. Например, если в день 1 сайт посетило 10 новых посетителей и ни одного вернувшегося, это не означает наличия записи следующего вида:

Соответствующая запись будет просто отсутствовать.

Значение 0 будет возвращено для отдельного показателя, если только параметром запроса является дата. Поэтому необходимо проверить на стороне клиента, что массивы числа посетителей синхронизированы с датами (если используются параметры дат). Это означает необходимость обеспечить синхронизированность строк таблицы, для чего мы добавляем ноль в массив newVisitor или returningVisitor , если для данного сочетания дня и типа посетителей отсутствует запись.

Следующий метод получает данные из результатов Google Analytics, копирует их в объект и возвращает этот объект.

Этот метод выполняет перебор результатов, возвращаемых Analytics Export API, и копирует значения числа посетителей в два массива: «returningVisitors» и » newVisitors «. Массивы days , returningVisitors и newVisitors добавляются в возвращаемый объект наряду с максимальными значениями новых и вернувшихся посетителей.

Чтобы сохранить синхронизацию массивов посетителей с массивом дней, в начале каждого дня вспомогательный метод fillToSameSize проверяет, что оба массива имеют одинаковы размер. В противном случае в меньший размер добавляется «0», чтобы выровнять массивы.

Когда данные собраны, можно переходить к настройке диаграмм.

Настройка параметров диаграмм

Каждая из характеристик диаграммы, которую мы собираемся построить (от цветов до отображаемых данных), настраивается с помощью параметра URL. Типы параметров и их количество зависят от типа создаваемой диаграммы. Некоторые параметры являются необязательными, но большинство – обязательны. Описание полного списка возможных типов диаграмм и параметров выходит за рамки данной статьи. Впрочем, оно выходит за рамки любой статьи. Этих типов и параметров на самом деле очень много. Желающие внимательнее изучить полный список могут открыть Руководство по началу работы с диаграммами и выбрать нужный тип диаграммы в области навигации слева. Там можно будет найти подробные справочные сведения по соответствующим параметрам и их применению в контексте выбранного типа диаграмм.

Поскольку параметры диаграммы являются лишь парами «имя-значение», они идеально подходят для представления в виде свойств объектов Javascript. Кроме того, использование объектов вместо длинных строк сцепленных параметров упрощает изменение параметров в будущем. Этот подход позволяет с легкостью превратить столбчатую диаграмму в график путем изменения одного или двух таких параметров. Для простоты создадим объект-оболочку для диаграммы с несколькими вспомогательными методами и базовым интерфейсом.

Оболочка диаграммы

Здесь показан метод, создающий «объект» новой диаграммы и подставляющий в него все необходимые параметры столбчатой диаграммы. Каждый параметр передается в виде пары «ключ-значение», которые затем будут преобразованы в URL.

Рассмотрим эти параметры.

  • chs – размеры изображения (в пикселях) для возвращаемого файла изображения.
  • chxt – оси (x и/или y), которые будут снабжены метками.
  • chtt – заголовок, отображаемый в верхней части диаграммы; текст с escape-символами для включения в URL.
  • chts – цвет и размер шрифта, разделенные запятой. FF0000,12 будет означать красный текст размером 12 пунктов.
  • cht – тип диаграммы. Например, «bvs» означает составную вертикальную столбчатую диаграмму.
  • chl – разделенный символом вертикальной черты список имен отображаемых наборов данных. Имена должны содержать escape-символы, чтобы их можно было включать в URL.
  • chco – цвета (в формате RRGGBB) для представления этих наборов данных.
  • chbh – расстояния между столбцами диаграммы.
  • chm – отображаемый на диаграмме текст, представляющий значения для каждого из столбцов.
  • chd – каждый из рядов данных, используемых на диаграмме. Запятые между значениями в ряду, знаки вертикальной черты между рядами.
  • chxl – пользовательские метки всех осей, которые требуется снабдить метками.
  • chds – пользовательские минимальное и максимальное значения для диаграммы. Любое значение, большее чем максимальное, будет отображаться, как если бы оно было максимальным. Например, по умолчанию всегда используются значения 0 (минимальное) и 100 (максимальное), поэтому столбец со значением 200 (т. е. выше максимума) будет иметь такую же высоту, как и столбец со значением 100. Часто в качестве максимального значения используется предварительно найденное наибольшее значение в наборе данных.
  • chxr – пользовательские максимальное и минимальное значения и значения шага для указанной оси. Обратите внимание, что эти значения не обязательно должны соответствовать значениям, определенным переменной «chds». Те значения определяют возможный размер объекта (линии, столбика, сектора и т. д.), служащего для отображения значения. Эти же значения определяют начальное значение, конечное значение и шаг оси. Они влияют ТОЛЬКО на метки оси. На первый взгляд это может сбивать с толку! Щелкните ссылки, чтобы узнать более подробную информацию об этих двух параметрах.

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

  • Метки оси Y являются круглыми числами. Если максимальным значением на диаграмме является 186, а ось y должна быть разделена на 5 отрезков, работать со значениями 37,2, 74,4 и т. д. будет неудобно. Лучше выполнить округление до значения, которое хорошо делится на 5, например до 200, и использовать его в качестве максимального.
  • Значения на диаграмме близки к половине расстояния между 0 и максимальным значением или превышают его. Тренд ряда данных «9,12,13,15,18» будет гораздо более наглядным на диаграмме со шкалой от 0 до 20, чем на диаграмме со шкалой от 0 до 1000.

Этот очень простой алгоритм пытается «угадать» подходящее максимальное значение, поэтому, возможно, более разумным будет использование заранее определенного максимального значения на основании известных данных о трафике сайта. Наиболее любопытные читатели могут ознакомиться с телом метода getScaleData .

Возможно, вы заметили, что метод, отвечающий за установку всех параметров диаграммы, называется getBarChart . Если требуется задать данные для круговой диаграммы, некоторые параметры будут отличаться. Это довольно разумно – у круговых диаграмм нет осей, которые требуется подписывать, между значениями диаграммы нет расстояний, и кроме того, круговые диаграммы не предназначены для одновременного отображения нескольких наборов данных, а служат для сравнения значений друг с другом.

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

Отображение диаграммы

Когда данные готовы, на их основе можно создать диаграмму. Для этого требуется выполнить две операции.

  1. Создать URL диаграммы.
  2. Вставить в HTML-файл тег IMG, в качестве источника которого указан этот URL.

Сначала создадим URL. Метод getURL объекта-оболочки объединяет параметры с базовым URL, который также определен в объекте-оболочке. Получаемый в результате URL выступает в роли запроса к Chart API для получения изображения диаграммы. Этот метод имеет следующий вид:

После получения URL необходимо с помощью метода drawChart встроить изображение с данным URL в объектную модель документа. Метод drawChart принимает два параметра: имя HTML-элемента контейнера, в который требуется встроить изображение, и URL изображения. Метод drawChart можно записать следующим образом:

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

Столбчатая диаграмма Круговая диаграмма

Теперь мы можем с минимальными усилиями преобразовать данную составную столбчатую диаграмму в диаграмму другого типа. Например, чтобы преобразовать ее в столбчатую диаграмму с группировкой, достаточно заменить тип диаграммы на «bvg», изменить подписи, чтобы они отображались у каждого ряда данных, и перекомпилировать URL.

Полученный результат будет иметь примерно следующий вид:

Либо можно вообще отказаться от столбцов и построить график. Измените параметр диаграммы на «lc» и полностью удалите подписи (они плохо смотрятся на графиках) примерно следующим образом:

Именно поэтому мы удалим подписи. Намного лучше

Что дальше?

Теперь вы умеете визуально представлять данные Google Analytics с помощью Charts API. Вы знаете, как создавать столбчатые и круговые диаграммы, а также графики. Существует множество применений этим знаниям, например можно:

  • создать гаджет iGoogle;
  • разработать симпатичную панель мониторинга трафика для системы управления содержанием;
  • подготовить солидно выглядящие обои, чтобы произвести впечатление на начальство и/или близких.

Но и это еще не все. В статье мы рассмотрели только 3 типа диаграмм и всего один запрос. Существуют сотни параметров и показателей, для которых можно создавать запросы, и десятки различных типов диаграмм, с помощью которых можно отображать результаты. Более подробную информацию о доступных вариантах можно найти по следующим ссылкам. Удачи!

  • Начало работы с диаграммами – с этого сайта удобно начинать работу с Charts API.
  • Галерея диаграмм – поможет с поиском идей.
  • Справочник по параметрам и показателям – полезный справочник по доступным параметрам и показателям. Здесь перечислены все данные, которые можно получить с помощью Data Export API.
  • Инструмент анализа запросов – инструмент, позволяющий тестировать запросы в интерактивном режиме.

API Google-диаграмм (Google Charts). Получение данных

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

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

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

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

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

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

Урок 0. Введение. Создание диаграмм с помощью Google Chart

Урок 0. Введение. Создание диаграмм с помощью Google Chart

Передает ли Chart API Google ваши данные диаграммы в Google?

December 2020

1.8k раз

Кто — нибудь знает ли Google Chart API передает исходные данные, используемые для создания диаграмм и визуализаций, в Google?
Другими словами , являются графики и визуализации , генерируемые серверами Google, или они локально библиотеками Javascript штурманской API.

1 ответы

Если говорить о картах, полученных из URL (API диаграмм), то из FAQ

В чем разница между Google Chart API и API визуализации Google?

Chart API обеспечивает простой способ создания изображения диаграмм различных видов, отправив отформатированный URL , который включает в себя как данные и диаграммах параметров конфигурации на сервер Google. Chart API включает в себя замкнутый набор карт с различными вариантами. Наборы данных Chart API ограничены размером с URL (примерно 2K).

Для визуализации API это зависит от графика / визуализации, см Политики данных, например, это один для линии диаграммы

getSelection() для получения данных из строки в API диаграмм Google

Я пытаюсь инициировать создание нового BarChart с помощью API диаграмм Google, когда пользователь нажимает на конкретную панель. Я думаю, что понимаю понятия, и хотел, по крайней мере, заставить функцию getSelection() работать и отображать, на какой бар щелкнул пользователь. Но каждый раз, когда вы нажимаете на панель, она просто зависает с дисплеем и без java-оповещения. Есть предположения?

Создан 07 сен. 11 2011-09-07 17:01:35 Graham Hukill

Google Chart API // Google

6 декабря был запущен новый проект Google Chart API. При помощи данного API вы с легкостью сможете построить график наподобие того, который оглавляет данный пост.
Данный сервис имеет достаточно большие возможности, и о них далее….

Типы графиков

На данный момент вы сможете построить 5 типов графиков (все ссылки вас приведут на страницу с описанием API):

Более подробная информация доступна на домашней страничке проекта, правда пока только английский вариант

Размер

Максимальный размер графика ограничен 300,000 пикселей. При этом ширина и высота ограничены 1000 пикселей, т.е. можно построить график следующих размеров: 1000×300, 300×1000, 600×500, 500×600, 800×375, и 375×800.

Данные

Насчет данных которые мы можем скармливать API, тут Google извратился, существует три способа шифрования пакования данных:

  • Simple encoding – может оперировать 62 различными значениями, для этого используются буквы латниского алфавита (A-Z, a-z), цифры (! они соответствуют значениям от 52 до 61), символ подчеркивания (_) для обозначения null, и запятая (,) для разделения нескольких графиков
  • Text encoding – разрешающая способность данного типа – 1,000 значений, для этого используются числа от 0.0 до 100.0, -1 для null и символ (|) для разделения графиков
  • Extended encoding – разрешающая способность данного типа – 4,096 значений, для реализации используются пары символов из буквы латниского алфавита (A-Z, a-z), цифр, дефис (-), точка (.), подчеркивание (_), и запятая (,)

Обязательные и опциональные параметры

Для построения графика необходимо указать лишь три параметра – тип, размер и данные, все остальные параметры являются опциональными:

Параметр Линейный Точечная Столбчатый Диаграмма Венна Секторная диаграмма
Название графика Да Да Да Да Да
Легенда Да Да Да Да Да
Цвета Да Да Да Да Да
Цвет фона и графика Да Да Да Да Да
Составное именование осей Да Да Да
Линии сетки Да Да
Маркеры Да Да
Стиль линий Да
Заполнение цветом Да
Название секторов Да

Выводы

Как по мне – данный сервис станет популярным у пользователей различных блого-хостингов аналогичных Blogger, а вот для остальных – меня мучают сомнения, хотя чем чёрт не шутит, на волне бренда Google может выехать…

Передает ли Chart API Google ваши данные диаграммы в Google?

December 2020

1.8k раз

Кто — нибудь знает ли Google Chart API передает исходные данные, используемые для создания диаграмм и визуализаций, в Google?
Другими словами , являются графики и визуализации , генерируемые серверами Google, или они локально библиотеками Javascript штурманской API.

1 ответы

Если говорить о картах, полученных из URL (API диаграмм), то из FAQ

В чем разница между Google Chart API и API визуализации Google?

Chart API обеспечивает простой способ создания изображения диаграмм различных видов, отправив отформатированный URL , который включает в себя как данные и диаграммах параметров конфигурации на сервер Google. Chart API включает в себя замкнутый набор карт с различными вариантами. Наборы данных Chart API ограничены размером с URL (примерно 2K).

Для визуализации API это зависит от графика / визуализации, см Политики данных, например, это один для линии диаграммы

Топ-пост этого месяца:  PHP отрицание – особенности применения и синтаксиса
Добавить комментарий