аукцион / donate / услуги / RSS / распечатать / вход 
Мой мир
Вконтакте
Одноклассники

[13 января 2015 | 14 января 2015 | 15 января 2015]

Рисование графиков с использованием Flot

Давно ещё возникла необходимость в создании простых графиков генерируемых из базы данных. А так как я везде пихаю морально и технически устаревший ASP, то мне не хочтелось задумываться о сложности создания программной основы для создания графиков. Тем более, что заставлять сервер генерировать эти графики я так же не хотел. Вывод был очевиден. Я решил использовать JavaScript для отображения графиков. В принципе в свободном доступе существует несколько десятков библиотек для создания графиков, но мне как-то больше приглянулась библиотека Flot.

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

График будет состоять из 10 точек. В качестве примера будут отображаться даты и количество участников проекта Красспас. Для начала нужно подключить библиотеку с фреймворком jQuery и основную библиотеку Flot.

<script src="jquery.js"></script>
<script src="jquery.flot.js"></script>

Далее пишем скрипт который инициирует массив для вывода графика и указывает id объекта в который необходимо вывести график:

<script type="text/javascript">
$(function() {
 var d1 = [[1, 24], [2, 21], [3, 25], [4, 25], [5,22], [6,31], [7,24], [8,26], [9,25], [10,26]]
 $.plot("#plot", [ d1 ]);
});
</script>

Далее создаём таблицу каскадных стилей для вывода графика в красивой обёртке. Вот пример который я ипользую для своих проектах:

.flot-container {
box-sizing: border-box;
width: 850px;
height: 450px;
padding: 20px 15px 15px 15px;
margin: 15px auto 30px auto;
border: 1px solid #ddd;
background: #fff;
background: linear-gradient(#f6f6f6 0, #fff 50px);
background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.flot-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
}

Всё это собирается воедино, а в нужном месте устанавливаем div которому присваеваем нужный id и класс.

<div class="flot-container"><div id="plot" class="flot-placeholder"></div<>/div>

Собственно на этом и всё.

Более подробно и с некоторыми расширениями можно ознакомиться на реальном примере на страничке: статистика активности участников Красспас. (закрыто с 2020 года)

Если есть вопросы — задавайте их в комментариях.

Тэги: программирование

Отредактировано:2020-09-10 20:14:23




4 комментария
Имя: RU0AOG 🖉
На страничке "статистика активности участников Красспас" хорошо бы проставить реальные даты в дополнение к номерам протоколов.
Комментарий оставлен: 2015-01-15 00:00:00


Имя: Orcinus Orca 🖉
RU0AOG, слишком широко получится. Делать листалку тоже не хочется ибо потеряется общая картина графика. Я всякие варианты прокручивал, это наиболее оптимальный с учётом того, что график будет увеличиваться на 4 точки ежемесячно. Как вариант, я думаю сделать градацию помесячно, а график рисовать каждый год отдельным цветом... Но это размышления о вероятных методах статистики...
Комментарий оставлен: 2015-01-15 00:00:00


Имя: RU0AOG 🖉
Во, хотя бы с разграничением по месяцам.
И месяцы пронумеровать.
Комментарий оставлен: 2015-01-15 00:00:00


Имя: Orcinus Orca 🖉
RU0AOG, Хотя как ни крути, в году 53 недели — это 53 точки. Сие слишком много для графика с названиями.

Даже если разбивать по месяцам, то имеется 4 трафика в которых могут участвовать как одни и те же так и разные люди, по этому их просуммировать не получится (будет средняя температура по больнице).

Надо думать что-то другое, например, среднее число присутствующих на трафике за месяц, но судя по графику оно будет усредняться довольно-таки сложно. Так, что думать надо, я только такой вариант придумал, следовать имеющейся на форуме нумерации.
Комментарий оставлен: 2015-01-15 00:00:00



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

Сообщайте мне о замеченных ошибках на: web@orcinus.ru. Все пожелания и советы будут учтены при дальнейшем проектировании сайта. Я готов сотрудничать со всеми желающими. В некоторых случаях, мнение автора может не совпадать с мнением автора! Phone: +7-902-924-70-49.

Top.Mail.Ru
Top.Mail.Ru LiveInternet Rambler's Top100 Яндекс.Метрика