From 234d2acf1413a35fbc02735601ae0496f88dd0b1 Mon Sep 17 00:00:00 2001
From: Janak Pandya <27110070@students.lincoln.ac.uk>
Date: Mon, 8 May 2023 13:57:57 +0100
Subject: [PATCH] ASEA2-12  created apexchart polar area chart

---
 production/apexcharts.html | 68 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/production/apexcharts.html b/production/apexcharts.html
index 06b5b7dd..4e70c164 100644
--- a/production/apexcharts.html
+++ b/production/apexcharts.html
@@ -422,6 +422,32 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="col-md-6 col-sm-6  ">
+                            <div class="x_panel">
+                                <div class="x_title">
+                                    <h2>Polar area chart</h2>
+                                    <ul class="nav navbar-right panel_toolbox">
+                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                        </li>
+                                        <li class="dropdown">
+                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                                <a class="dropdown-item" href="#">Settings 1</a>
+                                                <a class="dropdown-item" href="#">Settings 2</a>
+                                            </div>
+                                        </li>
+                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                        </li>
+                                    </ul>
+                                    <div class="clearfix"></div>
+                                </div>
+                                <div class="x_content">
+                                    <div id="polarareaChart">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
                     </div>
                 </div>
             </div>
@@ -664,6 +690,46 @@
         };
 
 
+        polarareachartoptions = {
+            series: [42, 47, 52, 58, 65],
+            colors: ["#003c4e"],
+            chart: {
+                width: 380,
+                type: 'polarArea'
+            },
+            labels: ['Rose A', 'Rose B', 'Rose C', 'Rose D', 'Rose E'],
+            fill: {
+                opacity: 1
+            },
+            stroke: {
+                width: 1,
+                colors: undefined
+            },
+            yaxis: {
+                show: false
+            },
+            legend: {
+                position: 'bottom'
+            },
+            plotOptions: {
+                polarArea: {
+                    rings: {
+                        strokeWidth: 0
+                    },
+                    spokes: {
+                        strokeWidth: 0
+                    },
+                }
+            },
+            theme: {
+                monochrome: {
+                    enabled: true,
+                    shadeTo: 'light',
+                    shadeIntensity: 0.6
+                }
+            }
+        };
+
 
 
 
@@ -672,12 +738,14 @@
         var columnchart = new ApexCharts(document.querySelector("#columnChart"), columnchartoptions);
         var barchart = new ApexCharts(document.querySelector("#barChart"), barchartoptions);
         var piechart = new ApexCharts(document.querySelector("#pieChart"), piechartoptions);
+        var polarareachart = new ApexCharts(document.querySelector("#polarareaChart"), polarareachartoptions);
 
         linechart.render();
         areachart.render();
         columnchart.render();
         barchart.render();
         piechart.render();
+        polarareachart.render();
     </script>