Как создать диаграммы и графики в WordPress с Visualizer

Наглядные пособия в виде столбцов, диаграмм и графиков помогут сделать вашу презентацию более привлекательной. Ранее мы уже рассказывали о том, как добавлять PDF файлы, таблицы, видео и аудио файлы. Однако, ничто не будет выглядет так впечатляюще, как красочные графики, кривые роста или сравнительные столбцы. В этой статье мы покажем вам как легко добавить столбцы и диаграммы в WordPress без единой строчки кода.

Проблема с диаграммами и графиками в WordPress

Существует множество плагинов WordPress, позволяющих добавлять столбиковые диаграммы, круговые диаграммы и графики на ваш сайт. Однако, наиболее частыми жалобами от пользователей является то, что они слишком сложны в пользовании. Некоторые из этих плагинов даже предлагают пользователям вводить данные внутри шорткода в крайне сложном формате.

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

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

Как правильно добавить диаграммы и графики в WordPress

Первым делом вам необходимо установить и активировать бесплатный плагин Visualizer. После активации просто создайте новую запись или отредактируйте существующую. На странице редактор записи кликните на кнопку Добавить медиафайл. Вы заметите новый элемент меню в вашем медиазагрузчике — Visualizations. Клик по ней выведет вам библиотеку Visualizations. Однако, в виду того, что вы только что установили плагин, раздел пока будет пустовать. Кликаем на Create New для создания нового графика.

На следующем экране плагин попросит вас выбрать тип графика, диаграммы которую нужно создать. Выберите тип диаграммы, затем нажмите Next.

На следующей странице вас попросят кликнуть на Upload CSV File справа, где вы увидите две опции. Первая опция = для загрузки CSV файла и с вашего компьютера, а вторая — публикация диаграмм из сети с помощью таблицы Google Drive. Мы подробно остановимся на каждой из них.

Добавление диаграмм в WordPress из таблицы Google Drive

В отличие от некоторых других плагинов WordPress, которые используют шорткоды для ввода данных для графиков, Visualizer позволяет вам опубликовать вашу диаграмму с данными из таблиц Google или вручную загрузив файл CSV. Для создания диаграммы из таблицы Google Drive переходим в Google Drive и создаем новую таблицу либо же редактируем существующую. Убедитесь, что первая строка таблицы содержит названия столбцов, а вторая — тип данных. Поддерживаемыми типами данных являются string, number, bolean, date, datetime, и timeofday.

После того, как ваша таблица будет готова, кликните на File » Publish to the web…. Появится всплывающее окно. Кликните на кнопку публикации для того, чтобы таблица стала доступна в интернете. В разделе Get a link to the published data section выберите CSV comma separated values. Скопируйте полученную ссылку, она понадобится нам позже.

Теперь возвращаемся на сайт WordPress в настройки плагина, кликаем на кпноку From Web и вставляем ссылку, которую только что скопировали в Google drive. Visualizer загрузит данные из Google docs и отобразит вам пример диаграммы. Кликните next для настройки внешнего вида диаграммы, цветов и других настроек.

На следующей странице вы увидите меню справа. Можно изменить настройки внешнего вида диаграммы. Задавайте ей заголовок, выравнивайте местоположение легенды, изменяйте цвета, трансформируйте диаграмму в 3D и т.д. После того, как вы будете удовлетворены результатом вида диаграммы, кликните на кнопку Insert Chart для добавления в запись.

Клик на кнопке Insert chart добавит шорткод диаграммы в запись. Как выглядит результат можно узнать, осуществив предварительный просмотр страницы перед публикацией.

Добавление диаграмм в WordPress с помощью файла CSV

Добавление диаграммы и заполнение ее данными из файла CSV похоже на процесс, описанный выше. Вам нужно просто загрузить файл CSV со своего компьютера вместе добавления ссылки. Однако, при подготовке файла CSV для использования его в Visualizer, убедитесь, что колонки разделены запятыми, первая строка содержит названия колонок, вторая — типы данных. Также убедитесь, что в наличии двойные кавычки в начале и конце файла. Пример файла CSV ниже:

"Браузер,посетители
string,numbers
Chrome,7894
Firefox,6754
InternetExplorer,4230
Safari,2106
Opera,627"

Редактирование или обновление ваших диаграмм в WordPress

Все графики, которые вы создали в Visualizer, сохраняются в разделе Медиафайлы » Visualizer Library. Отсюда вы можете создать копию диаграммы, удалить ее или отредактировать настройки внешнего вида.

Обновление данных для существующей диаграммы без ее изменения достаточно простое. Если вы добавляли данные из таблицы Google, то все, что нужно сделать, это обновить данные в этой таблице и перейти в File » Publish to the web… и повторно опубликовать вашу таблицу. Изменения автоматически отразятся в графике.

С другой стороны, если вы загрузили файл CSV, то нужно обновить этот файл на своем компьютере. После этого выберите график, который нужно обновить и кликните на ссылку редактирования под ним. В разделе Upload CSV file просто загрузите ваш новый фай. Изменения в данных автоматически отобразятся в тех записях, куда вы вставляли эту диаграмму.

Добавляем диаграмму в виджет сайдбара WordPress

Visualizer использует шорткоды для вставки диаграмм. Для создания диаграммы перейдите в Медиафайлы » Visualizer Library и кликните на кнопку «Add New». После этого вернитесь на страницу Visualizer Library, где вы увидите шорткод под диаграммой.

Скопируйте шорткод и перейдите в Внешний вид » Виджеты. Перетяните текстовый виджет в свой сайдбар и вставьте в него шорткод. Задайте нужный заголовок и сохраните виджет.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.