Создание диаграмм, используя библиотеку FusionCharts

Создание диаграмм, используя библиотеку FusionCharts

От автора: Очень часто на страницах веб-приложений необходимо отображать различную статистическую информацию, к примеру, данные о расходах компании за год. При этом, зачастую, данные хранятся в виде таблиц, и выводить их на экран в табличном виде — не совсем удачная идея, так как это ухудшает восприятие информации пользователем. Наиболее удачным вариантом будет отображение данных в виде диаграмм или графиков, которые легко и быстро читаются пользователями. Поэтому, в данном уроке мы рассмотрим создание диаграмм и графиков, используя библиотеку FusionCharts.

скачать исходникискачать урок

Установка библиотеки

Первым делом установим библиотеку FusionCharts, для этого переходим на официальный сайт http://www.fusioncharts.com/ и кликаем по ссылке Download Free Trial:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Тем самым переходим на страницу скачивания версии Trial.

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

Для сегодняшнего урока мы будем базу данных fusion, с единственной таблицей rash, в которой хранятся данные о расходах компании за текущий год (в таблице нас интересуют поля month и summa):

Так же для примера мы будем использовать, практически пустую веб-страницу в которой создан всего один блок <div id=»chartContainer»>, необходимый для размещения в нем диаграммы. Исходный код даной страницы:

Обратите внимание, что файл functions.php, необходим для выборки данных из базы данных, поэтому в нем создана всего одна функция, которая выполняет подключение к базе данных и возвращает дескриптор открытого соединения. Код файла functions.php:

Для сегодняшнего урока нам необходимо подключить из скачанного архива, файлы fusioncharts.js, fusioncharts.charts.js, а так же fusioncharts.theme.fint.js из папки theme.

Таким образом, библиотека установлена и подключена.

Вывод диаграммы

Первым делом необходимо получить данные из базы данных в определенном формате. Библиотека FusionCharts работает с данными в формате JSON и XML. В данном уроке мы рассмотрим работу библиотеки с форматом JSON. Для отображения диаграммы необходимо, при ее инициализации в параметр data передать, массив объектов, в формате json:

Поэтому в файле functions.php, создадим функцию get_rash($db), которая вернет данные в необходимом формате:

Если распечатать значение возвращаемого массива $arr, мы увидим следующее:

Теперь в файле index.php, вызовем на исполнение данную функцию:

Далее, между тегами head, добавим следующий код, который отобразит диаграмму на экране:

Обратите внимание, что для отображения галереи нужно вызвать метод render(), объекта revenueChart, который мы собственно и создаем. При создании объекта необходимо указать следующие настройки (свойства данного объекта):

«type» – тип диаграммы;

«renderAt» — идентификатор блока, в котором будет отображена диаграмма;

«width» – ширина диаграммы;

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

«height» – высота диаграммы;

«dataFormat» – формат данных для отображения.

Свойство dataSource – объект, который содержит информацию, которую необходимо отобразить в диаграмме. Его свойство chart, содержит, следующие свойства:

«caption» – заголовок диаграммы;

«subCaption» – подзаголовок или дополнительный текст;

«xAxisName» – имя оси абсцисс(ось x);

«yAxisName» – имя оси ординат(ось y);

«theme» – цветовая тема диаграммы;

«numberPrefix» – префикс, добавляемый к значениям диаграммы.

Свойство «data» – содержит массив объектов, то есть данные, которые необходимо отобразить на диаграмме. В нашем случае это строка в формате json, ячейки data массива $data. Обновив информацию в браузере, мы увидим диаграмму в действии:

Теперь если свойству type присвоить значение line, мы увидим следующее:

Для создания объемной 3d диаграммы, свойству type присваиваем значение column3d:

Настройки внешнего вида. Линия тренда

Для настроек внешнего вида используются цветовые темы, которые доступны в папке theme архива с библиотекой, а также можно использовать некоторые настройки:

«showBorder» – показывать либо нет рамку вокруг диаграммы;

«borderColor» – цвет рамки;

«borderThickness» – толщина рамки;

«borderAlpha» – прозрачность рамки;

«bgColor» – цвет фона;

«bgAlpha» – прозрачность фона диаграммы.

Так же на диаграмме, можно отобразить линию тренда, которая может показывать, стремление компании к некоторым показателям. Для этого нужно добавить дополнительное свойство:

«startvalue» – начальное значение тренда;

«endvalue» – конечное значение тренда;

«isTrendZone» – если передать 1, значит, будет отображена зона тренда, в противном случае будет линия;

«color» – цвет линии тренда

«displayvalue» – отображаемое значение;

«tooltext» – текст подсказки.

Полный код javaScript, отображающий тренд:

После обновления информации в браузере, мы увидим следующее:

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Юрий

    здравствуйте отличный урок, появился вопрос, как добавить под низом вторую диаграму с другими значениями? например по alias диаграммы, но как вывести две диаграммы??

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree