Сегодня я продолжу рассказ о создании и использовании графиков на web ресурсах. В предыдущих статьях речь шла об использовании для этих целей flash библиотек (Графики своими руками – Open Flash Chart 2) и внешних сервисов (Графики от Google и PHP библиотеки для работы с ними). В принципе, на этом можно было бы остановиться, но судя по реакции в комментариях, я пропустил ещё один очень интересный вариант создания графиков. Речь, конечно, об использовании JavaScript. Рассмотрим достоинства и недостатки этого варианта. Достоинства. 1) Минимальные затраты на трафик. Передать нужно только саму библиотеку (обычно размер не превышает 100 кБ (без сжатия)) и данные для построения графика. 2) Минимальная нагрузка на сервер. Отрисовка графика выполняется браузером. Сервер должен только отправить массив с точками, по которым будет построен график. 3) Простота использования. Достигается за счет готовых библиотек. Недостатки. 1) Возможны проблемы совместимости с некоторыми браузерами. С этими проблемами знакомы все web мастера.
Но, должен отметить, что разработчики библиотек неплохо с ними справляются. 2) Дополнительная нагрузка на компьютер пользователя. Достаточно спорный момент. Вряд ли обычный пользователь заметит время, за которое будет создан один простой график. Но если графиков десятки и для их создания используются тысячи точек, то время создания такой страницы может существенно возрасти. В общем, тут многое зависит от вас. Теперь перейдем к практической части. На сегодняшний день JavaScript библиотек для создания графиков довольно много. Но принципы их использования практически одинаковые, поэтому пример приведу я только для одной. Библиотека называется Flot. Для начала определимся с задачей. Допустим, у нас есть PHP скрипт, который получает данные, которые нужно показать на графике. И HTML страница на которой мы должны разместить график. Начнем с разметки страницы.