question type of image chart completed

Web/Areas/Admin/Views/SurveyAnalysis/Analysis.cshtml

@@ -21,11 +21,9 @@
     }
 
     #Errocard{
-       
+        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
-      
+        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
-        box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
+        border-radius: 5px;
-        -webkit-box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
-        border-radius: 10px;
         background-color: 0px 0px 8px -1px rgba(20,101,230,1);
         height: auto;
 
@@ -35,17 +33,34 @@
     }
 
     .Errocard {
-        box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
+        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
-        -webkit-box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
+        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
-        border-radius: 10px;
+        border-radius: 5px;
        
     }
 
-    rect{
+   /*  rect{
        
-        border-radius:10px !important;
+        border-radius:5px !important;
+        background-color:transparent !important;
+    } */
+
+    body {
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 14px;
+        line-height: 1.8;
+        font-weight: normal;
+        background: #ffffff;
+        color: gray;
     }
 
+    img{
+        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
+        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
+        border-radius: 5px;
+        background-color: 0px 0px 8px -1px rgba(20,101,230,1);
+        height: auto;
+    }
 </style>
 
 <div class="container mt-5 p-5">
@@ -65,7 +80,7 @@
                
                 Total user respond <span class="badge text-bg-primary">@Model.ParticipantCount</span><br />
               
-                Users
+                Participated users
                 @foreach (var item in Model.Users)
                 {
                     <span class="badge text-bg-primary">@item.UserName</span>
@@ -76,24 +91,172 @@
         </div>
     </div>
    
-    <div class="mt-5" >
+   @*  <div class="mt-5" >
         @foreach (var question in Model.Questions)
         {
   
         
             <div class="text-center">
 
-                <div id="chart_div_@question.Id" class="Errocard m-4" style="width: 1000px; height: 300px;"></div>
+                <div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div>
             </div> 
         }
 
+    </div> *@
+    <div class="container mt-5 p-5">
+        @foreach (var question in Model.Questions)
+        {
+            <div class="text-center">
+                <!-- Chart container for all questions -->
+                <div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div>
+
+                <!-- Image container only for image questions -->
+                @if (question.Type == QuestionType.Image)
+                {
+                    <div id="img_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: auto;"></div>
+                }
             </div>
+        }
+    </div>
+
+
 </div>
-
-
-
-
 @section Scripts {
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script type="text/javascript">
+        google.charts.load('current', { 'packages': ['corechart'] });
+        google.charts.setOnLoadCallback(drawCharts);
+
+        function drawCharts() {
+        @foreach (var question in Model.Questions.Select((value, index) => new { Value = value, Index = index }))
+        {
+            <text>
+                 var type = '@question.Value.Type.ToString()';
+                var chartContainer = document.getElementById('chart_div_@question.Value.Id');
+                var imgContainer = (type === "Image") ? document.getElementById('img_div_@question.Value.Id') : null;
+
+                var colors = [
+                    '#cc0000', // dark red
+                    '#00cc00', // dark green
+                    '#0000cc', // dark blue
+                    '#cccc00', // dark yellow
+                    '#00cccc', // dark cyan
+                    '#cc00cc', // dark magenta
+                    '#008080', // dark teal
+                    '#808000', // olive
+                    '#800080', // purple
+                    '#800000', // maroon
+                    '#808080', // gray
+                    '#404040'  // darker gray
+                ];
+
+
+                var data = new google.visualization.DataTable();
+                data.addColumn('string', 'Option');
+                data.addColumn('number', 'Count');
+                data.addRows([]);
+                var colorIndex = 0; // Initialize colorIndex here
+            </text>
+            @foreach (var answer in question.Value.Answers)
+            {
+                <text>
+                        data.addRow(['@Html.Raw(answer.Text)', @answer.Count]);
+                </text>
+            }
+            <text>
+                            var options = {
+                    'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
+                    is3D: true,
+                    'titleTextStyle': { color: 'blue', fontSize: 15, bold: true },
+                    // 'colors': colors
+                };
+
+                if (chartContainer) {
+                    var chart = new google.visualization.PieChart(chartContainer);
+                    chart.draw(data, options);
+                }
+
+                if (imgContainer && type === "Image") {
+                    var imagesHtml = '';
+                @foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
+                {
+                    <text>
+                          var color = colors[colorIndex % colors.length]; // Correct usage of colorIndex
+                        imagesHtml += '<div style="display: inline-block; text-align: center; margin: 10px;">' +
+                            '<img src="@answer.Text" style="max-width:50%; height:auto; display: block; margin: auto;">' +
+                            '<div style="display: flex; align-items: center; gap: 10px;">' +
+                            '<span style="width: 12px; height: 12px; border-radius: 50%; background-color: ' + color + ';"></span>' +
+                            '<span style="color: ' + color + ';">@Html.Raw(answer.Text)</span>' +
+                            '</div></div>';
+                        colorIndex++; // Increment colorIndex within the loop
+                    </text>
+                }
+                        imgContainer.innerHTML = imagesHtml;
+                }
+            </text>
+        }
+                }
+    </script>
+}
+
+
+
+@* @section Scripts {
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script type="text/javascript">
+        google.charts.load('current', { 'packages': ['corechart'] });
+        google.charts.setOnLoadCallback(drawCharts);
+
+        function drawCharts() {
+        @foreach (var question in Model.Questions.Select((value, index) => new { Value = value, Index = index }))
+        {
+            <text>
+                            var type = '@question.Value.Type.ToString()';
+                var chartContainer = document.getElementById('chart_div_@question.Value.Id');
+                var imgContainer = type === "Image" ? document.getElementById('img_div_@question.Value.Id') : null;
+
+                var data = new google.visualization.DataTable();
+                data.addColumn('string', 'Option');
+                data.addColumn('number', 'Count');
+                data.addRows([
+            </text>
+            @foreach (var answer in question.Value.Answers)
+            {
+                <text>['@Html.Raw(answer.Text)', @answer.Count], </text>
+            }
+            <text>
+                            ]);
+
+                var options = {
+                    'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
+                    is3D: true,
+                    'titleTextStyle': { color: 'blue', fontSize: 15, bold: true }
+                };
+
+                if (chartContainer) {
+                    var chart = new google.visualization.PieChart(chartContainer);
+                    chart.draw(data, options);
+                }
+
+                if (imgContainer) {
+                    var imagesHtml = '';
+                @foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
+                {
+                    <text>imagesHtml += '<img src="@answer.Text" style="max-width:20%; height:auto; display: block; margin: 20px auto;">'; </text>
+                }
+                        imgContainer.innerHTML = imagesHtml;
+                }
+            </text>
+        }
+                }
+    </script>
+}
+ *@
+
+
+
+
+@* @section Scripts {
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
         google.charts.load('current', { 'packages': ['corechart'] });
@@ -115,7 +278,7 @@
 
                 // Set chart options
                 var options = {
-                    'title': '@Html.Raw(question.Text)',
+                    'title': 'Question: @Html.Raw(question.Text)',
                     is3D: true,
                    
                 };
@@ -130,4 +293,4 @@
         }
         }
     </script>
-}
+} *@