Визуализация с Google Chart Tools API
Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных. С помощью него можно относительно легко строить графики и диаграммы на сайте.
Функционал Google Chart Tools API включает в себя:
Карта
Сделаем визуализацию данных с помощью карты, раскрашенной в соответствии с внесенными данными. Для начала подключаем файлы, loader.js обязателен.
Выбираем тип визуализации и вставляем его в следующий код, в нашем случае geochart.
Вместо geochart можно поместить:
Orgchart – Дерево.
Map – Карта
Annotationchart – График.
Corechart – Диаграмма.
Gauge – Спидометр.
И многое другое.
Создаем функцию drawChart(). Указываем параметры визуализации, в нашем случае карты. В массив нужно поместить своеобразную «таблицу» данных: в одной ячейке определена страна, в другой — данные, которые проявятся при hover эффекте, число соответствует яркости государства на карте.
Указываем контейнер, в который будем помещать карту.
По такому шаболну строятся все эффекты визуализации GCT API.
Диаграмма
Теперь создадим простую диаграмму.
Чтобы сделать диаграмму 3D, добавляем параметр is3D:true.
Можно «вырезать» центр.
Или «вытащить» кусочки диаграммы на расстояние.
Ступенчатая диаграмма создается аналогичным образом, но в настройки нужно добавить isStacked: true.
Дерево
Теперь создадим «дерево», где слова визуально соединяются между собой.
Подключаем элемент wordtree.
В настройках выводим слово, от которого будет строиться дерево. Строка format имеет большое значение: если указать implicit, то дерево будет строиться автоматически от указанного слова. Значение explicit позволяет строить дерево в ручном режиме.
От слова «коты» будет строиться дерево, одинаковые слова будут объединяться в одно.
Датчик
И, в завершение, хочется показать работу датчиков – спидометров.
В массиве указываем название датчика и позицию стрелки.
Размер блока с датчиками, разрисовка полей датчика красным и желтым цветом.
Позиция minorTicks:5 уменьшает цену деления датчика.
Пусть при нажатии на кнопку, датчики обновляются.
Простые графики с Google Chart Tools
Инструменты Google Chart Tools позволяют легко добавлять диаграммы на любую веб-страницу. Диаграммы могут быть статическими или интерактивными, и в этом уроке мы узнаем, как их использовать.
Статические и интерактивные графики
Диаграммы изображений довольно просты в использовании, однако интерактивные диаграммы гораздо более гибкие, поскольку они могут инициировать события, которые мы можем использовать для взаимодействия с другими элементами на странице.
Во-первых, Супер-легкий путь
Да, есть супер-простой способ добавить диаграмму на вашу страницу — так же просто, как написать URL-адрес, например так:
если вы скопируете и вставите этот URL в браузер, вы увидите следующее:
Вы можете разместить изображение в любом месте вашей страницы, используя URL-адрес в качестве атрибута src тега изображения:
Это API Google Charts. Запрос отправляется в виде URL-адресов GET или POST, а сервер диаграмм Google возвращает изображение PNG в ответ. Тип диаграммы, данных и параметров указываются в строке запроса URL-адреса. API определяет, как это сделать. Давайте рассмотрим различные варианты.
http://chart.apis.google.com/chart?
Это базовый URL; мы будем использовать его для всех запросов графика изображения. Остальные параметры в форме имя = значение, разделенные &.
Обязательные параметры
Есть только три обязательных параметра: cht, chs и chd. Остальные не являются обязательными.
CHT = р3
CHS = 450×200
Это размер диаграммы в пикселях (ширина х высота).
CHD = т: 2,4,3,1
Это данные для отображения на графике. Первая буква ( t ) обозначает формат данных. В этом случае мы используем основной текстовый формат, который представляет собой список значений, разделенных запятыми.
Необязательные параметры
Каждый тип диаграммы имеет несколько дополнительных параметров для настройки некоторых аспектов вашего графика: заголовок, метки, типы шрифтов, цвета, градиенты и т. Д. Вот что мы включили:
CHL = телефоны | Компьютеры | Услуги | Другое
Ярлыки диаграммы для каждого кусочка пирога.
CHTT = Компания% 20Sales
CHCO = FF0000
Цвет диаграммы в шестнадцатеричном формате rrggbb.
Если вы укажете один единственный цвет, срезы будут иметь разные градации. Также можно указать градиент с двумя цветами (chco = ff0000,00ff00) или цветом для каждого среза (chco = ff0000 | 3355aa | 8322c2 | 112233).
Это для графических карт. Там не так много! Доступно множество различных типов графиков, и, если вы поиграете с параметрами, вы сможете получить действительно хорошие результаты. Google Live Chart Playground — отличный инструмент для этого. Вы играете с параметрами и видите изменения в сгенерированном изображении — простой способ точной настройки URL для вашего графика!
Интерактивные диаграммы
Существует галерея готовых визуализаций (графиков), которые вы можете использовать. Вы также можете создавать и делиться своим собственным графиком, но визуализация в галерее, вероятно, покроет большинство ваших потребностей в отображении данных.
Уровень интерактивности зависит от конкретной визуализации, которую вы используете. Обычно график реагирует определенным образом на нажатие (показывая подсказку или анимацию), но действительно мощная функция заключается в том, что они могут инициировать события, и вы можете регистрировать обратные вызовы для выполнения любых действий, связанных с этим событием. Примерами событий могут быть выбор панели или кругового фрагмента, mouseOver, mouseOut и т. Д.
Мы будем использовать локальные данные для подачи визуализаций в наших примерах, но вы можете получить свои данные любым другим способом. Распространенным вариантом будет получение данных из базы данных с использованием AJAX. Вы даже можете использовать API визуализации ; он также определяет способ запрашивать и предлагать (для серверов) данные в формате, который можно сразу использовать в любой визуализации, но мы не будем здесь это рассматривать.
Форматирование данных
Неважно, как мы получаем наши данные, но все визуализации должны получать их в объекте DataTable. Это в основном таблица со строками и столбцами. Каждый столбец определен с определенным типом данных (а также идентификатором и меткой, которые являются необязательными).
Если мы хотим отобразить прибыль нашей компании в 2009 году в виде столбчатой диаграммы, мы должны подготовить данные следующим образом:
| Кварталы 2009 | прибыль |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Два столбца: первый (с типом ‘строка’ ) — это метка для каждого столбца на диаграмме, а второй (с типом ‘номер’ ) — это значение для этого бара. У нас есть четыре строки, что означает четыре столбца для отображения.
Как мы помещаем это в объект DataTable? Это код для этого — каждая строка объясняется позже:
Работа с графиками и диаграммами 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, но мне он показался еще более мудреным. Когда-нибудь доберусь и до него, но как говорится в одном оскароносном фильме: «Не сейчас. Не сейчас…»
Офлайн-конверсия Яндекс.Метрики. Теряются выполнения целей в Метрике
Библиотека для построения диаграмм средствами Google Chart API
Введение
Google Chart позволяет строить 11 типов различных диаграмм. Вот они:
Сразу уточню, что массивных выкладок кода библиотеки в статье не будет, вместо этого будет приложена справка, созданная с помощью 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. Простой пример построения линейного графика
Напомню, что справку о методах классов можно будет найти в приложенной справке, здесь будут примеры использования.
Усложним график, добавим ещё одну линию, оси и сетку:
Рисунок 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. Кольцевая диаграмма
2.4 Лепестковый график
Класс CRadarChart строит лепестковый график. Никаких отличий от класса CLineXYChart не имеет. Все его методы доступны и в CRadarChart:
Рисунок 9. Лепестковая диаграмма
2.5 Свечной график
Класс CCandleChart строит свечной график. Свечи добавляются методом AddCandles():
Рисунок 10. Свечной график
Маркеры, легенда и метки недоступны для этого типа графиков.
2.6 Формула
Класс CFormulaChart позволяет создать формулу. Формула передаётся в виде строки на языке TeX в метод SetFormulaString():
Рисунок 11. Формула
Также можно установить заливку методом SetFill(). Никакие дополнительные возможности не поддерживаются.
2.7 Граф
Класс CGraphChart строит графы. Методы AddNode() и AddEdge() добавляют узлы и рёбра на граф:
Метод SetEngine() устанавливает специфический тип графического двигателя, используемого при построении графа. С этим можете поэкспериментировать сами. Методы DeleteNode() и DeleteEdge() удаляют узлы и рёбра с графа.
2.8 Диаграмма Венна
Класс CVennChart строит диаграмму Венна.
Метод SetCircleSizes() установит размеры множеств, SetCircleColors() их цвета, SetVennLegend() их подписи, а SetIntersections() размеры пересечений:
Рисунок 11. Диаграмма Венна
2.9 QR-код
Класс CQRCode позволяет создать QR-код:
Метод SetData() установит данные, на основе которых будет создан код. Методы SetErrCorrection() и SetEncoding() установят коррекции ошибка при кодировании и кодировку.
2.10 Карта
Класс CMapChart создаёт карту мира или континента с возможностью выделить необходимые страны:
Рисунок 11. Карта Африки
Коды нужных стран передаются в метод SetCountries() в формате ISO 3166-1-alpha-2. SetZoomArea() установит континент карты, а SetColors() цвета стран.
2.11 Пузырьковый график
Здесь для задания данных используется метод AddLineScatter(), в который нужно передать координаты точек и их размеры:
Рисунок 11. Пузырьковый график
Заключение
Надеюсь, дорогой читатель, данная библиотека несколько облегчит Вам нелёгкую трейдерскую жизнь. Хотелось бы добавить, что использование ООП значительно облегчает написание больших проектов, делает их более гибкими и удобными при использовании.
Using Google Charts
Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types.
The most common way to use Google Charts is with simple JavaScript that you embed in your web page. You load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a
That’s all you need to get started.
Charts are exposed as JavaScript classes, and Google Charts provides many chart types for you to use. The default appearance will usually be all you need, and you can always customize a chart to fit the look and feel of your website. Charts are highly interactive and expose events that let you connect them to create complex dashboards or other experiences integrated with your webpage. Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads, and Android. Your users will never have to mess with plugins or any software. If they have a web browser, they can see your charts.
All chart types are populated with data using the DataTable class, making it easy to switch between chart types as you experiment to find the ideal appearance. The DataTable provides methods for sorting, modifying, and filtering data, and can be populated directly from your web page, a database, or any data provider supporting the Chart Tools Datasource protocol. (That protocol includes a SQL-like query language and is implemented by Google Spreadsheets, Google Fusion Tables and third party data providers such as SalesForce. You can even implement the protocol on your own website and become a data provider for other services.)
Ready to create your first chart? Visit the quickstart.
Our tools are constantly evolving to better address your needs; we depend on your feedback to help us prioritize which features to include. Join our discussion group.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
