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

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

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

Давно ещё возникла необходимость в создании простых графиков генерируемых из базы данных. А так как я везде пихаю морально и технически устаревший 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


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

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

Рейтинг@Mail.ru LiveInternet Rambler's Top100 Яндекс.Метрика