Диаграммы и графики - самый приятный способ донести мысль, выраженную численно (чаще всего в таблицах). Все прекрасно знают, что пицца - это круговая диаграмма оставшегося количества пиццы. :)
Мы же сейчас рассмотрим три способа добавления графиков и диаграмм на ваш сайт.
Способ 1: статические диаграммы
Если у вас диаграмма не изменяется или изменяется очень-очень редко, то самый удобный способ создать диаграмму - сделать её в формате Scalable Vector Graphics (SVG), который отображается во всех браузерах. Преимущество этого формата в том, что он масштабируется без размытия (четкие линии, края), и занимает мало места (так как по сути это текст).
Создать SVG-диаграмму вам помогут дизайнеры или различные сервисы в интернете, которых по запросу в поисковиках вы сможете найти не один и не два... десятка. Если у вас есть хотя бы минимальные навыки графического редактирования, вы можете воспользоваться бесплатным редактором Vectr. Я вот воспользовался :)
В этом случае выбор библиотек чрезвычайно широк! Моя личная рекомендация, особенно подходящая для визуализации очень больших массивов информации, - D3.js.
Библиотека сдобрена длинным рядом примеров, наряду с их исходным кодом.
Если же у вас нет навыков программирования, но вы можете вставить JS-диаграмму через панель редактирования контента на вашем сайте, вы можете воспользоваться различными сервисами генерации диаграмм, но, к сожалению, они в большинстве своём платные. У Google-сервиса Charts ранее был онлайн-редактор диаграмм, но они его закрыли :(
Этот способ полезен в том случае, если страницу с одним и тем же графиком просматривает большое количество людей, или вам надо отправить график картинкой в письме, или, например как у меня - личный бот присылает мне столбиковую диаграмму по поставленным и выполненным задачам. В этом случае можно рекомендовать пусть и старую, но надежную и небольшую библиотеку PHPlot. Ей есть альтернативы, конечно, но при выборе необходимо руководствоваться конечными требованиями к решению, а поскольку у меня в блоге их нет - у меня есть личные предпочтения :)
Код очень простой, даже комментировать не нужно :) http://pastebin.com/SrkAZ4qS
ЗаключениеВ заключение особо и сказать нечего. Пользуйтесь диаграммами - это красиво!