#18 - Create statistic

3 years ago · caae6eae5a
parent e348b37625
commit caae6eae5a
1 changed files with 55 additions and 0 deletions
--- a/src/main/resources/templates/statistic.html
+++ 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>