Pull to refresh

Highcharts: Красивые, динамические чарты за 5 минут!

Website development *
image
Highcharts — библиотека для создания чартов написанная на JavaScript, позволяет легко добавлять интерактивные, анимированные графики на сайт или в веб-приложение. На данный момент чарты поддерживают большое количество диаграмм линейных, круговых, колоночных рассеивающих и многих других типов.

Чарты работают со всеми популярными браузерами, включая Safari на iPhone.
Минимальная версия для IE составляет 6+. Также браузеры поддерживающие Canvas элемент, и в некоторых случаях SVG для графического рендеринга.
Читать дальше →
Total votes 139: ↑132 and ↓7 +125
Views 60K
Comments 49

Визуализация статистических данных с помощью Highcharts

JavaScript *
Sandbox
В этой статье я хотел бы изложить собственный опыт построения наглядных и презентабельных графиков с помощью Highcharts на основе статистики ОС и дисковых массивов. Для многих современных ОС и дисковых массивов существуют механизмы, основанные на встроенном или дополнительном ПО, которые позволяют получать данные о работе подсистем ОС или массива (имеются в виду не трассировки, а статистические показатели, усредненные по заданному интервалу). Также можно собирать статистику счетчиков пакетов и ошибок на интерфейсах коммутаторов LAN и FC. Многие хотят визуализировать эти данные и использовать в отчетах или же самописной системе мониторинга.
image
Читать дальше →
Total votes 64: ↑54 and ↓10 +44
Views 27K
Comments 28

График «мастер-детали» средствами Highcharts и jQuery UI

JavaScript *
Sandbox
При наличии большого количества статистических данных, например таких, как котировки валют (и прочие данные, связанные с финансовой тематикой), потребление чего-либо (воды и т.д.), вообще говоря, любых данных, которые так или иначе можно представить в виде пары «дата — значение», бывает удобно представить их в графическом виде. Так как данные могут быть собраны за достаточно большой период времени, имеет смысле представлять их в виде пары графиков: «мастер»-график, на котором будут отображены все точки, и график «детали», где будут отображены точки за требуемый период. В данной статье я постараюсь рассказать, как построить график подобного типа при помощи стандартных средств библиотек HighCharts и jQuery UI.

Приведенное ниже решение, в принципе, является велосипедом, т.к. с появлением нового продукта от разработчиков HighCharts, который получил название HighStock, необходимость в реализации подобным способом отпадает. Впрочем, HighStock пока еще в состоянии beta.
Читать дальше →
Total votes 41: ↑37 and ↓4 +33
Views 6.7K
Comments 22

Highstock: мониторим Премию Рунета

JavaScript *
Долгое время в своих проектах использовал Flash-графики, вместо обычных картинок. Они и красивее и более функциональны, да и серверу не нужно напрягаться для генерации картинок. Но в связи с тем, что некоторые фирмы не очень дружат с Flash, пришлось поискать замену без использования Flash.

До этого использовал AmCharts, первым делом глянул на их сайт, они уже выпустили JS версию своих графиков, но как-то не понравилось, по ощущениям — сыровато еще. После недолгого гугления был найден Highstock, от авторов Highcharts JS. Отличается в первую очередь возможностью выводить графики, привязанные к времени, с большим количеством точек, масштабированием, удобной навигацией. Да и чисто внешне понравился больше AmCharts.
Читать дальше →
Total votes 46: ↑41 and ↓5 +36
Views 7.7K
Comments 12

Риалтайм дашборд

Perl *

Однажды, сидя поздним вечером на работе, захотелось сделать простенький шустренький дашборд, который бы отрисовывал графики ошибок или других варнингов из логов Apache или Ngnix. Термин Realtime слегка льстит, в действительности мы видим обновление на графике каждые 3 секунды. Такого плана дашборд, очень полезен особенно когда идет выкатка новой версии в бой, сидишь и смотришь как она тихонечко расползается по серверам, изменяя направления кривых на графике.
Читать дальше →
Total votes 44: ↑40 and ↓4 +36
Views 5.4K
Comments 41

Аномальное голосование на сайте «Российская общественная инициатива» (РОИ)

Data Mining *
По результатам мониторинга голосования на сайте «Российская общественная инициатива» (РОИ), обнаружились интересные подробности. Складывается ощущение, что кто-то очень не хочет, чтобы инициатива известного оппозиционера стала первой набравшей 100 тысяч голосов. А поскольку пиарить свою инициативу, как это делает Алексей Н. это сильно хлопотно, то на арену выходят другие методы, привычные в оффлайн голосованиях.

Я немного проапгрейдил график, чтобы выводилось не только абсолютные цифры, но и относительные. Добавилось 2 типа – относительный и прирост. Первый показывает изменения графика относительно начала выбранного отрезка времени, а второй – прирост голосов в виде столбчатой диаграммы (данные группируются в зависимости от масштаба графика).
Читать дальше →
Total votes 306: ↑282 and ↓24 +258
Views 120K
Comments 386

Использование javascript в Vaadin 7 или как я сэкономил $490 на графиках (часть 1)

Dom24x7 corporate blog Website development *Java *
Translation
Tutorial
В этой статье я расскажу вам как внедрял красивые графики в наш сервис учета коммунальных услуг Dom24x7 и с какими проблемами и неудобствами пришлось столкнуться.

Для Vaadin 7 имеется прекрасное официальное дополнение для работы с графиками, но проблема в том, что оно не бесплатное и стоит почти $500! Таких денег мне тратить не хотелось, и я решил поискать альтернативу из бесплатного, но, к сожалению, все что я нашел меня совершенно не удовлетворяло по качеству и тогда я вернул свое внимание на официальное дополнение для работы с графиками и решил изучить его повнимательнее.

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

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

Определившись с библиотекой осталось решить вопрос, как же все таки ее подключить к своему проекту?
Статья состоит из двух частей. Первая часть это перевод статьи о том как подключать javascript библиотеки к vaadin проектам, а вторая часть расскажет о там, как я, используя полученные знания, написал библиотеку для отображения графиков.
Итак…
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Views 11K
Comments 5

Простой способ пагинации в Highcharts

JavaScript *

Недавно при создании страницы статистики на сайте, мне потребовалось в очередном графике вывести 450 позиций. В виду того, что данный график был на странице не один, да и выглядел бы очень громоздко на странице было принято решение, добавить нечто вроде разбиения данных на страницы. Для графиков в проекте используется библиотека Highcrarts. Покопавшись в документации была найдена только пагинация для легенды, но не для графиков.
Читать дальше →
Total votes 17: ↑9 and ↓8 +1
Views 6.2K
Comments 3

Как сделать Online-логгирование с нуля

Data visualization *
Описанное ниже — это конструкция выходного дня. От идеи до реализации была затрачена пара вечеров. В описании представлен необходимый минимум для реализации системы сбора информации, с доступом к последней в режиме Online.
image
Читать дальше →
Total votes 15: ↑12 and ↓3 +9
Views 16K
Comments 36

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

1cloud.ru corporate blog


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

Сегодня мы расскажем о том, как создавали систему, позволяющую клиентам хостинга 1cloud в режиме реального времени без лишних проблем видеть состояние своих серверов.
Читать дальше →
Total votes 14: ↑10 and ↓4 +6
Views 12K
Comments 3

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

Data Mining *Amazon Web Services *API *
Tutorial
В прошлой статье был рассмотрен пример настройки автоматической выгрузки данных из Яндекс Метрики. Это облегчает регулярную выгрузку, но способ получается полуавтоматическим: надо запускать скрипт, копировать результаты выгрузки к себе и дальше заниматься их оформлением. Посмотрим как можно сделать процесс полностью автоматическим. Для примера будем использовать выгрузку данных их рекламной системы Adfox.

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

В этой статье показано как сделать скрипт, который выгружает CTR всех баннеров, которые доступны аккаунту (сделать это вручную нереально по времени). А также как отобразить это на графике в виде простой HTML-страницы. Т. е. мы последовательно просмотрим все кампании и флайты, возьмем показы и клики по всем баннерам и нарисуем график CTR. Как и в прошлой статье работать будем на инстансах Amazon Web Services, чтобы было универсально и главное бесплатно. Выгрузка данных на PHP, графики рисуем в Highcharts. В коде реализован самый простой способ выгрузки и обработки данных без каких-либо улучшений. В итоге получим ежедневно обновляемую за вчерашний день страницу вида:

image
Читать дальше →
Total votes 7: ↑6 and ↓1 +5
Views 5.6K
Comments 0

Система трекинга загрузки игрового клиента

Plarium corporate blog Programming *.NET *Game development *C# *


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

Диагностирование ошибок, возникающих во время загрузки игрового клиента, в столь разнообразных условиях становится совсем не тривиальной задачей. И даже применение таких передовых решений, как Google Analytics, не позволяет в полном объеме решить проблему. Именно поэтому нам пришлось спроектировать и написать свою систему трекинга загрузки игрового клиента.
Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Views 8.6K
Comments 0

Система трекинга загрузки игрового клиента. Часть 2

Plarium corporate blog Programming *.NET *Game development *C# *
В этой статье мы поговорим о сервисе GeoIP, который определяет геоданные по IP-адресу запроса, веб-сокетах, реализации polling сервера, AngularJS, Highcharts и проведем краткий анализ системы трекинга загрузки игрового клиента.


Читать дальше →
Total votes 18: ↑17 and ↓1 +16
Views 7.2K
Comments 3

Используем highcharts.js для создания графиков на стороне сервера

.NET *C# *Microsoft Azure *
Tutorial
highcharts-on-a-server
Сегодня мы поговорим об использовании highcharts.js графиков на стороне сервера. Весь код будем писать на С#, обойдемся совсем без javascript. В результате получим файл с графиком, который можно будет сохранить на диск или например приложить к письму.

Беглый поиск хороших бесплатных .net библиотек для создания графиков не увенчался успехом. Лучшей из всех найденных библиотек была ms-chart, но судя по отсутствию обновлений и хорошей документации сама Microsoft ее давно забросила.

Выбор пал на highcharts.js — очень гибкая библиотека для построения графиков, которая широко применяется на фронтенде.
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Views 13K
Comments 10

8 JavaScript библиотек для визуализации данных в виде интерактивных карт

JavaScript *Big Data *Data visualization *
Sandbox
Визуализация данных стала неотъемлемой частью жизни практически каждого веб-разработчика. Если построение графиков, диаграмм, карт и дашбордов до сих пор никогда не были вашей головной болью, просто немного подождите: наверняка и вы скоро вступите в наш «клуб».

Данная статья дает общее, но вовлеченное представление о восьми самых интересных, на мой взгляд, JavaScript-библиотеках для построения интерактивных геовизуализаций. В целом, таких решений сейчас много, и выбрать оптимальное под тот или иной конкретный проект – задача порой непростая как минимум по времени. Этой публикацией я попытаюсь хотя бы немного упростить жизнь тем, кто только начинает разбираться в данной теме. Кстати, это слегка модифицированный перевод моей недавней статьи на Onextrapixel (оригинал на английском).

Заглавная картинка: визуализация данных с помощью интерактивных карт
Читать дальше →
Total votes 28: ↑28 and ↓0 +28
Views 34K
Comments 14

Нахождение числа комиссий, «рисовавших» целые значения явки на президентских выборах РФ 2018 года

Data Mining *Big Data *Open data *Data visualization *
Графики с необычными пиками мы теперь видим после каждых федеральных выборов. Впервые в массы они вышли после выборов в 2011 году, когда люди и увидели фальсификации, и ознакомились в целом с анализом данных по выборам и с проблемой целочисленного деления в частности.

У распределений даже стали появляться свои имена. Это и «борода Чурова» для выборов 2011, и «пик Володина» для знаменитых 62.2% в Саратове. Поскольку до сих пор даже на хабре появляются статьи, не знакомые с решением проблемы целочисленного деления и не согласные "добавлять мусор" небольшой случайной добавки в данные, давайте посмотрим на результаты совсем иначе. Мы зайдём к построению графиков с противоположной стороны, где проблемы целочисленного деления вообще нет. И тоже увидим пики на целых значениях.


Читать дальше →
Total votes 104: ↑91 and ↓13 +78
Views 40K
Comments 338

10 лучших JavaScript библиотек для визуализации данных на графиках и диаграммах

Website development *JavaScript *Programming *Big Data *Data visualization *
Translation
Есть в графиках что-то магическое. Изгиб кривой мгновенно раскрывает всю ситуацию — историю развития эпидемии, паники или периода процветания. Эта линия просвещает, пробуждает воображение, убеждает.
Генри. Д. Хаббард
Объемы данных, с которыми нужно работать, постоянно увеличиваются. И чем больше информации, тем сложнее ее обрабатывать. Вот почему сейчас стала особенно популярна тема визуализации данных — в виде графиков, диаграмм, дашбордов, желательно интерактивных. Визуальное представление данных позволяет нам, людям, тратить меньше времени и сил на их просмотр, анализ и осмысление, а также на принятие правильных, информированных решений на основе этого.

Вряд ли кто-то станет отрицать, что в современном HTML5 вебе JavaScript — самая универсальная и простая технология для визуализации данных. Так что, если вы занимаетесь фронтенд-разработкой, то вы, скорее всего, либо уже имели дело с созданием JS чартов, либо столкнетесь с этим в (скором) будущем.

Существует множество JavaScript библиотек для построения графиков и диаграмм, каждая из которых (как и любые другие инструменты) имеет свои плюсы и минусы. Чтобы облегчить вам жизнь, я решил рассказать о тех из них, которые нравятся мне больше всего. Я считаю, десять следующих библиотек — это лучшие JS библиотеки для создания графиков, и они действительно способны помочь решить практически любую задачу по визуализации данных. Давайте вместе пройдемся по списку и убедимся, что они вам известны хотя бы базово и вы не упустили из виду какую-нибудь хорошую библиотеку, которая может оказаться полезной в текущих или будущих больших проектах.

Заглавная картинка: визуализация данных на графиках и диаграммах

Что ж, приступим: вот лучшие JS библиотеки для визуализации данных!
Читать дальше →
Total votes 31: ↑27 and ↓4 +23
Views 91K
Comments 29