Laravel France
Dynamisation de question de type echelle texte et de type priorisation
simonnguena
Salut je souhaite utiliset la librairie google chart pour dynamiser les questions de type coche unique(bar chart et donut), coche multiple(bar chart et donut), numérique(bar chart et donut), numérique classé(column chart et donut), échelle texte(column chart et donut) et priorisation(combo chart) Je suis parvenu avec les types coche unique, coche multiple, numérique. J'ai un blocage avec les numérique classé, échelle texte et priorisation. Je suis sous laravel 8. Quelqu'un pourrait il me donner un coup de main?
voici mon code
@switch($item->typequestion->id) @case(config('app.cocheUniqueId')) <table width="700" {{-- cellpadding="0" cellspacing="0" --}}> @php $theme = ""; if (!is_null($item->theme)) { if (!is_null($questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first())) { $theme = $questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first()->libelle; } }
@endphp
<td colspan="2" style="font-weight: bold; text-align: center; padding: 20px 5px 10px 5px; color: black;font-size: 11pt; font-family: Verdana, Arial;">{{$theme}}</td>
</tr>
<tr>
<td style="text-align: center; background-image:url('{{asset('assets/img/bgnum.gif')}}');" width="55">{{$loop->index+1}}</td>
<td width="645" style="background-color:#3F9AB5;padding:10px; vertical-align: top; color: white;">{{$item->question}}</td>
</tr>
<tr>
<td colspan="2" width="700" style="vertical-align: top; font-style: italic;font-size: 8pt; color: black; font-weight: normal; padding: 5px 0px 5px 67px;font-family: Verdana, Geneva, Tahoma, sans-serif ">{{$item->commentaire}}</td>
</tr>
</tbody>
</table>
<table style="margin-left: 66px; border-spacing:2px 2px !important;border-collapse:separate !important;">
<tbody>
@php
$choices = explode(';',$item->choix);
@endphp
<div class="row">
<div class="col-1">
<div>
</div>
</div>
<div class="col-11">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="{{'uniqueBar_'.$item->id}}" data-toggle="tab" data-target="{{'#unique_'.$item->id}}"
type="button" role="tab" aria-controls="{{'unique_'.$item->id}}" aria-selected="true"
onclick="drawBarChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/bthisto_gris.gif')}}">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="{{'uniquePie_'.$item->id}}" data-toggle="tab" data-target="{{'#uniquePieTarget_'.$item->id}}"
type="button" role="tab" aria-controls="{{'uniquePieTarget_'.$item->id}}" aria-selected="false"
onclick="drawPieChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/btpie_gris.gif')}}">
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="{{'unique_'.$item->id}}" role="tabpanel" aria-labelledby="{{'uniqueBar_'.$item->id}}">
<div id="{{"uniqueBarAffiche_".$item->id}}"></div>
</div>
<div class="tab-pane fade" id="{{'uniquePieTarget_'.$item->id}}" role="tabpanel" aria-labelledby="{{'uniquePie_'.$item->id}}">
<div id="{{"uniquePieAffiche_".$item->id}}"></div>
</div>
</div>
</div>
</div>
@foreach ($choices as $choix)
@endforeach
</tbody>
</table>
@break
@case(config('app.cocheMultiId'))
<table width="700">
<tbody>
<tr>
@php
$theme = "";
if (!is_null($item->theme)) {
if (!is_null($questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first())) {
$theme = $questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first()->libelle;
}
}
@endphp
<td colspan="2" style="font-weight: bold; text-align: center; padding: 20px 5px 10px 5px; color: black;font-size: 11pt; font-family: Verdana, Arial;">{{$theme}}</td>
</tr>
<tr>
<td style="text-align: center; background-image:url('{{asset('assets/img/bgnum.gif')}}');" width="55">{{$loop->index+1}}</td>
<td width="645" style="background-color:#3F9AB5;padding:10px; vertical-align: top; color: white;">{{$item->question}}</td>
</tr>
<tr>
<td colspan="2" width="700" style="vertical-align: top; font-style: italic;font-size: 8pt; color: black; font-weight: normal; padding: 5px 0px 5px 67px;font-family: Verdana, Geneva, Tahoma, sans-serif ">{{$item->commentaire}}</td>
</tr>
</tbody>
</table>
<table style="margin-left: 66px; border-spacing:2px 2px !important;border-collapse:separate !important;">
<tbody id="{{$item->id}}">
@php
$choices = explode(';',$item->choix);
@endphp
<div class="row">
<div class="col-1">
<div>
</div>
</div>
<div class="col-11">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="{{'MultiBar_'.$item->id}}" data-toggle="tab" data-target="{{'#Multi_'.$item->id}}"
type="button" role="tab" aria-controls="{{'Multi_'.$item->id}}" aria-selected="true"
onclick="drawBarChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/bthisto_gris.gif')}}">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="{{'MultiPie_'.$item->id}}" data-toggle="tab" data-target="{{'#MultiPieTarget_'.$item->id}}"
type="button" role="tab" aria-controls="{{'MultiPieTarget_'.$item->id}}" aria-selected="false"
onclick="drawPieChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/btpie_gris.gif')}}">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="{{'MultiGau_'.$item->id}}" data-toggle="tab" data-target="{{'#MultiGauTarget_'.$item->id}}"
type="button" role="tab" aria-controls="{{'MultiGauTarget_'.$item->id}}" aria-selected="false"
onclick="drawGauChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/gauge.gif')}}">
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="{{'Multi_'.$item->id}}" role="tabpanel" aria-labelledby="{{'MultiBar_'.$item->id}}">
<div id="{{"MultiBarAffiche_".$item->id}}"></div>
</div>
<div class="tab-pane fade" id="{{'MultiPieTarget_'.$item->id}}" role="tabpanel" aria-labelledby="{{'MultiPie_'.$item->id}}">
<div id="{{"MultiPieAffiche_".$item->id}}"></div>
</div>
<div class="tab-pane fade" id="{{'MultiGauTarget_'.$item->id}}" role="tabpanel" aria-labelledby="{{'MultiGau_'.$item->id}}">
<div id="{{"MultiGauAffiche_".$item->id}}"></div>
</div>
</div>
</div>
</div>
@foreach ($choices as $choix)
@endforeach
</tbody>
</table>
@break
@case(config('app.cocheNumericId'))
<table width="700">
<tbody>
<tr>
@php
$theme = "";
if (!is_null($item->theme)) {
if (!is_null($questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first())) {
$theme = $questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first()->libelle;
}
}
@endphp
<td colspan="2" style="font-weight: bold; text-align: center; padding: 20px 5px 10px 5px; color: black;font-size: 11pt; font-family: Verdana, Arial;">{{$theme}}</td>
</tr>
<tr>
<td style="text-align: center; background-image:url('{{asset('assets/img/bgnum.gif')}}');" width="55">{{$loop->index+1}}</td>
<td width="645" style="background-color:#3F9AB5;padding:10px; vertical-align: top; color: white;">{{$item->question}}</td>
</tr>
<tr>
<td colspan="2" width="700" style="vertical-align: top; font-style: italic;font-size: 8pt; color: black; font-weight: normal; padding: 5px 0px 5px 67px;font-family: Verdana, Geneva, Tahoma, sans-serif ">{{$item->commentaire}}</td>
</tr>
</tbody>
</table>
<table style="margin-left: 66px; border-spacing:2px 2px !important;border-collapse:separate !important;">
<tbody id="{{$item->id}}">
@php
$echelles = explode('-',$item->echelle);
@endphp
<div class="row">
<div class="col-1">
<div>
</div>
</div>
<div class="col-11">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="{{'NumericBar_'.$item->id}}" data-toggle="tab" data-target="{{'#Numeric_'.$item->id}}"
type="button" role="tab" aria-controls="{{'Numeric_'.$item->id}}" aria-selected="true"
onclick="drawBarChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/bthisto_gris.gif')}}">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="{{'NumericPie_'.$item->id}}" data-toggle="tab" data-target="{{'#NumericPieTarget_'.$item->id}}"
type="button" role="tab" aria-controls="{{'NumericPieTarget_'.$item->id}}" aria-selected="false"
onclick="drawPieChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/btpie_gris.gif')}}">
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="{{'Numeric_'.$item->id}}" role="tabpanel" aria-labelledby="{{'NumericBar_'.$item->id}}">
<div id="{{"NumericBarAffiche_".$item->id}}"></div>
</div>
<div class="tab-pane fade" id="{{'NumericPieTarget_'.$item->id}}" role="tabpanel" aria-labelledby="{{'NumericPie_'.$item->id}}">
<div id="{{"NumericPieAffiche_".$item->id}}"></div>
</div>
</div>
</div>
</div>
</tbody>
</table>
@break
@case(config('app.numericClassId'))
<table width="700">
<tbody>
<tr>
@php
$theme = "";
if (!is_null($item->theme)) {
if (!is_null($questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first())) {
$theme = $questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first()->libelle;
}
}
@endphp
<td colspan="2" style="font-weight: bold; text-align: center; padding: 20px 5px 10px 5px; color: black;font-size: 11pt; font-family: Verdana, Arial;">{{$theme}}</td>
</tr>
<tr>
<td style="text-align: center; background-image:url('{{asset('assets/img/bgnum.gif')}}');" width="55">{{$loop->index+1}}</td>
<td width="645" style="background-color:#3F9AB5;padding:10px; vertical-align: top; color: white;">{{$item->question}}</td>
</tr>
<tr>
<td colspan="2" width="700" style="vertical-align: top; font-style: italic;font-size: 8pt; color: black; font-weight: normal; padding: 5px 0px 5px 67px;font-family: Verdana, Geneva, Tahoma, sans-serif ">{{$item->commentaire}}</td>
</tr>
</tbody>
</table>
<table style="margin-left: 66px; border-spacing:2px 2px !important;border-collapse:separate !important;">
<tbody>
<div class="row">
<div class="col-1">
<div>
</div>
</div>
<div class="col-11">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="{{'numericClassBar_'.$item->id}}" data-toggle="tab" data-target="{{'#numericClass_'.$item->id}}"
type="button" role="tab" aria-controls="{{'numericClass_'.$item->id}}" aria-selected="true"
onclick="drawBarChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/bthisto_gris.gif')}}">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="{{'numericClassPie_'.$item->id}}" data-toggle="tab" data-target="{{'#numericClassPieTarget_'.$item->id}}"
type="button" role="tab" aria-controls="{{'numericClassPieTarget_'.$item->id}}" aria-selected="false"
onclick="drawPieChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/btpie_gris.gif')}}">
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="{{'numericClass_'.$item->id}}" role="tabpanel" aria-labelledby="{{'numericClassBar_'.$item->id}}">
<div id="{{"numericClassBarAffiche_".$item->id}}"></div>
</div>
<div class="tab-pane fade" id="{{'numericClassPieTarget_'.$item->id}}" role="tabpanel" aria-labelledby="{{'numericClassPie_'.$item->id}}">
<div id="{{"numericClassPieAffiche_".$item->id}}"></div>
</div>
</div>
</div>
</div>
</tbody>
</table>
@break
@case(config('app.echelleTexteId'))
<table width="700">
<tbody>
<tr>
@php
$theme = "";
if (!is_null($item->theme)) {
if (!is_null($questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first())) {
$theme = $questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first()->libelle;
}
}
@endphp
<td colspan="2" style="font-weight: bold; text-align: center; padding: 20px 5px 10px 5px; color: black;font-size: 11pt; font-family: Verdana, Arial;">{{$theme}}</td>
</tr>
<tr>
<td style="text-align: center; background-image:url('{{asset('assets/img/bgnum.gif')}}');" width="55">{{$loop->index+1}}</td>
<td width="645" style="background-color:#3F9AB5;padding:10px; vertical-align: top; color: white;">{{$item->question}}</td>
</tr>
<tr>
<td colspan="2" width="700" style="vertical-align: top; font-style: italic;font-size: 8pt; color: black; font-weight: normal; padding: 5px 0px 5px 67px;font-family: Verdana, Geneva, Tahoma, sans-serif ">{{$item->commentaire}}</td>
</tr>
</tbody>
</table>
<table style="margin-left: 66px; border-spacing:2px 2px !important;border-collapse:separate !important;">
<tbody id="{{$item->id}}">
<div class="row">
<div class="col-1">
<div>
</div>
</div>
<div class="col-11">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="{{'echelleTexteCol_'.$item->id}}" data-toggle="tab" data-target="{{'#echelleTexte_'.$item->id}}"
type="button" role="tab" aria-controls="{{'echelleTexte_'.$item->id}}" aria-selected="true"
onclick="drawColChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/bthisto_gris.gif')}}">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="{{'echelleTextePie_'.$item->id}}" data-toggle="tab" data-target="{{'#echelleTextePieTarget_'.$item->id}}"
type="button" role="tab" aria-controls="{{'echelleTextePieTarget_'.$item->id}}" aria-selected="false"
onclick="drawPieChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/btpie_gris.gif')}}">
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="{{'echelleTexte_'.$item->id}}" role="tabpanel" aria-labelledby="{{'echelleTexteBar_'.$item->id}}">
<div id="{{"echelleTexteColAffiche_".$item->id}}"></div>
</div>
<div class="tab-pane fade" id="{{'echelleTextePieTarget_'.$item->id}}" role="tabpanel" aria-labelledby="{{'echelleTextePie_'.$item->id}}">
<div id="{{"echelleTextePieAffiche_".$item->id}}"></div>
</div>
</div>
</div>
</div>
</tbody>
</table>
@break
@case(config('app.priorisationId'))
<table width="700">
<tbody>
<tr>
@php
$theme = "";
if (!is_null($item->theme)) {
if (!is_null($questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first())) {
$theme = $questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first()->libelle;
}
}
@endphp
<td colspan="2" style="font-weight: bold; text-align: center; padding: 20px 5px 10px 5px; color: black;font-size: 11pt; font-family: Verdana, Arial;">{{$theme}}</td>
</tr>
<tr>
<td style="text-align: center; background-image:url('{{asset('assets/img/bgnum.gif')}}');" width="55">{{$loop->index+1}}</td>
<td width="645" style="background-color:#3F9AB5;padding:10px; vertical-align: top; color: white;">{{$item->question}}</td>
</tr>
<tr>
<td colspan="2" width="700" style="vertical-align: top; font-style: italic;font-size: 8pt; color: black; font-weight: normal; padding: 5px 0px 5px 67px;font-family: Verdana, Geneva, Tahoma, sans-serif ">{{$item->commentaire}}</td>
</tr>
</tbody>
</table>
<table style="margin-left: 66px; border-spacing:2px 2px !important;border-collapse:separate !important;">
<tbody id="{{$item->id}}">
@php
$choixs = explode(';',$item->choix);
@endphp
<div class="row">
<div class="col-1">
<div>
</div>
</div>
<div class="col-11">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="{{'priorisation_'.$item->id}}" data-toggle="tab" data-target="{{'#priorisation_'.$item->id}}"
type="button" role="tab" aria-controls="{{'priorisation_'.$item->id}}" aria-selected="true"
onclick="drawComChart(this.id, {{json_encode($responseVote[$item->ordre_num])}})">
<img src="{{asset('assets/images/bthisto_gris.gif')}}">
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="{{'priorisation_'.$item->id}}" role="tabpanel" aria-labelledby="{{'priorisationBar_'.$item->id}}">
<div id="{{"priorisationAffiche_".$item->id}}"></div>
</div>
</div>
</div>
</div>
@foreach ($choixs as $choix)
@endforeach
</tbody>
</table>
@break
@case(config('app.question_ouverteId'))
<table width="700" hidden>
<tbody>
<tr>
@php
$theme = "";
if (!is_null($item->theme)) {
if (!is_null($questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first())) {
$theme = $questionnaire->themes->where('ordre_num',$item->theme->ordre_num)->where('langue_id',$langueId)->first()->libelle;
}
}
@endphp
<td colspan="2" style="font-weight: bold; text-align: center; padding: 20px 5px 10px 5px; color: black;font-size: 11pt; font-family: Verdana, Arial;">{{$theme}}</td>
</tr>
<tr>
<td style="text-align: center; background-image:url('{{asset('assets/img/bgnum.gif')}}');" width="55">{{$loop->index+1}}</td>
<td width="645" style="background-color:#3F9AB5;padding:10px; vertical-align: top; color: white;">{{$item->question}}</td>
</tr>
<tr>
<td colspan="2" width="700" style="vertical-align: top; font-style: italic;font-size: 8pt; color: black; font-weight: normal; padding: 5px 0px 5px 67px;font-family: Verdana, Geneva, Tahoma, sans-serif ">{{$item->commentaire}}</td>
</tr>
</tbody>
</table>
<table style="margin-left: 66px; border-spacing:2px 2px !important;border-collapse:separate !important;">
<tbody id="{{$item->id}}">
<tr>
<td><textarea name="{{$item->id."_ouverte"}}" cols="80" rows="5"></textarea></td>
</tr>
</tbody>
</table>
@break
@default
@endswitch
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="card-footer bg-whitesmoke text-md-right" hidden>
<button class="btn btn-primary" id="save-btn">Save Changes</button>
<button class="btn btn-secondary" type="button">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
@endsection
@section('js') google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.load("current", {packages:["corechart"]}); google.charts.load('current', {'packages':['gauge']}); //google.charts.setOnLoadCallback(drawBarChart); //google.charts.setOnLoadCallback(drawPieChart);
function drawBarChart(id,tab) {
let displayId = "";
let name = id.split('_');
switch (name[0]) {
case 'uniqueBar':
displayId = 'uniqueBarAffiche_' + name[1];
break;
case 'MultiBar':
displayId = 'MultiBarAffiche_' + name[1];
break;
case 'numericClassBar':
displayId = 'numericClassBarAffiche_' + name[1];
break;
case 'NumericBar':
displayId = 'NumericBarAffiche_' + name[1];
break;
default :
break;
}
// convert string to array
let dataArray = [['Choix', 'Population',]];
for (let x in tab) {
//console.log(x);
//console.log(tab[x]);
dataArray.push([x,tab[x]])
}
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'Choix'
}
};
var chart = new google.visualization.BarChart(document.getElementById(displayId));
chart.draw(data, options);
}
function drawPieChart(id,tab) {
//console.log(id);
let displayId = "";
let name = id.split('_');
switch (name[0]) {
case 'uniquePie':
displayId = 'uniquePieAffiche_' + name[1];
break;
case 'MultiPie':
displayId = 'MultiPieAffiche_' + name[1];
break;
case 'echelleTextePie':
displayId = 'echelleTextePieAffiche_' + name[1];
break;
case 'numericClassPie':
displayId = 'numericClassPieAffiche_' + name[1];
break;
case 'NumericPie':
displayId = 'NumericPieAffiche_' + name[1];
break;
default :
break;
}
// convert string to array
let dataArray = [['Choix', 'Population',]];
for (let x in tab) {
//console.log(x);
//console.log(tab[x]);
dataArray.push([x,tab[x]])
}
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById(displayId));
chart.draw(data, options);
}
function drawGauChart(id,tab) {
//console.log(id);
let displayId = "";
let name = id.split('_');
switch (name[0]) {
case 'MultiGau':
displayId = 'MultiGauAffiche_' + name[1];
break;
default :
break;
}
// convert string to array
let dataArray = [['Choix', 'Population',]];
for (let x in tab) {
//console.log(x);
//console.log(tab[x]);
dataArray.push([x,tab[x]])
}
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById(displayId));
chart.draw(data, options);
}
function drawColChart(id,tab) {
//console.log(id);
let displayId = "";
let name = id.split('_');
switch (name[0]) {
case 'echelleTexteCol':
displayId = 'echelleTexteColAffiche_' + name[1];
break;
default :
break;
}
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1],
[{v: [9, 0, 0], f: '9 am'}, 2],
[{v: [10, 0, 0], f:'10 am'}, 3],
[{v: [11, 0, 0], f: '11 am'}, 4],
[{v: [12, 0, 0], f: '12 pm'}, 5],
[{v: [13, 0, 0], f: '1 pm'}, 6],
[{v: [14, 0, 0], f: '2 pm'}, 7],
[{v: [15, 0, 0], f: '3 pm'}, 8],
[{v: [16, 0, 0], f: '4 pm'}, 9],
[{v: [17, 0, 0], f: '5 pm'}, 10],
]);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById(displayId));
chart.draw(data, options);
}
function drawComChart(id,tab) {
//console.log(id);
let displayId = "";
let name = id.split('_');
switch (name[0]) {
case 'priorisation':
displayId = 'priorisationAffiche_' + name[1];
break;
default :
break;
}
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById(displayId));
chart.draw(data, options);
}
</script>
<!-- Page Specific JS File -->
<script>
$().ready(function () {
var $filter = $("#filter");
let currentP = $filter.offset().top;
let paddingBottom = 25;
let $content = $("#content");
$(window).scroll(function () {
console.log($content.height(), $(window).scrollTop() - currentP + $filter.height() + $content.offset().top - currentP)
if ($(window).scrollTop() >= currentP) {
$filter
.stop()
.animate({"marginTop": ($(window).scrollTop() - currentP + paddingBottom)}, "slow");
} else if ($(window).scrollTop() < currentP) {
$filter
.stop()
.animate({"marginTop": (0)}, "slow");
}
});
});
</script>
<script>
document.querySelector('#hidden').addEventListener("click",(e)=>{
e.preventDefault();
e.stopPropagation();
let div = document.querySelector('#content');
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
});
</script>
@endsection
Posté il y a 6 mois
Larabiz
Malheureusement, ta question est incompréhensible et tes exemples de code inutiles. Peux-tu essayer de reformuler tout ça de manière générique et avec des exemples de code minimalistes ?
— Benjamin de Larabiz
Posté il y a 6 mois
simonnguena
Oui en effet je conçois un site de questionnaire en Laravel, dont j'ai 6 types de questions : les questions de type coche unique, de type coche multiple, de type échelle tetxte, de type numérique, de type numérique classé et de type priorisation. Sauf qu'à la suite des reponses que selectionnera les votants, je voudrais qu'en ressortant les reponses, celles ci soient renvoyées par de vues graphiques selon les reponses de participants. Ainsi, Pourles reponses de type coche unique ce sera les basic bar chart et le donut les coches mulitipes, les basic bar chart et les donut les échelles textes, ce sera les Basic column chart et les donut les numériques, les basic bar chart et les donut les numériques classés, les basic column chart et les donut et pour les reponses de type priorisation, ce sera les Combo chart. Pour résumer, j'ai besoin d'utiliser la librairie Google chart et la rendre dynamique selon les choix entrés en BD suite aux vote des contributeurs
Posté il y a 5 mois
Vous ne pouvez pas répondre à ce sujet.