Войти

Войти

 

Как встроить диаграмму или график на сайт

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

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

 

Кроме построения доступно также и сохранение построенных графиков в файлах различного формата (png, jpeg, svg или pdf), которые затем можно разместить на своем ресурсе в сети. Далее мы рассмотрим весь процесс построения на примере линейной. И строить мы ее будем на основе здесь же, на ваших глазах созданной, базы данных «Расходы».

 

Выбираем в меню пункт «Мои проекты»/«Создать новый проект». Где в появившиеся поля вписываем название нашей базы данных («Расходы») и формы, в которую мы будем водить информацию. В форме создаем четыре поля, которые затем нам потребуются для построения диаграммы: Дата, Приход, Расход, Остаток. Последнее имеет тип «формула». Добавляем 5-10 записей, чтобы была основа для дальнейшей работы и к пункту меню «Диаграммы».

 

Одно замечание. Бесплатный аккаунт позволяет построить для каждой базы данных не более трех диаграмм. Если же вы купите платный, то в нем ограничений на количество не существует. Идем дальше.

 

При входе в меню нам становятся доступны несколько кнопок. Справа от нашей базы данных находится иконка «Удалить», но нас будет интересовать не она, а ссылка, которая позволит создать и отредактировать диаграмму («Редактировать»). После нажатия на эту ссылку отобразится окно, где есть все необходимое для построения, настройки и внедрения нашего графика на сайт. Займет это очень немного времени.

 

Вводим в соответствующие поля название «Расходы», тип – «Линии», выбираем из предложенных вариантов нужный нам подтип. После этого страница перезагрузится. Следующий этап – это выбор источника данных для нашего построения.

 

В качестве источника может выступать любая из существующих таблиц в любой базе данных, а также любой ранее созданный вьюс (представление базы данных). В нашем примере мы используем для построения только что созданную таблицу «Расходы». Для построения линий добавляем поля таблицы: «Приход», «Расход», «Остаток». Делается это простым нажатием на пункт меню «Добавить источник данных» и выбором соответствующей колонки в нашей таблице. Цвета и названия этих линий настроим позже. После этого жмем кнопку «Обновить» и наблюдаем за произошедшими изменениями.

 

Наша рисунок имеет две оси: Y и X. На оси Y мы имеем возможность задать начальную сумму (метку) и установить диапазон изменения значений. Ось X имеет более расширенные настройки. Если по умолчанию показываются значения 0-100 (что нас не устраивает), то в автоматическом режиме будет выведен весь диапазон значений. Кроме этих двух режимов есть еще два: ручное задание диапазона, либо списка выводимых значений. Но мы выберем совсем другое: значения для оси X у нас будет устанавливать колонка «Дата» из нашей таблицы.

 

Итак, что у нас получилось. Мы видим название, даты по оси X и три линии, которые отображают поля «Приход», «Расход» и «Остаток. Любую из этих линий можно, как показать, так и спрятать, нажав на необходимую иконку в нижней части окна, изменить ее цвет и толщину. Все, на этом построение заканчиваем.

 

У нас осталось два невыясненных момента. Сохранение диаграммы и внедрение на ресурс. Прежде чем приступить к этим операциям, необходимо установить ее размеры в пикселях в соответствующих полях, а потом уже сохранить изображение в соответствующем формате.

 

Встроить диаграмму на сайт можно двумя способами. Первый, это копирование и вставка на нужную страницу кода диаграммы (iframe). А второй – установка постоянной ссылки на нее. Поступайте так, как вам удобнее. Главное не забывать проводить постоянный аудит сайта на предмет обновления базы данных. Нужно проверять соответствует ли то, что на сайте вашим требованиям и постоянно улучшать характеристики и внешний вид модулей сайта, таких как веб-формы, базы данных и графики.


Пожалуйста, войдите в QuintaDB чтобы иметь возможность оставлять комментарии
Поделиться обсуждением в социальных сетях: