Воскресенье, 19 мая 2019 22:18

Как визуализировать график посещаемости с помощью Google Charts

Оцените материал

(3 голосов)

С помощью API Google Charts можно создавать различные виды графиков и диаграмм: круговые, столбчатые и многие другие. Используя это API вы легко создадите графические отчеты для вашего веб-приложения. В этой статье мы рассмотрим, как с помощью Google Chart API вывести на экран отчет по графику посещаемости. В предыдущем уроке мы рассматривали создание графиков с помощью библиотеки Highcharts.

В этом примере автор использовал базу данных сотрудников для получения данных о посещаемости. Эти данные, полученные из базы данных, будут отображены на графике, созданном с помощью Google Charts API. График посещений будет отображаться с помощью 2 типов диаграмм: круговой и столбчатой.

На круговой диаграмме будет отображаться процент присутствующих и отсутствующих сотрудников. В столбчатой диаграмме вместо процентного значения будет отображаться количество присутствующих и отсутствующих сотрудников. Автор статьи использовал пользовательские цвета, чтобы отобразить разницу между данными о посещаемости.

HTML для отображения графика посещаемости с помощью Google Charts

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

Google Chart API на этой странице будет подключен в виде JS-скрипта. Этот API имеет зависимость от Google visualization API. На основе спецификации Google код в подключаемом JS-файле будет использоваться для создания различных типов диаграмм.

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Make Attendance Graph using Google Charts</title>
<style>
body {
    width: 660px;
    margin: 0 auto;
}
</style>
<script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">  
// API initialization to create Google chart 
</script>
</head>
<body>
    <h1>How to Make Attendance Graph using Google Charts</h1>
    <div id="piechart"></div>
    <div id="columnchart"></div>
    </div>
</body>
</html>

Скрипт для инициализации API Google Charts

Круговая и столбчатая диаграммы в нашем примере создаются для отображения отчета о посещаемости сотрудников в графическом формате. Первым делом инициализируем Google chart API и создаем экземпляр диаграммы. Экземпляр диаграммы при этом создается со значениями параметров по-умолчанию. Это, например, касается заголовка диаграммы, подписей для осей x и y, а также цвета и других параметров. Ранее мы создавали экземпляр графика со значениями по-умолчанию, когда генерировали динамическую диаграмму с помощью Charts.js.

Круговая диаграмма

Код скрипта, представленный ниже, устанавливает параметры для заголовка и настраивает цвета секторов круговой диаграммы. Указание цветов не обязательно. Если цвета не указаны, то будут использоваться случайные цвета, выбранные по-умолчанию. Тип требуемой диаграммы нужно передать в качестве аргументов. В данном коде экземпляр диаграммы Google создается путем вызова соответствующих методов класса visualization. При создании этого графика в качестве аргумента передается целевой HTML-элемент, в котором он будет отрисован. Данные для его построения мы получаем из БД и передаем в объект DataTable.

JavaScript

google.charts.load('current', {'packages':['corechart']});  
google.charts.setOnLoadCallback(drawPieChart);  

function drawPieChart()  
{  
    var pie = google.visualization.arrayToDataTable([  
              ['attendancede', 'Numbder'],
              ['<?php echo $label[0]; ?>', <?php echo $count[0]; ?>],
              ['<?php echo $label[1]; ?>', <?php echo $count[1]; ?>],
                    
         ]);  
    var header = {  
          title: 'Percentage of employee attendance',
          slices: {0: {color: '#666666'}, 1:{color: '#006EFF'}}
         };  
    var piechart = new google.visualization.PieChart(document.getElementById('piechart'));  
    piechart.draw(pie, header);  
}

Столбчатая диаграмма

Скрипт для отображения столбчатой диаграммы будет немного отличаться от сценария круговой диаграммы. Коды цветов для столбцов передаются вместе с данными, а не устанавливаются в массиве параметров. Объект, представляющий столбчатую диаграмму создается путем вызова методов класса google.visualization.DataView. Объект DataTable передается методу построения диаграммы, чтобы отразить на ней данные о посещаемости.

JavaScript

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawColumnChart);

function drawColumnChart() {
    var bar = google.visualization.arrayToDataTable([
           ['attendance','Count',{ role: "style" } ],
           ['<?php echo $label[1]; ?>', <?php echo $count[1]; ?>,"#006EFF"],
           ['<?php echo $label[0]; ?>', <?php echo $count[0]; ?>,"#666666"]
           ]);
    var columnview = new google.visualization.DataView(bar);
     columnview.setColumns([0, 1,
               { calc: "stringify",
                 sourceColumn: 1,
                 type: "string",
                 role: "annotation" },
               2]);       
    var header = {
    title: 'Count of attendance',
    bar: {groupWidth: "50%"}
    };
    var barchart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
    barchart.draw(columnview, header);
}

PHP код для получения данных о посещаемости из базы данных

Представленный ниже PHP-код выполняет запрос (SELECT) к БД для получения данных о посещениях. В этом запросе автор статьи использовал выражение MySQL case для вычисления текстовых значений на основе результатов запроса. В БД посещений – присутствие обозначается единицей (1), а отсутствие единицей с отрицательным знаком (-1).

Псевдоним значения присутствия (Present/Absent) используется для подписи, а present_absent_count – для значения подсчета посещений. Эти данные, сформированные в виде массива PHP загружаются в объект DataTable при инициализации экземпляра диаграммы для визуализации графика посещаемости.

PHP

<?php
$connect = mysqli_connect("localhost", "root", "test", "blog_samples");
$query = "SELECT count(*) as present_absent_count, attendance,
     case
         when attendance = 1 then 'Present'
         when attendance = -1 then 'Absent'
       end as attendance FROM employee GROUP BY attendance ;";
$result = mysqli_query($connect, $query);
$i=0;
while ($row = mysqli_fetch_array($result)) {
    $label[$i] = $row["attendance"];
    $count[$i] = $row["present_absent_count"];
    $i++;
}
?>

Запросы для создания базы данных MySQL

Следующие запросы служат для создания таблицы employee в базе данных для хранения данных о сотрудниках. Также в ней хранится информация о присутствии на рабочем месте.

SQL

--
-- Table structure for table `employee`
--

CREATE TABLE `employee` (
  `id` int(2) NOT NULL,
  `name` varchar(20) COLLATE latin1_bin NOT NULL,
  `gender` varchar(10) COLLATE latin1_bin NOT NULL,
  `attendance` tinyint(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_bin;

--
-- Dumping data for table `employee`
--

INSERT INTO `employee` (`id`, `name`, `gender`, `attendance`) VALUES
(1, 'Regina Hollinshed', 'Male', 1),
(2, 'Catherine', 'Female', 1),
(3, 'Paul De Souza', 'Male', -1),
(4, 'Karolin', 'Female', -1),
(5, 'Infanta', 'Female', 1),
(6, 'David Milton', 'Male', 1),
(7, 'Imelda', 'Female', -1),
(8, 'Varghese', 'Male', 1),
(9, 'Greeda', 'Female', 1),
(10, 'Florence', 'Male', 1);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `employee`
--
ALTER TABLE `employee`
  ADD PRIMARY KEY (`id`);
COMMIT;

График присутствия, сгенерированный с использованием Google диаграмм

На представленном ниже скриншоте показан результат: график присутствия сотрудников в виде круговой и столбчатой диаграмм, созданных с использованием API Google Charts. При наведении курсора на сегменты диаграммы и столбцы графика информация о посещаемости будет показываться в тултипе.

график присутствия сотрудников в виде круговой и столбчатой диаграмм

Демо

Оригинал статьи: How to Render Attendance Graph using Google Charts

Перевод: Земсков Матвей

Прочитано 11481 раз

Опубликовано в PHP

Теги

Google chart API

Другие материалы в этой категории: « Создаем RESTful веб-службу на PHP

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх