From caae6eae5a5e389a0c0debf2f9d1febe12520c56 Mon Sep 17 00:00:00 2001
From: Anton Romanov <romanov73@gmail.com>
Date: Thu, 1 Apr 2021 16:16:54 +0400
Subject: [PATCH] #18 - Create statistic

---
 src/main/resources/templates/statistic.html | 55 +++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/main/resources/templates/statistic.html
diff --git a/src/main/resources/templates/statistic.html b/src/main/resources/templates/statistic.html
new file mode 100644
index 0000000..9d53245
--- /dev/null
+++ b/src/main/resources/templates/statistic.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
+<html
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+        layout:decorate="~{default}">
+<head>
+    <title>Простая обработка формы на Spring MVC</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+</head>
+<div class="container" layout:fragment="content">
+    <script src="https://www.google.com/jsapi"></script>
+    <script>
+        google.load("visualization", "1", {packages: ["corechart"]});
+        google.setOnLoadCallback(drawChart);
+
+        function drawChart() {
+            var data = google.visualization.arrayToDataTable([
+                ['Газ', 'Объём'],
+                ['Азот', 78.09],
+                ['Кислород', 20.95],
+                ['Аргон', 0.93],
+                ['Углекислый газ', 0.03]
+            ]);
+            var options = {
+                title: 'Состав воздуха',
+                is3D: true,
+                pieResidueSliceLabel: 'Остальное'
+            };
+            var chart = new google.visualization.PieChart(document.getElementById('air'));
+            chart.draw(data, options);
+        }
+    </script>
+    <script>
+        google.load("visualization", "1", {packages: ["corechart"]});
+        google.setOnLoadCallback(drawChart);
+
+        function drawChart() {
+            var data = google.visualization.arrayToDataTable([
+                ['Год', 'Россия', 'США'],
+                ['1860', 1.3, 70],
+                ['1885', 2000, 3120],
+                ['1901', 12170, 9920]
+            ]);
+            var options = {
+                title: 'Добыча нефти',
+                hAxis: {title: 'Год'},
+                vAxis: {title: 'Тыс. тонн'}
+            };
+            var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
+            chart.draw(data, options);
+        }
+    </script>
+    <div id="air" style="width: 500px; height: 400px;"></div>
+    <div id="oil" style="width: 500px; height: 400px;"></div>
+</div>
+</html>
