[phpBB 3.2.x] Afficher le résultat d'un sondage sous forme graphique

Toutes les documentations phpBB seront ici.
Verrouillé
Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :
Contacter Dakin Quelia

[phpBB 3.2.x] Afficher le résultat d'un sondage sous forme graphique

Message par Dakin Quelia »

» Afficher le résultat d'un sondage sous forme graphique
A l'aide de cette documentation, vous allez pouvoir améliorer l'affichage des sondages en lui donnant un tout nouveau style et ceci à l'aide de l'outils Google Charts.
» 1. Modifications des fichiers templates

Nous allons commencer par faire appel au script de Google et pour ce faire, nous allons modifier le fichier d'en-tête du style.

Ouvrez le fichier « styles/{VOTRE_THEME}/template/overall_header.html ».

Cherchez :

Code : Tout sélectionner

</head>
Avant, ajoutez :

Code : Tout sélectionner

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Ensuite, nous allons modifier la partie qui nous intéresse, à savoir la partie sondage du sujet.

Ouvrez le fichier « styles/{VOTRE_THEME}/template/viewtopic_body.html ».

Cherchez :

Code : Tout sélectionner

<!-- IF S_HAS_POLL -->
	<form method="post" action="{S_POLL_ACTION}" data-ajax="vote_poll" class="topic_poll">

	<div class="panel">
		<div class="inner">

		<div class="content">
			<h2 class="poll-title"><!-- EVENT viewtopic_body_poll_question_prepend -->{POLL_QUESTION}<!-- EVENT viewtopic_body_poll_question_append --></h2>
			<p class="author">{L_POLL_LENGTH}<!-- IF S_CAN_VOTE and L_POLL_LENGTH --><br /><!-- ENDIF --><!-- IF S_CAN_VOTE --><span class="poll_max_votes">{L_MAX_VOTES}</span><!-- ENDIF --></p>

			<fieldset class="polls">
			<!-- BEGIN poll_option -->
				<!-- EVENT viewtopic_body_poll_option_before -->
				<dl class="<!-- IF poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF --><!-- IF poll_option.POLL_OPTION_MOST_VOTES --> most-votes<!-- ENDIF -->"<!-- IF poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF --> data-alt-text="{L_POLL_VOTED_OPTION}" data-poll-option-id="{poll_option.POLL_OPTION_ID}">
					<dt><!-- IF S_CAN_VOTE --><label for="vote_{poll_option.POLL_OPTION_ID}">{poll_option.POLL_OPTION_CAPTION}</label><!-- ELSE -->{poll_option.POLL_OPTION_CAPTION}<!-- ENDIF --></dt>
					<!-- IF S_CAN_VOTE --><dd style="width: auto;" class="poll_option_select"><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
					<dd class="resultbar<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT_REL};">{poll_option.POLL_OPTION_RESULT}</div></dd>
					<dd class="poll_option_percent<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd>
				</dl>
				<!-- EVENT viewtopic_body_poll_option_after -->
			<!-- END poll_option -->

				<dl class="poll_total_votes<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->">
					<dt>&nbsp;</dt>
					<dd class="resultbar">{L_TOTAL_VOTES}{L_COLON} <span class="poll_total_vote_cnt">{TOTAL_VOTES}</span></dd>
				</dl>

			<!-- IF S_CAN_VOTE -->
				<dl style="border-top: none;" class="poll_vote">
					<dt>&nbsp;</dt>
					<dd class="resultbar"><input type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
				</dl>
			<!-- ENDIF -->

			<!-- IF not S_DISPLAY_RESULTS -->
				<dl style="border-top: none;" class="poll_view_results">
					<dt>&nbsp;</dt>
					<dd class="resultbar"><a href="{U_VIEW_RESULTS}">{L_VIEW_RESULTS}</a></dd>
				</dl>
			<!-- ENDIF -->
			</fieldset>
			<div class="vote-submitted hidden">{L_VOTE_SUBMITTED}</div>
		</div>

		</div>
		{S_FORM_TOKEN}
		{S_HIDDEN_FIELDS}
	</div>

	</form>
	<hr />
<!-- ENDIF -->
Remplacez par :

Code : Tout sélectionner

<!-- IF S_HAS_POLL -->
	<form method="post" action="{S_POLL_ACTION}" data-ajax="vote_poll" class="topic_poll">

	<div class="panel">
		<div class="inner">

		<div class="content">
			<h2 class="poll-title"><!-- EVENT viewtopic_body_poll_question_prepend -->{POLL_QUESTION}<!-- EVENT viewtopic_body_poll_question_append --></h2>
			<p class="author">{L_POLL_LENGTH}<!-- IF S_CAN_VOTE and L_POLL_LENGTH --><br /><!-- ENDIF --><!-- IF S_CAN_VOTE --><span class="poll_max_votes">{L_MAX_VOTES}</span><!-- ENDIF --></p>

			<div class="column1">
				<fieldset class="polls">
				<!-- BEGIN poll_option -->
					<!-- EVENT viewtopic_body_poll_option_before -->
					<dl class="<!-- IF poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF --><!-- IF poll_option.POLL_OPTION_MOST_VOTES --> most-votes<!-- ENDIF -->"<!-- IF poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF --> data-alt-text="{L_POLL_VOTED_OPTION}" data-poll-option-id="{poll_option.POLL_OPTION_ID}">
						<dt style="width: 85%"><!-- IF S_CAN_VOTE --><label for="vote_{poll_option.POLL_OPTION_ID}">{poll_option.POLL_OPTION_CAPTION}</label><!-- ELSE -->{poll_option.POLL_OPTION_CAPTION}<!-- ENDIF --></dt>
						<!-- IF S_CAN_VOTE --><dd style="width: auto;" class="poll_option_select"><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
						<dd class="poll_option_percent<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd>
					</dl>
					<!-- EVENT viewtopic_body_poll_option_after -->
				<!-- END poll_option -->
				</fieldset>
			</div>
			<!-- IF S_DISPLAY_RESULTS -->
			<div class="column2">
				<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
				<style> svg > g > g:last-child { pointer-events: none } </style>
				<script type="text/javascript">
					google.charts.load("current", {packages:["corechart"]});
					google.charts.setOnLoadCallback(drawChart);
					function drawChart() 
					{
						var data = google.visualization.arrayToDataTable([
							['Réponse', 'Valeur'],
							<!-- BEGIN poll_option -->
							["{poll_option.POLL_OPTION_CAPTION}",    {poll_option.POLL_OPTION_RESULT} ],
							<!-- END poll_option -->
						]);
				
						var options = {
							//title: "{POLL_QUESTION}",
							sliceVisibilityThreshold:0,
							backgroundColor: 'transparent',
							is3D: true,
						};
				
						var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
							chart.draw(data, options);
					}
				</script>
				<div id="piechart_3d" style="width: 450px; height: 210px; margin: -35px auto;"></div>
			</div>
			<!-- ENDIF -->
			<div style="width: 100%;">
				<fieldset class="polls">
					<!-- IF S_CAN_VOTE -->
					<dl style="border-top: none;" class="poll_vote">
						<dt>&nbsp;</dt>
						<dd class="resultbar"><input type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
					</dl>
					<!-- ENDIF -->

					<!-- IF not S_DISPLAY_RESULTS -->
					<dl style="border-top: none;" class="poll_view_results">
						<dt>&nbsp;</dt>
						<dd class="resultbar"><a href="{U_VIEW_RESULTS}">{L_VIEW_RESULTS}</a></dd>
					</dl>
					<!-- ENDIF -->
					<dl class="poll_total_votes<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->">
						<dt>&nbsp;</dt>
						<dd class="resultbar">{L_TOTAL_VOTES}{L_COLON} <span class="poll_total_vote_cnt">{TOTAL_VOTES}</span></dd>
					</dl>
					<div class="vote-submitted hidden">{L_VOTE_SUBMITTED}</div>
				</fieldset>
			</div>
		</div>

		</div>
		{S_FORM_TOKEN}
		{S_HIDDEN_FIELDS}
	</div>

	</form>
	<hr />
<!-- ENDIF -->
» 2. Vider le cache

Une fois vos modifications terminées, il ne vous reste plus qu'à vider le cache du forum. Pour cela, rendez-vous dans le panneau d'administration et cliquez sur le bouton « Exécuter maintenant » en face de « Purger le cache ».

» 3. Le résultat

Enfin, nous arrivons à la fin de notre documentation. Voici un aperçu de ce que cela donnera sur votre forum :
sondage-ameliore.png
Haut
Verrouillé

Retourner vers « phpBB »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité