#18 - Update graphic

src/main/java/ru/ulstu/extractor/controller/StatisticController.java

@@ -41,6 +41,12 @@ public class StatisticController {
             date[i] = timeCommits.get(i)[0].toString();
         }
         model.addAttribute("datas", date);
+        String[] url = new String[urlCommits.size()];
+        for (int i = 0; i < urlCommits.size(); i++) {
+            url[i] = urlCommits.get(i)[0].toString();
+        }
+        model.addAttribute("urls", url);
+
         return "statistic";
     }
 }

src/main/resources/templates/statistic.html

@@ -12,52 +12,6 @@
     <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 th:inline="javascript">
-        google.load("visualization", "1", {packages: ["corechart"]});
-        google.setOnLoadCallback(drawChart);
-
-        function drawChart() {
-            var onlyCommitData = [[${commitAuthorData}]];
-            var commitAuthorData = [
-                ['Автор', '% коммитов']
-            ].concat(onlyCommitData);
-            var data = google.visualization.arrayToDataTable(commitAuthorData);
-            var options = {
-                title: '% коммитов авторов',
-                is3D: true,
-                width: 600,
-                height: 300,
-                pieResidueSliceLabel: 'Остальные'
-            };
-            var chart = new google.visualization.PieChart(document.getElementById('air'));
-            chart.draw(data, options);
-        }
-    </script>
-    <script th:inline="javascript">
-        google.load("visualization", "1", {packages: ["corechart"]});
-        google.setOnLoadCallback(drawChart);
-
-        function drawChart() {
-            var onlyCommitUrlData = [[${commitUrlData}]];
-            var commitUrlData = [
-                ['Url', 'Коммиты']
-            ].concat(onlyCommitUrlData);
-            var data = google.visualization.arrayToDataTable(commitUrlData);
-            var options = {
-                title: 'Количество коммитов',
-                hAxis: {title: 'Url'},
-                vAxis: {
-                    title: 'Кол-во',
-                    width: 600,
-                    height: 300
-                }
-            };
-            var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
-            chart.draw(data, options);
-        }
-
-    </script>
     <script src="/webjars/highcharts/7.0.0/highcharts.js"></script>
     <script th:inline="javascript">
         $(document).ready(function () {
@@ -69,7 +23,7 @@
                 text: 'Количество коммитов во времени'
             };
             var xAxis = {
-                categories: [],
+                categories: [[${datas}]],
                 title: {
                     enabled: true,
                     text: 'Дата'
@@ -125,10 +79,105 @@
             $('#container').highcharts(json);
         });
     </script>
+    <script th:inline="javascript">
+        $(document).ready(function () {
+            var chart = {
+                plotBackgroundColor: null,
+                plotBorderWidth: null,
+                plotShadow: false
+            };
+            var title = {
+                text: '% коммитов авторов'
+            };
+            var tooltip = {
+                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+            };
+            var plotOptions = {
+                pie: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: {
+                        enabled: false
+                    },
+                    showInLegend: true
+                }
+            };
+            var series = [{
+                type: 'pie',
+                name: 'Browser share',
+                data: [[${commitAuthorData}]]
+            }];
+
+            var json = {};
+            json.chart = chart;
+            json.title = title;
+            json.tooltip = tooltip;
+            json.series = series;
+            json.plotOptions = plotOptions;
+            $('#containerPie').highcharts(json);
+        });
+    </script>
+    <script th:inline="javascript">
+        $(document).ready(function () {
+            var chart = {
+                type: 'column'
+            };
+            var title = {
+                text: 'Количество коммитов'
+            };
+            var xAxis = {
+                categories: [[${urls}]],
+                crosshair: true,
+                title: {
+                    text: 'Url'
+                }
+            };
+            var yAxis = {
+                min: 0,
+                title: {
+                    text: 'Кол-во'
+                }
+            };
+            var tooltip = {
+                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
+                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
+                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
+                footerFormat: '</table>',
+                shared: true,
+                useHTML: true
+            };
+            var plotOptions = {
+                column: {
+                    pointPadding: 0.2,
+                    borderWidth: 0
+                }
+            };
+            var credits = {
+                enabled: false
+            };
+
+            var series = [{
+                name: 'Коммиты',
+                data: [[${commitUrlData}]]
+            }];
+
+            var json = {};
+            json.chart = chart;
+            json.title = title;
+            json.tooltip = tooltip;
+            json.xAxis = xAxis;
+            json.yAxis = yAxis;
+            json.series = series;
+            json.plotOptions = plotOptions;
+            json.credits = credits;
+            $('#containerColumn').highcharts(json);
+
+        });
+    </script>
     <div class="row">
-        <div id="air" class="col-sm-12 col-lg-6" style="width: 200px"></div>
-        <div id="oil" class="col-sm-12 col-lg-6" style="width: 200px"></div>
         <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
+        <div id="containerPie" style="width: 550px; height: 400px; margin: 0 auto"></div>
+        <div id="containerColumn" style="width: 550px; height: 400px; margin: 0 auto"></div>
     </div>
 </div>
 </html>