displaying graphs control

Сравнение различных элементов отображения

1. D3 (Data-Driven Documents)

Плюсы:

• Большое количество способов визуального представления данных
• Доступ к источникам данных в различных форматах (в том числе XML)
• Возможность форматирования данных
• Возможность интерполяции и сглаживания графиков
• Хорошо написанная документация и большое количество примеров использования
• Является open source проектом
• Прозрачность связи данных и представления
• Интерактивность и гибкость в представлении данных

Минусы:

• Для изучения d3.js желательно владеть достаточно большим количеством технологий (HTML, CSS, JS, SVG, DOM)
• Может неправильно работать в некоторых старых браузерах (проблема решается применением плагинов, таких как aight plugin)
• Информации на русском языке для глубокого изучения очень мало

https://github.com/mbostock/d3/wiki/Gallery - примеры использования d3.js

2. Google Chart

Плюсы:

• Множество вариантов представления данных
• Является open source проектом
• Существование множества настроек конфигурации для видоизменения графиков
• Кроссбраузерная совместимость и кроссплатформенная портируемость на IPhone, IPad и Android (графики формируюся с помощью HTML5/SVG). Поддержка старых браузеров
• Простота программного интерфейса, не требуется установка на сервере специальных библиотек для построения графика. Быстрая постройка графиков при отстуствии излишней нагрузки на сервер

Минусы:

• Спектр возможностей не так широк как у d3.js
• отсутствие подробной документации на русском языке
• Отсутствие интерактивного отображения данных (Сервер в ответ на запрос выдает PNG с нарисованным графиком) https://developers.google.com/chart/interactive/docs/gallery - примеры использования google chart

3. Highcharts JS

Плюсы:

• Большое количество анимации различного типа. Возможность эффектного представления данных
• Существует множество предварительно созданных диаграм
• Совместим с браузерами старого типа
• Работа на чистом JS, не требуются дополнительные плагины

Минусы:

• Бесплатен только для персонального пользования. Для коммерческого применения необходимо приобрести лицензию
• Нет стандартных решений добавления дополнительной информации к скачиваемым графикам
• Длинные подписи к шкалам могут перекрывать друг друга
• Отсутсвие гибкости в построение графиков (преимущество d3.js)
• Не всегда корректно отображает данные в разных браузерах. Возникают проблемы при передаче большого массива объектов

http://www.highcharts.com/demo - примеры использования Highcharts JS

4. Chartlist.js

Плюсы:

• Красивые отзывчивые графики. Эффектная анимация графиков
• Простота использования (Использование готовых библиотек)
• Минимальная нагрузка на сервер
• Минимальные затраты на трафик. Передать нужно только саму библиотеку (обычно размер не превышает 100 кБ (без сжатия)) и данные для построения графика
• Является open source проектом

Минусы:

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

http://www.jscharts.com/examples - примеры использования jscharts

5. FusionCharts

Плюсы:

• Большой выбор вариантов построения графиков (не является плюсом относительно d3.js)
• Простота использования

Минусы

• Создан на платформе adobe flash (Но есть возможность интеграции с AJAX/JavaScript )
• Необходимо приобрести лицензию, чтобы избавиться от водяного знака на графиках

http://www.flotcharts.org/flot/examples/ - примеры использования FusionCharts

6. MilkChart

Плюсы:

• Простота использования
• Поддерживается браузерами

Минусы:

• Более примитивный относительно других контролов
• Возникают проблемы при просмотре в IE

http://mootools.net/forge/p/milkchart - примеры использования MilkChart

Вывод

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

Мы остановили наш выбор на библиотеке d3.js. Работа с ней будет более сложной задачей, чем с такими библиотеками как Google Chart, Highcharts JS, MilkChart, и т. д., однако эти сложности с лихвой компенсируются возможностями, которые она нам предлагает. Кроме того необходимость в углубленном изучении различных технологий позволит сделать систему более гибкой, удовлетворяющей самым разнообразным потребностям пользователя.