Afficher les participants sur un sondage sous forme de graphique

[jpb-admin]

Je viens d'essayer d'utiliser la nouveauté que vous proposez à savoir la "possibilité d'afficher les participants du sondage et, éventuellement, de leurs choix individuels", mais malheureusement il semble y avoir un conflit avec une de vos précédentes astuces : "Afficher le résultat d'un sondage sous forme de graphiques".

https://forum.forumactif.com/t391895-afficher-le-resultat-d-un-sondage-sous-forme-de-graphiques?highlight=personnaliser+sondage

Cette astuce de personnalisation en graphique fonctionne parfaitement bien sur mon forum, mais la nouvelle astuce d'affichage des participants ne semble pas vouloir coopérer.

Si vous avez une solution je suis preneur, sinon je m'en passerais ....

[chattigre]

Bonjour,

Il faut mettre à jour les templates personnalisés, sauf que les MAJ à faire n'ont pas été communiquées dans l'annonce !

Pourriez-vous nous transmettre votre template viewtopic_poll_result et, si personnalisé, viewtopic_poll_ballot ?

Bonne journée

[jpb-admin]

Merci pour votre réponse et ci-joint donc les deux fichiers de template.

viewtopic_poll_result

Code:

<div class="panel">
  <div class="inner">
  <div class="content">
         <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
         <style> svg > g > g:last-child { pointer-events: none } </style>
         <script>
           google.charts.load("current", {packages:["corechart"]});
           google.charts.setOnLoadCallback(drawChart);
           function drawChart() {
             var data = google.visualization.arrayToDataTable([
               ['Answer', 'Value'],
               <!-- 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>
         <span style="float:right; margin-left:-25px;">{CLOSE_POLL}</span>
         <div id="piechart_3d" style="width: 850px; height: 400px; margin:right;"></div>
         <div class="gen" align="center">
           {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
           <!-- BEGIN cancel_vote -->
           &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
           <!-- END cancel_vote -->
         </div>
         <br />
    </div>
 </div>
</div>

__________________________________________________________________________________________

viewtopic_poll_ballot

Code:

<form method="post" action="{S_POLL_ACTION}">
<div class="panel">
<div class="inner">
<span class="corners-top"><span></span></span>
<div class="content">
<h2 class="left-box h3" style="width: 97%;">{POLL_QUESTION}</h2>
<p class="right-box">{CLOSE_POLL}</p>
<div class="clear"></div>
<fieldset class="polls">
<!-- BEGIN poll_option -->
<dl>
<dt>{poll_option.POLL_OPTION_CAPTION}</dt>
<dd><input type="{poll_option.POLL_TYPE_BUTTON}" name="vote_id[]" value="{poll_option.POLL_OPTION_ID}" />&nbsp;</dd>
</dl>
<!-- END poll_option -->
<dl style="border-top:none">
<dt>&nbsp;</dt>
<dd><input type="submit" name="submit" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
</dl>
<dl style="border-top:none">
<dt>&nbsp;</dt>
<dd class="resultbar"><strong><a href="{U_VIEW_RESULTS}">{L_VIEW_RESULTS}</a></strong></dd>
</dl>
<!-- BEGIN warning_public_votes -->
{warning_public_votes.L_WARNING_PUBLIC_VOTES}
<br/>
<!-- END warning_public_votes -->
{L_VOTE_EXPIRE}
{S_HIDDEN_FIELDS}
</fieldset>
</div>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</form>

Cordialement.

[chattigre]

Merci

Le viewtopic_poll_ballot est identique au template par défaut, pas de mise à jour de ce côté donc...

Concernant le viewtopic_poll_result, pour afficher les votants de chaque option il faudrait réadapter le code du graphique, donc je ne sais pas ce que vous voulez de ce côté si si c'est possible ^^

Mais votre template aurait bien besoin d'une petite MAJ quand je vois comment il est constitué

Essayez déjà ceci, et dites-moi si quelque chose ne convient pas :

Code:

<div class="panel">
  <div class="inner">
    <div class="content">
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <style>
  svg > g > g:last-child { pointer-events: none }
      </style>
      <script>
  google.charts.load("current", {packages:["corechart"]});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
              var data = google.visualization.arrayToDataTable([
                ['Answer', 'Value'],
                <!-- 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>
      <span style="float:right; margin-left:-25px;">{CLOSE_POLL}</span>
      <div id="piechart_3d" style="width: 850px; height: 400px; margin:right;">
      </div>
      <div class="gen" align="center">{L_TOTAL_VOTES} :
        <strong>{TOTAL_VOTES}</strong>
        <!-- BEGIN cancel_vote -->&nbsp;&nbsp;-&nbsp;&nbsp;
        <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
        <br/>
        <!-- END cancel_vote -->
        <!-- BEGIN switch_back_to_vote -->&nbsp;&nbsp;-&nbsp;&nbsp;
        <b>
          <a href="{switch_back_to_vote.U_BACK_TO_VOTE}">{switch_back_to_vote.L_BACK}</a>
        </b>
        <br/>
        <!-- END switch_back_to_vote -->
        <div>{ALL_POLL_VOTERS_LIST}</div>
        <div>{L_VOTE_EXPIRE}</div>
        <!-- BEGIN switch_hide_result -->
        <div id="hide_result_msg">{L_POLL_HIDE_RESULT}</div>
        <!-- END switch_hide_result -->
      </div>
      <br />
    </div>
  </div>
</div>

 

Bonne journée

[jpb-admin]

Bonjour "chattigre" et merci pour cette réponse rapide.

Concernant mon template "viewtopic_poll_result", je l'ai donc remplacé par celui que vous m'avez fourni, cela fonctionne parfaitement comme auparavant mais sans rien changer, c'est à dire que l'affichage des votants de chaque option n'est toujours pas pris en compte.

Voici un exemple ici :
https://fanclub-vaillant.forumactif.com/t49-l-ancien-studio-graton

Si il faudrait réadapter le code du graphique pour que cela fonctionne mais tout en restant dans ce type de présentation, j'imagine que ça vous demanderais trop de travail et donc suivant votre avis je laisserais tombé.

Merci encore et bonne journée.

[chattigre]

Concernant mon template "viewtopic_poll_result", je l'ai donc remplacé par celui que vous m'avez fourni, cela fonctionne parfaitement comme auparavant mais sans rien changer, c'est à dire que l'affichage des votants de chaque option n'est toujours pas pris en compte.

Voici un exemple ici :
https://fanclub-vaillant.forumactif.com/t49-l-ancien-studio-graton

Si il faudrait réadapter le code du graphique pour que cela fonctionne mais tout en restant dans ce type de présentation, j'imagine que ça vous demanderais trop de travail et donc suivant votre avis je laisserais tombé.

Merci encore et bonne journée.

Parfait, ça, c'est bon alors.

Non, je ne pense pas que le reste soit impossible, mais personnellement je ne saurais comment le réaliser...

Aussi, comment voulez-vous afficher les votants ? Au survol du "camembert" correspondant ?

Je passe la main, je ne doute pas que quelqu'un pourra vous aider !

[jpb-admin]

Aussi, comment voulez-vous afficher les votants ? Au survol du "camembert" correspondant ?

Je passe la main, je ne doute pas que quelqu'un pourra vous aider !

Non pas au survol du camembert, mais comme l'exemple fourni par FA dans son astuce :



Donc idem mais on remplace les barres par le camembert, si possible ça serait le top.

Merci pour un courageux qui se pencherait sur le problème.

[Toryudo]

Bonjour !
Alors je ne suis pas non plus sûr de comprendre ce que vous voulez comme rendu final, mais si c'est juste rajouter les lignes avec les votants sous le camembert, on pourra se contenter de ça :

Code:

<div class="panel">
   <div class="inner">
      <div class="content">
         <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([
                  ['Answer', 'Value'],
                  <!-- 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>
         <span style="float:right; margin-left:-25px;">{CLOSE_POLL}</span>
         <div id="piechart_3d" style="width: 850px; height: 400px; margin:right;"></div>

         <fieldset class="polls">
            <!-- BEGIN poll_option -->
            <dl>
               <dt><label>{poll_option.POLL_OPTION_CAPTION}</label></dt>
               <dd class="option_voters_list"><!-- BEGIN option_voters -->{poll_option.option_voters.POLL_OPTION_VOTERS}<!-- END option_voters --></dd>
            </dl>
            <!-- END poll_option -->
         </fieldset>                 
         <div class="gen" align="center">
            {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
            <!-- BEGIN cancel_vote -->&nbsp;&nbsp;-&nbsp;&nbsp;
            <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a><br/>
            <!-- END cancel_vote -->
                 <!-- BEGIN switch_back_to_vote -->&nbsp;&nbsp;-&nbsp;&nbsp;
            <b><a href="{switch_back_to_vote.U_BACK_TO_VOTE}">{switch_back_to_vote.L_BACK}</a></b><br/>
            <!-- END switch_back_to_vote -->
            <div>{ALL_POLL_VOTERS_LIST}</div>
            <div>{L_VOTE_EXPIRE}</div>
            <!-- BEGIN switch_hide_result -->
            <div id="hide_result_msg">{L_POLL_HIDE_RESULT}</div>
            <!-- END switch_hide_result -->
         </div>
      </div>
   </div>
</div>

Ce n'est pas spécialement beau, c'est juste pour savoir si ça se rapproche de ce que vous voulez ou si je fais fausse route.

[jpb-admin]

Merci "Toryudo" pour avoir étudié le problème, mais le résultat n'est pas probant.



Comme on peut voir sur cette capture d'écran, ton script ne rajouter pas les lignes avec les votants sous le camembert mais les lignes avec les choix de votes mais avec des barres vides en regard.

On peut voir sur la capture qu'il y a eu 20 votes mais on ne sait pas de qui alors que le script et censé proposer cela.

Merci quand même d'avoir essayé.

[Toryudo]

Bonjour !
En fait, ces "barres" contiennent la liste des votants, c'est juste un visuel par défaut qui rend un peu étrange à cause du fait qu'on retire les barres avec les pourcentages de votes. Voilà ce que ça donne chez moi :



Du coup, je vais essayer de rajouter quelques lignes de code pour que ces barres de votants ne s'affichent pas si l'option n'est pas activée, qu'on n'affiche rien quand il n'y a rien à afficher. Par contre, le fait qu'on ne voit pas qui a voté pour quoi chez vous... Pourriez-vous m'indiquer comment vous avez procédé avec ce sondage ? Qu'avez vous coché dans les options qui s'offraient à vous :



Je reviens vers vous dès que j'ai trouvé une solution sur le problème que j'ai décrit ci-dessus !

[jpb-admin]

Bonjour "Toryudo" et merci pour l'intérêt que vous portez à mon problème.

Avec votre image, j'ai maintenant compris le résultat que devrait donner ces "barres" qui contiennent la liste des votants.

Pour ce qui est de votre question sur le choix des options du sondage, j'ai coché la case "oui" pour afficher la liste des membres ayant voté pour chaque choix, et chez moi ça donne cela avec le template original :



Avec votre template modifié voici le résultat :



Je pense que l'on doit être en conflit avec le JS (Voir qui a participé au sujet et le nombre de participants) de cette astuce publiée par FA :
https://forum.forumactif.com/t405689-nouveaute-toutes-versions-voir-qui-a-participe-au-sujet-et-le-nombre-de-participants

La présentation circulaire des votants seuls me conviendrait, même si on ne sait pas quel est leur vote, mais la liste déroulante est tronquée comme on peut voir sur la capture d'écran.

Je vous laisse seul juge car mes compétences sont limitées et désolé pour le travail, encore merci pour tout.

[chattigre]

Bonjour,

Ce que je ne comprends pas, c'est surtout comment vous voulez que les membres ayant choisi chaque option soit affichés.

Par défaut, les résultats sondages se présentent sous forme de barres, il est donc aisé d'indiquer les votants sous chaque barre.

Mais avec votre camembert issu d'une personnalisation, sans même parler de technique, je ne vois pas où vous aimeriez mettre le détail des votes ?

La liste globale des participants a bien sa place en dessous, mais le détail... ?

Bonne journée

[jpb-admin]

Bonjour chattigre,

Comme je le précise plus haut je suis conscient que le problème n'est pas simple à résoudre.

En fait je me contenterais de la liste globale des participants de forme circulaire en dessous du camembert, mais sans la ventilation du détail des votes par choix possible comme cette image :

Sachant qu'au passage de la souris sur le mini avatar circulaire une infobulle donne le nom du votant.
Par contre sur ce sondage 9 participants ont voté mais la présentation du JS n'en affiche que 4 + une liste déroulante pour les 5 restants., or il se trouve que cette liste est tronquée.

Donc le camembert plus en dessous une liste complète des votants serait le top, si possible bien sur.

[chattigre]

Re,

Donc dans ce cas, il ne faut tout simplement pas activer l'option "afficher les membres ayant voté pour chaque choix".

L'affichage des x premiers avatars est également quelque chose de natif, qu'il ne semble pas approprié de modifier, cela étant présent pour éviter de surcharger l'affichage avec x avatars...
En revanche, je vois bien le souci d'affichage de la liste, le rencontrez-vous avec ma version de Template ?
Si je force les templates par défaut, le problème disparait en tout cas...

Bonne journée

[jpb-admin]

Merci pour toutes ces précisions Chattigre,

J'ai donc refait des tests en désactivant l'option "afficher les membres ayant voté pour chaque choix".
J'ai aussi remplacé par le template par défaut pour suivre votre conseil et voici le résultat :



Effectivement la liste se déroule vers le haut au lieu du bas et du coup tous les noms sont visibles et cliquables.
Par contre on revient à la présentation par barres et le camembert disparait.

Mais on serait proche de la solution semble-t-il.

[jpb-admin]

Bonjour "Chattigre" et "Toryudo"

Encore merci pour votre aide.

J'ai de mon côté essayé de voir le JS (Voir qui a participé au sujet et le nombre de participants) de cette astuce publiée par FA :
https://forum.forumactif.com/t405689-nouveaute-toutes-versions-voir-qui-a-participe-au-sujet-et-le-nombre-de-participants

Bien que je subodore d'après vos explications et les résultats obtenus que la solution devrait vraisemblablement se trouver dans ce JS, mes compétences limitées ne m'ont pas permis de résoudre le conflit et donc mon problème reste entier.

Cordialement.

[chattigre]

Bonjour "Chattigre" et "Toryudo"

Encore merci pour votre aide.

J'ai de mon côté essayé de voir le JS (Voir qui a participé au sujet et le nombre de participants) de cette astuce publiée par FA :
https://forum.forumactif.com/t405689-nouveaute-toutes-versions-voir-qui-a-participe-au-sujet-et-le-nombre-de-participants

Bien que je subodore d'après vos explications et les résultats obtenus que la solution devrait vraisemblablement se trouver dans ce JS, mes compétences limitées ne m'ont pas permis de résoudre le conflit et donc mon problème reste entier.

Cordialement.

Bonjour,

Non, le rendu visuel est proche, mais cette fonctionnalité n'est pas un Javascript et est totalement indépendante de la nouvelle fonction sur les sondages.

Si on repart du template de ce message : https://forum.forumactif.com/t406631-afficher-les-participants-sur-un-sondage-sous-forme-de-graphique#3389846

Quels sont les problèmes rencontrés par rapport à ce que vous souhaitez finalement obtenir ?

La liste des participants est coupée ? Y a-t-il d'autres choses ?

Cordialement

[jpb-admin]

Bonjour,
Si on repart du template de ce message : https://forum.forumactif.com/t406631-afficher-les-participants-sur-un-sondage-sous-forme-de-graphique#3389846
Quels sont les problèmes rencontrés par rapport à ce que vous souhaitez finalement obtenir ?
La liste des participants est coupée ? Y a-t-il d'autres choses ?
Cordialement

Bonjour,
Avec votre Template on est vraiment proche de ce que je désirerais obtenir à savoir ceci :



Si la liste des participants qui est coupée pouvait se dérouler vers le haut comme ici :



Tout serait parfait pour moi.
Cordialement.

[jpb-admin]

Bonjour,

Décidément, changer le sens de déroulement de la liste des participants du bas vers le haut semble être un casse tête plus ardu qu'un néophyte comme moi ne l'aurait pensé.

Je suis désolé messieurs de vous tracasser les méninges, mais si cette demande est trop compliquée, n'hésitez pas à me le dire, je passerais le sujet en résolu en faisant une croix sur mon projet trop farfelu.

Cordialement.

[Toryudo]

Bonjour !
Non, c'est finalement simple, j'étais personnellement pris par d'autres sujets
Il suffit de mettre ce CSS personnalisé en plus et tout sera réglé :

Code:

.poster-list .poster .poster-more-list {
  bottom: 0;
  top: initial !important;
}

Testé sur un page identique à https://fanclub-vaillant.forumactif.com/t49-l-ancien-studio-graton, ça me semble fonctionner !

[jpb-admin]

Waowww, merci beaucoup Toryudo,

C'est exactement la solution qu'il me fallait, ça fonctionne nickel-chrome.

Cordialement.