Адаптивные графики в реальном времени в WordPress: плагины и построение графиков

[sourcecode language = ”php”]

<? PHP
/ *
Описание: этот код предназначен для вызова с помощью шорткода WordPress.
Он обращается к базе данных и отображает данные в флот-диаграмме.
Автор: @jphornor и @tarahornor
Лицензия: GPL3
* /

// Вот наша функция!
function pushups_results () {

/ *
Получить соединение БД. Если вы не создали connect_to_db.php
файл, просто добавьте свою информацию о подключении к базе данных здесь
* /
include («connect_to_db.php»);
connect_to_db ();
/ *
Это получает нас текущий зарегистрированный пользователь и назначает имя пользователя
к переменной wpuser, которая используется в основном запросе
* /
get_currentuserinfo ();
$ current_user = wp_get_current_user ();
$ wpuser = $ current_user-> user_login;

// Большой тест! Если пользователь не вошел в систему, он НИЧЕГО не получает!
если (! is_user_logged_in ())
{
echo ‘<a href=»‘. wp_login_url().'»> Войдите </a>, чтобы увидеть результаты отжиманий!
<p> <a href=»‘. home_url().’/wp-register.php»> Зарегистрируйтесь </a>, если вы этого еще не сделали. </ p> ‘;

}
еще
{

// запрос
$ sql = mysql_query («выберите * из отжиманий, где` pushups`.

/ *
Мин и Макс запросов. Как правило, не нужно производить
наши собственные значения Min и Max для Flot, наш процесс ниже создает данные
набор, который заканчивается запятой, которую Flot интерпретирует как ноль.
* /
$ min = mysql_query («выберите pushups_count ОТ ОТКАЛКИ ORDER BY pushups_count ASC предел 1»);
$ max = mysql_query («выберите pushups_count ОТ отжиманий ORDER BY pushups_count DESC предел 1»);

// Нам нужно вычислить минимальную точку на графике
while ($ row = mysql_fetch_array ($ min))
{
$ min_count = $ row [‘pushups_count’];
}
$ min_count = $ min_count * .9; // Это дает нам передышку на графике

// Давайте вычислим максимальную точку на графике
while ($ row = mysql_fetch_array ($ max))
{
$ max_count = $ row [‘pushups_count’];
}
$ max_count = $ max_count * 1.1; // Это также дает нам передышку на графике

/ *
Теперь мы генерируем наши JavaScript и HTML на странице.
Это не мой любимый способ сделать это, но он выполняет свою работу.
* /
echo ‘<div id = «flot-container»>’; // Настройка ширины и высоты для вашей установки WP в файле layout.css
echo ‘<h1> Результаты Pushup для’. $ wpuser. </ H1> ‘;
echo ‘<script language = «javascript» type = «text / javascript» src = «‘. plugins_url ($ path). ‘/flot-for-wp/flot/jquery.js»> </ script>
<script language = «javascript» type = «text / javascript» src = «‘. plugins_url ($ path).’ /flot-for-wp/flot/jquery.flot.js»> </ script>
<script language = «javascript» type = «text / javascript» src = «‘. plugins_url ($ path).’ /flot-for-wp/flot/jquery.flot.resize.js»> </ script>
<script language = «javascript» type = «text / javascript» src = «‘. plugins_url ($ path).’ /flot-for-wp/flot/excanvas.min.js»> </ script>
<link href = «‘. plugins_url ($ path).’ /flot-for-wp/flot/layout.css» rel = «stylesheet» type = «text / css»>
<div id = «заполнитель» style = «ширина: 95%; высота: 85%; максимальная ширина: 100%; поле: авто;»> </ div>
«;
эхо
<script language = «javascript» type = «text / javascript» id = «source»>

JQuery (документ) .ready (функция ($) {
var d1 = [
{label: «Pushups Tracker для ‘. $ wpuser.'»,
данные: [‘;
while ($ row = mysql_fetch_array ($ sql))
{
echo ‘[‘. $ row [‘pushups_date’]. ‘,’. $ row [‘pushups_count’]. ‘],’;
}
echo ‘]}];
var placeholder = $ («# placeholder»);
var plot = $ .plot (заполнитель, d1,
{
Xaxis:
{mode: «time»},
точки:
{показать: правда, символ: «круг»},
линии:
{show: true},
легенда:
{show: false},
YAxis:
{min: ‘. $ min_count. ‘, max:’. $ max_count. ‘}
});
});
</ Скрипт> </ DIV> ‘;
}
}
// шорткод в сообщении Pushups Result
add_shortcode (‘pushups_results_sc’, ‘pushups_results’);
mysql_close ();

?>

[/исходный код]

Я знаю, что это тонна информации, и я сделал все возможное, чтобы добавлять комментарии. Еще раз, этот файл с именем pushups_results.php находится в вашей папке wp-content / plugins / flot-for-wp / flot. Я сожалею о том, как сжатый код выглядит здесь, но если вы загрузите мои файлы ресурсов, вы сможете увидеть содержимое в гораздо более организованном формате.

резюмировать

Хотя это много кода, найдите время, чтобы просмотреть комментарии. Многое происходит, и если вы не будете следить за тем, как Flot интерпретирует данные, вы будете бороться с использованием своих собственных данных.

В этой части мы рассмотрели некоторые довольно плотные процессы. Я пытался облегчить вам задачу, позволяя копировать и вставлять, но не ленитесь! Вы не можете просто добавить этот плагин и получить магически красивые графики. Так что найдите время, чтобы просмотреть этот код.

В качестве краткого резюме, в этой части серии мы рассмотрели:

• Возьмите плагин Flot (для тех, кто только что прыгнул в сериал)
• Создать сообщение для отображения результатов
• Добавьте код Flot на страницу, которая извлекает наши данные и отображает их правильно.

Хотите верьте, хотите нет, но вы на самом деле сделали это! Если вы обновите страницу результатов отжиманий, вы должны увидеть график!

В следующей части этой серии я расскажу о некоторых очень подробных обсуждениях того, как работать с PHP и MySQL в отношении Flot.

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