JS Charting: Таблицы Google

2016-01-10

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

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

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

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

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

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

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

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

https://docs.google.com/spreadsheets/d/1D1vL8EI0uRzeiGM-A8hZLgUCexXrocw5B_qTGnCekNE/pubhtml

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

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

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

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

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

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

$.getJSON(
    "https://spreadsheets.google.com/feeds/list/1D1vL8EI0uRzeiGM-A8hZLgUCexXrocw5B_qTGnCekNE/od6/public/basic?alt=json",
    function(data){
    console.log(data);
}

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

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

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

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

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

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

Посмотреть код

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

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

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

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

<script src="JSC/JSCharting.js"></script>

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

<div id="mainChart"></div>

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

$('#mainChart').JSC({
	xAxisScaleType: 'time',
	yAxisScaleRangeMin: 0,
	series: seriesData
});

Посмотреть

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

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

yAxis:{
    formatString:'c',
    labelText:'Received',
    scaleRangeMin: 0
},

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

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

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

titleLabelText: '2015 Accounts Receivable Total: %sum'

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

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

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

legendDefaultEntryText:'<b>%name</b> %sum',

Посмотреть результат

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

<div id="avgChart"></div>

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

$('#mainChart').JSC({/*options*/, function(chart){ /*callback code*/});

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

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

Посмотреть

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

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

Посмотреть

$('#pieChart').JSC({
	type:'pie',
 	yAxisFormatString: 'c',
     defaultPointLabelText:'<b>%name</b> %percentOfTotal%',
	series: seriesData
  });

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

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

defaultPointLabelText:'<b>%name</b> %percentOfTotal%',

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

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

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

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

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

Посмотреть

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

Заключение

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

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