question type of image chart completed
This commit is contained in:
Qais Yousuf
parent
d3a6fd4918
commit
5b49528a33
1 changed files with 182 additions and 19 deletions
|
|
@ -21,11 +21,9 @@
|
|||
}
|
||||
|
||||
#Errocard{
|
||||
|
||||
|
||||
box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
|
||||
-webkit-box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
|
||||
border-radius: 10px;
|
||||
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;
|
||||
|
||||
|
|
@ -35,17 +33,34 @@
|
|||
}
|
||||
|
||||
.Errocard {
|
||||
box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
|
||||
-webkit-box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
|
||||
border-radius: 10px;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
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>
|
||||
}
|
||||
} *@
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue