Implementing JSON data import

.gitignore

@@ -1,3 +1,4 @@
 *.iml
 .idea
 .project
+.vscode

src/main/webapp/preview/data/flop_articles.json

@@ -0,0 +1,26 @@
+{
+    "labels": [
+        "Insgesamt",
+        "Gruppe 1",
+        "Gruppe 2",
+        "Gruppe 3"
+    ],
+    "data1": [
+        50,
+        10,
+        20,
+        30
+    ],
+    "data2": [
+        30,
+        5,
+        20,
+        5
+    ],
+    "data3": [
+        80,
+        20,
+        30,
+        30
+    ]
+}

src/main/webapp/preview/data/overview.json

@@ -0,0 +1,26 @@
+{
+    "labels": [
+      "1 Jan",
+      "2 Jan", 
+      "3 Jan", 
+      "4 Jan", 
+      "5 Jan", 
+      "6 Jan"
+    ],
+    "data1": [
+      200, 
+      150, 
+      190, 
+      99, 
+      142, 
+      222
+    ],
+    "data2": [
+      434, 
+      300, 
+      324, 
+      198, 
+      349, 
+      353
+    ]
+  }

src/main/webapp/preview/data/shoping_times.json

@@ -0,0 +1,18 @@
+{
+    "labels": [
+        "8-9", 
+        "9-10", 
+        "10-11", 
+        "11-12", 
+        "12-13", 
+        "13-14"
+    ],
+    "data1": [
+        12, 
+        19, 
+        3, 
+        5, 
+        2, 
+        3
+    ]
+}

src/main/webapp/preview/data/sold_articles.json

@@ -0,0 +1,12 @@
+{
+    "labels": [
+        "Gruppe 1",
+        "Gruppe 2",
+        "Gruppe 3"
+    ],
+    "data1": [
+        2055,
+        816,
+        953
+    ]
+}

src/main/webapp/preview/data/top_articles.json

@@ -0,0 +1,30 @@
+{
+    "labels": [
+        "Insgesamt", 
+        "Gruppe 1", 
+        "Gruppe 2", 
+        "Gruppe 3"
+    ],
+    "label1": "Gartengeräte",
+    "data1": [
+        150,
+        50,
+        50,
+        50
+    ],
+    "label2": "Eisenwaren",
+    "data2": [
+        120,
+                    10,
+                    80,
+                    30
+    ],
+    "label3": "Baumaterialien",
+    "data3": [
+        200,
+                    102,
+                    53,
+                    45
+    ]
+
+}

src/main/webapp/preview/js/flop_articles.js

@@ -1,38 +1,26 @@
-var ctx = document.getElementById("flop_articles_chart");
+$.ajax({
-var flop_articles_chart = new Chart(ctx, {
+    url: 'data/flop_articles.json',
+    dataType: 'json'
+}).done(function (results) {
+    new Chart(document.getElementById("flop_articles_chart"), {
         type: 'horizontalBar',
         data: {
-        labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',],
+            labels: results.labels,
             datasets: [{
                 label: 'Holz',
                 backgroundColor: 'rgba(244, 177, 131, 1)',
                 stack: 'Stack 0',
-            data: [
+                data: results.data1
-                50,
-                10,
-                20,
-                30
-            ]
             }, {
                 label: 'Eisenwaren',
                 backgroundColor: 'rgba(255, 217, 102, 1)',
                 stack: 'Stack 1',
-            data: [
+                data: results.data2
-                30,
-                5,
-                20,
-                5
-            ]
             }, {
                 label: 'Baumaterialien',
                 backgroundColor: 'rgba(196, 209, 142, 1)',
                 stack: 'Stack 2',
-            data: [
+                data: results.data3
-                80,
-                20,
-                30,
-                30
-            ]
             }]
         },
         options: {
@@ -56,3 +44,4 @@ var flop_articles_chart = new Chart(ctx, {
             }
         }
     });
+});

src/main/webapp/preview/js/overview.js

@@ -1,17 +1,20 @@
-var ctx = document.getElementById("overview_chart");
+$.ajax({
-var overview_chart = new Chart(ctx, {
+    url: 'data/overview.json',
+    dataType: 'json'
+}).done(function (results) {
+    new Chart(document.getElementById("overview_chart"), {
         type: 'line',
         data: {
-        labels: ["1 Jan", "2 Jan", "3 Jan", "4 Jan", "5 Jan", "6 Jan"],
+            labels: results.labels,
             datasets: [{
                 label: "Warenanzahl",
-            data: [200, 150, 190, 99, 142, 222],
+                data: results.data1,
                 fill: true,
                 backgroundColor: 'rgba(113, 114, 231, 0.7)',
                 lineTension: 0,
             }, {
                 label: "Einnahmen in €",
-            data: [434, 300, 324, 198, 349, 353],
+                data: results.data2,
                 fill: true,
                 backgroundColor: 'rgba(104, 216, 154, 0.8)',
                 lineTension: 0,
@@ -52,3 +55,4 @@ var overview_chart = new Chart(ctx, {
             }
         }
     });
+});

src/main/webapp/preview/js/shoping_times.js

@@ -1,12 +1,15 @@
 
-var ctx = document.getElementById("shoping_times_chart");
+$.ajax({
-var shoping_times_chart = new Chart(ctx, {
+    url: 'data/shoping_times.json',
+    dataType: 'json'
+}).done(function (results) {
+    new Chart(document.getElementById("shoping_times_chart"), {
         type: 'bar',
         data: {
-        labels: ['8-9', '9-10', '10-11', '11-12', '12-13', '13-14'],
+            labels: results.labels,
             datasets: [{
                 label: 'Anzahl verkaufter Artikel',
-            data: [12, 19, 3, 5, 2, 3],
+                data: results.data1,
                 backgroundColor: [
                     'rgba(143, 170, 220, 0.9)',
                     'rgba(255, 50, 1, 0.9)',
@@ -51,3 +54,4 @@ var shoping_times_chart = new Chart(ctx, {
             }
         }
     });
+});

src/main/webapp/preview/js/sold_articles.js

@@ -1,13 +1,12 @@
-var ctx = document.getElementById("sold_articles_cake");
+$.ajax({
-var sold_articles_cake = new Chart(ctx, {
+    url: 'data/sold_articles.json',
+    dataType: 'json'
+}).done(function (results) {
+    new Chart(document.getElementById("sold_articles_cake"), {
         type: 'pie',
         data: {
             datasets: [{
-            data: [
+                data: results.data1,
-                2055,
-                816,
-                953,
-            ],
                 backgroundColor: [
                     'rgba(237, 125, 49, 0.9)',
                     'rgba(255, 192, 0, 0.9)',
@@ -15,12 +14,7 @@ var sold_articles_cake = new Chart(ctx, {
                 ],
                 label: 'Dataset 1'
             }],
-        labels: [
+            labels: results.labels
-            'Gruppe 1',
-            'Gruppe 2',
-            'Gruppe 3',
-
-        ]
                 },
         options: {
             responsive: true,
@@ -41,3 +35,4 @@ var sold_articles_cake = new Chart(ctx, {
             }
         }
     });
+});

src/main/webapp/preview/js/top_articles.js

@@ -1,38 +1,26 @@
-var ctx = document.getElementById("top_articles_chart");
+$.ajax({
-var top_articles_chart = new Chart(ctx, {
+    url: 'data/top_articles.json',
-    type: 'horizontalBar',
+    dataType: 'json'
+}).done(function (results) {
+    new Chart(document.getElementById("top_articles_chart"), {
+        type: 'phorizontalBarie',
         data: {
-        labels: ['Insgesamt', 'Gruppe 1', 'Gruppe 2', 'Gruppe 3',],
+            labels: results.labels,
             datasets: [{
-            label: 'Gartengeräte',
+                label: results.label1,
                 backgroundColor: 'rgba(244, 177, 131, 1)',
                 stack: 'Stack 0',
-            data: [
+                data: results.data1
-                150,
-                50,
-                50,
-                50
-            ]
             }, {
-            label: 'Eisenwaren',
+                label: results.label2,
                 backgroundColor: 'rgba(255, 217, 102, 1)',
                 stack: 'Stack 1',
-            data: [
+                data: results.data2
-                120,
-                10,
-                80,
-                30
-            ]
             }, {
-            label: 'Baumaterialien',
+                label: results.label3,
                 backgroundColor: 'rgba(196, 209, 142, 1)',
                 stack: 'Stack 2',
-            data: [
+                data: results.data3
-                200,
-                102,
-                53,
-                45
-            ]
             }]
         },
         options: {
@@ -56,3 +44,4 @@ var top_articles_chart = new Chart(ctx, {
             }
         }
     });
+});