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


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

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

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

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

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

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 версий.

Библиотека для построения диаграмм средствами Google Chart API

Введение

Google Chart позволяет строить 11 типов различных диаграмм. Вот они:

  1. Линейный график
  2. Гистограмма
  3. Пузырьковый график
  4. Лепестковая диаграмма
  5. Японские свечи
  6. Диаграмма Венна
  7. QR-код
  8. Карта
  9. Формула
  10. Граф
  11. Круговая диаграмма

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

Сразу уточню, что массивных выкладок кода библиотеки в статье не будет, вместо этого будет приложена справка, созданная с помощью Doxygen (подробнее в статье Автоматическое создание документации к программам на MQL5). Там можно будет найти описания открытых методов классов библиотеки, документацию по используемым перечислениям и исключениям, возникающим в процессе создания диаграммы.

1. Описание средств получения и отображения диаграмм

Начнём с конца. Предположим, что мы правильно сформировали запрос. Теперь нужно отправить его на сервер, считать ответ в файл и привязать файл к графическому объекту на графике для отображения диаграммы. Для работы с Интернет воспользуемся функциями, описанными в статье Использование WinInet.dll для обмена данными между терминалами через Интернет.

Также есть одна маленькая загвоздка: компоненты, предназначенные для отображения изображений (Рисунок и Графическая метка) работают только с изображениями формата BMP, а Google Chart возвращает только PNG или GIF. Следовательно, нужно будет конвертировать изображение. Этим занимается импортируемая функция Convert_PNG(). Код функции для получения диаграммы имеет вид:

Следует отметить широкое использование мною классов Стандартной библиотеки при создании библиотеки Google Charts, за что отдельное спасибо её разработчикам.

2. Обзор компонентов библиотеки Google Charts

Запрос на сервер должен начинаться так: http://chart.apis.google.com/chart?cht=, далее следует указать тип диаграммы, а уже потом остальные параметры. Запрос, помимо заголовка, состоит из команд и их параметров, команды разделяются между собой символом «&», например команда &chtt=Title установит в заголовок диаграммы слово «Title».

2.1 Линейный график

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

В итоге, в компоненте с именем «test diagram» появится такое изображение:

Рисунок 1. Простой пример построения линейного графика

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

Усложним график, добавим ещё одну линию, оси и сетку:

График принял такой вид, как на рисунке ниже. Следует отметить одну важную особенность — метод GetChart() следует вызывать после остальных методов т.к. именно он получает график.

Рисунок 2. Более сложный пример линейного графика

И это ещё далеко не всё. Добавим маркеры, заголовок, легенду и заливку:

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

Рисунок 3. Ещё б олее сложный пример линейного графика

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

Рисунок 4. Все возможности линейного графика

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

2.2 Гистограмма

Иными словами, это «столбиковый график». За его построение отвечает класс CBarChart. Отличиями от CLineXYChart являются отсутствие маркеров, необходимости задавать набор данных для X оси, а также некоторые особенности, присущие только диаграммам этого типа. В остальном всё так же, как и с CLineXYChart.

Рисунок 5. Пример гистограммы

Обратите внимание на то, что у нас три набора данных, и столбики расположены друг над другом в порядке, наилучшем для отображения, однако существует и другой способ группировки столбцов. Он устанавливается при помощи метода SetGrouped():

Рисунок 6. Пример гистограммы с иным способом группировки столбцов

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

2.3 Круговая диаграмма

Класс CPieChart строит круговую диаграмму. Можно создать как двумерную, так и трёхмерную диаграмму:

Рисунок 7. 2D и 3D примеры круговой диаграммы

Тип отображения (2D или 3D) задаётся вызовом метода SetPieType(). Ещё одним полезным свойством является возможность задания нескольких колец, однако тогда будет доступен только 2D режим. Для задания второго кольца укажем параметр dimensional метода AddPieSlice() отличным от нуля:

Рисунок 8. Кольцевая диаграмма

Обратите внимание, что на диаграмме выше также присутствуют выносные метки секторов. Они устанавливаются методом SetPieLabels(), и могут заменить легенду. Однако есть одно неудобство — размеры меток не подгоняются автоматически под размеры графика, вследствие чего могут выпасть за его пределы, в таком случае нужно увеличить ширину графика. Установка сетки, осей, маркеров, масштабирования для этого типа диаграмм не предусмотрена. Удалить сектор можно методом DeleteLine().

2.4 Лепестковый график

Класс CRadarChart строит лепестковый график. Никаких отличий от класса CLineXYChart не имеет. Все его методы доступны и в CRadarChart:

Рисунок 9. Лепестковая диаграмма

2.5 Свечной график

Класс CCandleChart строит свечной график. Свечи добавляются методом AddCandles():

Топ-пост этого месяца:  Регулярное выражение проверки email

Рисунок 10. Свечной график

Маркеры, легенда и метки недоступны для этого типа графиков.

2.6 Формула

Класс CFormulaChart позволяет создать формулу. Формула передаётся в виде строки на языке TeX в метод SetFormulaString():

Рисунок 11. Формула

Также можно установить заливку методом SetFill(). Никакие дополнительные возможности не поддерживаются.

2.7 Граф

Класс CGraphChart строит графы. Методы AddNode() и AddEdge() добавляют узлы и рёбра на граф:

Рисунок 11. Графы

Метод SetEngine() устанавливает специфический тип графического двигателя, используемого при построении графа. С этим можете поэкспериментировать сами. Методы DeleteNode() и DeleteEdge() удаляют узлы и рёбра с графа.

2.8 Диаграмма Венна

Класс CVennChart строит диаграмму Венна.

Метод SetCircleSizes() установит размеры множеств, SetCircleColors() их цвета, SetVennLegend() их подписи, а SetIntersections() размеры пересечений:

Рисунок 11. Диаграмма Венна

2.9 QR-код

Класс CQRCode позволяет создать QR-код:

Рисунок 11. QR-код

Метод SetData() установит данные, на основе которых будет создан код. Методы SetErrCorrection() и SetEncoding() установят коррекции ошибка при кодировании и кодировку.

2.10 Карта

Класс CMapChart создаёт карту мира или континента с возможностью выделить необходимые страны:

Рисунок 11. Карта Африки

Коды нужных стран передаются в метод SetCountries() в формате ISO 3166-1-alpha-2. SetZoomArea() установит континент карты, а SetColors() цвета стран.

2.11 Пузырьковый график

Класс CScatterChart строит пузырьковый график. Единственное отличие от CLineXYChart — способ задания данных.

Здесь для задания данных используется метод AddLineScatter(), в который нужно передать координаты точек и их размеры:

Рисунок 11. Пузырьковый график

Заключение

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

Работа с графиками и диаграммами google chart

У гугла есть сотни крутых сервисов, начиная от почты gmail и заканчивая уведомлениями google alert. Но самое прикольное, что есть гугловские сервисы, которые упрощают жизнь разработчикам, например, google font для нестандартных шрифтов на сайте или google chart для построения графиков.

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

Поэтому хочу помочь таким же бедолагам и сэкономить их время. А заодно будет и мне небольшая шпаргалка.

Построение круговой диаграммы

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

See the Pen vgWwWW by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.

От него и будем плясать. Что меня не устроило? Во-первых, цвета, не то чтобы они мне не понравились, но в макете были другие. Поэтому начнем с изменения цветов сегмента. Благо поиск по странице документации слова «color» быстро меня навел на нужный кусок. В опции надо запихать необходимые параметры:

Шестнадцатиричное значение цвета или можно написать то, что понимает css: ‘yellow’, ‘red’ и т.д. Количество предустановленных цветов не обязательно должно равняться количеству реально заданных сегментов, но лучше установить количество цветов с запасом, т.к. если ваших цветов не будет хватать, то диаграмма возьмет их из значений по умолчанию, что может сильно поломать ваш дизайн. Сразу изменим толщину рамки у диаграммы, за это отвечает параметр pieHole (размер дырки от бублика =) ), значения от нуля до единицы, где ноль это сплошные сегменты, а при n→1 рамка становится тоньше.

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

Значения говорят сами за себя. С chartArea есть особенность, если точку начала установить в нуле, а размеры сделать по 100%, то будет небольшой баг, при наведении на сегмент он подсвечивается, и вот эта подсветка обрежется границами обертки, поэтому я отступил от края. Теперь завернем все это в более осмысленную функцию (мне хочется верить, что она более осмысленная) и посмотрим что получается.

See the Pen oBoRGZ by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.

Продублирую функцию отдельно (вдруг онлайн интерпретатор удалит мое творение?), чтобы дать комментарии

Принимает 2 параметра: массив с данными (первым элементом в массиве должно идти описание графика) и id блока куда встраивать диаграмму. Таким образом не обязательно отрисовывать график в момент готовности АПИ, можно вызвать в любой другой удобный момент, например, кода пользователь введет данные, которые нужно визуализировать. Мне кажется, это хорошо.

Построение гистограммы

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

Сразу дам итоговый вариант, и опишу что здесь за что отвечает

See the Pen dNZBJg by Ildar Saribzhanov (@ildar_r_saribzhanov) on CodePen.

И сама функция выглядит так

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

Параметр chartArea в действительности очень сильно влияет на отображение. Если точку начала рисования отодвинуть от края, то появится градация шкал. Если высоту задать меньше 100%, то снизу появятся подписи к колонкам, если ширину установить меньше 100%, то справа появится кнопка выделения группы. Или что-то типа такого, по примерам из документации можно понять, что происходит.

Параметр bar — устанавливает ширину колонок.
vAxis — устанавливает максимально и минимальное значение шкалы, может быть важно, если необходимо, чтобы была видна нулевая точка. Так как я старался сделать функцию универсальной, то максимальное значение вычисляется, а не устанавливается жестко.

Итого

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

Офлайн-конверсия Яндекс.Метрики. Теряются выполнения целей в Метрике

не могу построить 2 графика google charts

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

1 ответ 1

Для того, что бы создать два/несколько графиков на одной странице, необходимо: 1. в head загрузить все пакеты в google.charts.load() . 2. для каждой диаграммы на странице добавить вызов.

google.charts.setOnLoadCallback() (например: google.charts.setOnLoadCallback(myPieChart))

Вот готовый код двух графиков на одной странице:

Да ребята, все эти вопросы и многие другие Вы можете прочитать тут.

Специально для «ленивых» разработчики постарались разжевать материал.

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

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

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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


20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Распознавание текста из изображений через командную строку

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

HTTPie — удобный инструмент похожий на cURL

cURL — это самый известный инструмент для отправки HTTP запросов из командной строки. В этом уроке мы познакомим вас с более удобным аналогом, который называется HTTPie.

Как Создавать Профессиональные Диаграммы в 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 легко переключаться между различными стилями или настраивать их.

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

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

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

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

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

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

Создание диаграмм при помощи Google Chart API

Written on 21 Октября 2009 . Posted in ASP.NET

Топ-пост этого месяца:  Wix — свежие обновления от крупнейшего онлайн-конструктора

Существует множество способов создания диаграмм в веб-странице ASP.NET. Вы можете использовать классы в пространстве имен System.Drawing для того, чтобы создать диаграммы программным путем. Вы также можете использовать Microsoft Office Web Components (OWC). Существуют также свободное программное обеспечение в виде инструментов рисования диаграмм, а также изобилие сторонних компонентов. Компания Microsoft также вступила в игру и предоставила Microsoft Chart Controls for the .NET Framework 3.5 SP1 (Элементы управления диаграммами для .NET Framework 3.5 SP1) .

Данная статья рассматривает способ использования Google Chart API для создания диаграмм. Google Chart API — это бесплатный сервис от компании Google , который позволяет разработчикам веб-приложения с ходу создавать изображения диаграмм путем создания элемента с атрибутом src указывающим на ссылку URL , которая включает в себя данные диаграммы, ярлыки и другую информацию для строки запроса. К примеру, диаграмма, показанная справа, доступна по адресу http://chart.apis.google.com/chart?cht=p&chs=225×150&chd=t:100,30,70,25&chl=Q1|Q2|Q3|Q4&chtt=2008%20Sales%20By%20Quarter. Читайте далее, чтобы узнать как использовать Google Chart API в вашем веб-сайте ASP.NET!

Обзор Google Chart API

Google Chart API позволяет разработчикам создавать диаграммы различного типа на лету. Google Chart API хранится по ссылке на ресурс (URL) на веб-серверах компании Google и при получении правильно форматированной ссылки (URL) возвращает диаграмму в виде изображения. Характеристики диаграммы (цвета, заголовки, оси, точки на графике и т.д.) указываются посредством строки запроса ссылки (URL). Полученное изображение может быть отображено при помощи элемента , или может быть сохранено в файловой системе вашего веб-сервера либо в базе данных. Самым приятным аспектом является то, что Google Chart API бесплатный и не требует наличия никакой учетной записи и прохождения процесса регистрации!

Основной ссылкой на Google Chart API является http://chart.apis.google.com/chart?. Параметры, которые определяют отображение диаграммы следуют после символа ?. Существует множество параметров, которые вы можете указать посредством строки запроса. Единственными обязательными параметрами являются размер диаграммы (chs), данные диаграммы (chd) и тип диаграммы (cht). Следующая таблица описывает некоторые используемые параметры:

Возможности Google Chart API
Параметр Описание
cht Тип диаграммы. Google предлагает примерно дюжину различных типов диаграмм, включая линейные, столбцовые, сегментные и другие.
chs Размер диаграммы. Данное значение выражается в качестве chs=W >
chtt Заголовок диаграммы.
chd Информация диаграммы. При использовании данного параметра вы должны указать формат данных. Google Chart API позволяет вам использовать различные кодировки данных. Простейшим способом будет использование текстовой кодировки, которая обозначается буквой t. Далее идет двоеточие (:), а за ним идет список значений точек графика, разделенных запятой.

Стандартная текстовая кодировка требует наличия числовых значений, отображаемых на графике, в виде чисел с плавающей точкой между нулем (0.0) и сотней (100.0). Для того, чтобы правильно масштабировать данные преобразуйте каждое значение в процентное отношение к значению самому большому значению. То есть, самое большое значение может быть 100.0, а остальные точки будут выражены в процентном отношении к этому значению — 50.0 это половина самого большого значения, 25.0 для 25% от самого большого и т.д. Чтобы обработать диаграмму со значениями 10, 20 и 8 вы пошлете: chd=t:50,100,40. Обратите внимание на t:, которое указывает на то, что форматирование данных использует текстовую кодировку.

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

Используя информацию, указанную выше, вы можете потестировать создание своих собственных графиков и диаграмм при помощи Google Chart API. К примеру, следующая ссылка сгенерирует линейную диаграмму с размерами 300×200 и значениями 43, 23, 12, 62, 34 и 39, а также заголовком «Monthly Traffic»: http://chart.apis.google.com/chart?cht=lc&chs=300×200&chd=t:69.3,37.1,19.4,100.0,54.8,62.9&chtt=Monthly%20Traffic

Обратите внимание на то, что точки графика, посланные в параметре chd не являются теми, которые мы хотим видеть на графике — 43, 23, 12, 62, 34 и 39. Вместо этого были высланы процентные соотношения к самому большому значению данных точек. Другими словами, точка графика x переводится в процентное соотношение при помощи выражения (x / maxDataPoint) * 100. К примеру, реальное значение 43 превращается в 43/62 * 100 = 69.3.

Вставьте данную ссылку в тег так, как это сделано в следующей разметке :

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

Хорошо выглядит, не правда ли ? Данная диаграмма очень проста и нам потребовалось 1.5 секунды, чтобы ее создать. Если вы уделите больше времени на исследование возможностей Google Chart API , то вы найдете параметры, которые вы можете использовать для указания цветов, добавления осей, ярлыков и других стандартных характеристик. К примеру, мы можем включить числовые значения к оси Y , чтобы продемонстрировать число посещений и значения дней на оси X, просто обновив ссылку таким образом, чтобы она использовала следующую строку запроса: ?cht=lc&chs=300×200&chd=t:69.3,37.1,19.4,100.0,54.8,62.9&chds=0,62&chtt=Monthly%20Traffic&chxt=x,y&chxl=0:|1st|7th|14th|21st|31st&chxr=1,0,62

Вот как будет выглядеть диаграмма:

Создание Google-диаграммы для ASP.NET-страницы, используя информацию из базы данных

Поработав больше вы сможете создать диаграмму, основанную на значениях из базы данных при помощи Google Chart API. Нам просто необходимо создать соответствующую строку запроса, основанную на данных, по которым необходимо ее создать, типу диаграммы и ярлыкам осей X и Y (в случае, если таковые есть). Далее в статье мы рассмотрим построение строки запроса в ASP.NET-странице для запроса к базе данных, который возвращает объем продаж по месяцам для компании Northwind Traders. Работающий код вы можете загрузить в конце статьи.

Первым шагом будет создание запроса, который возвращает необходимые данные. Мой пример использует базу данных Northwind, которая хранит в себе информацию по товарам (products), клиентам (customers), заказам (orders) и т.д. Для данного примера я решил создать диаграмму валового объема продаж по месяцам заданного года. Следующий запрос возвращает данную информацию для заданного года:

База данных Northwind имеет продажи для 1996, 1997 и 1998 годов. Если вы передадите одно из этих значений в качестве параметра @Year, то вы получите следующие результаты:

MonthVal Total
1 66692.8000
2 41207.5500
3 39979.9000
.

Пример указывает упомянутый запрос в элементе управления SqlDataSource и отображает результаты на странице в элементе управления GridView. GridView был специализирован таким образом, чтобы он отображал результаты колонки Total в формате валюты, а также форматировал колонку MonthVal таким образом, чтобы в каждой строке содержались только первые три буквы каждого месяца. Данное форматирование MonthVal обрабатывается вспомогательной функцией в фоновом коде, а именно DisplayMonthName, которая принимает месяц в качестве числового значения (1, 2, . 12) и возвращает форматированное значение («Jan», «Feb», . «Dec»). Я также добавил элемент управления DropDownList к странице для того, чтобы пользователь мог указать значение параметра @Year — DropDownList имеет жестко запрограммированные значения 1996, 1997 и 1998.

В дополнение к элементам управления SqlDataSource, GridView и DropDownList для года страница включает в себя элемент управления Image для отображения диаграммы. Свойство ImageUrl элемента Image программно установлено в соответствующую ссылку URL в классе с фоновым кодом. Это обрабатывается в методе DisplayChart. Данный метод начинается с создания основной части ссылки (URL) — тип диаграммы (cht), размер диаграммы (chs) и заголовок диаграммы. Тип диаграммы и размер диктуются значениями, выбранными пользователем при помощи элементов управления DropDownList.

Далее, вызывается метод Select элемента SqlDataSource. Данные результаты перечисляются и их значения собираются в список десятичных значений (Decimal) (literalDataPointsList) и ярлыки для каждой точки данных, то есть аббревиатуры каждого месяца, записываются в список строковых значений (xAxisLabels). Как только будут записаны значения точки графика они будут выражены в процентном соотношении к самому большому значению и сохранены в списке строковых значений, названном relativeDataPointValues. Значения в данном списке затем объединяются (при этом они разделены запятыми) и назначаются параметру данных диаграммы (chd).

Далее указываются ярлыки для осей X и Y. Ось Y простирается от 0 до максимального значения, возвращенного запросом, в то время как точки данных оси X загружаются из списка xAxisLabels. Наконец, свойству ImageUrl элемента Image назначается значение построенной ссылки (URL).

В конце концов вы должны увидеть диаграмму, показанную ниже. Первый рисунок демонстрирует продажи за 1996 год в линейном виде, а второй — продажи за 1997 при помощи столбцовой диаграммы.

API Google Charts: отображение значений точек данных в линейной диаграмме

Я новичок в PHP и получил проект, который использует Google Visualization. В приведенном ниже коде, как я могу постоянно отображать значения данных и точки данных на линейной диаграмме?

Вещи, которые я пробовал: 1. Настройка pointSize на некоторое значение 2. Установка dataOpacity в 1 3. Добавление этого столбца аннотации , , как предлагается здесь: API Google Charts: всегда показывать значения точек данных с помощью arrayToDataTable. Как? но вместо этого имеет место ошибка сервера. Возможно, я ошибаюсь.

Ценю твою помощь. Спасибо!

После некоторых экспериментов кажется, что Material Line Chart не поддерживает аннотации на данный момент. Обновите мой код, чтобы использовать классическую линейную диаграмму, и следуйте рекомендациям @asgallant в API графиков Google. Всегда показывайте значения точек данных с помощью arrayToDataTable. Как? для использования DataView.

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

Также это js, поэтому вам не нужно эхо-эха в php.

Так что раздел вашего блока кода будет выглядеть так:

Создание диаграмм с использованием API Google Chart с частичными данными

Я хочу создать график. В настоящее время мой график выглядит так

Данные действительны, поэтому график должен начинаться в 9 часов утра и увеличиваться по направлению к оси х до 16 часов.

когда пользователь генерирует график в 12 часов. Мой ожидаемый результат (Примечание: данные доступны только до 12 часов вечера.)

Я не мог найти способ генерировать выше частичный график. Любая идея?

Добавить комментарий