Aiuto e supporto ai creatori di forum Forumattivo. Creare un forum e amministrarlo. Scopri nuove guide, nuovi tutoriali, nuove astuzie nel supporto di Forumattivo

Visualizza il risultato di un sondaggio come grafici

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Argomenti e Messaggi (Topic e Post)


Tutorial Visualizza il risultato di un sondaggio come grafici

Messaggio Da Niko Sab 20 Feb 2021 - 22:22

Visualizza il risultato di un sondaggio come grafici


Questo tutorial mostra come modificare la visualizzazione dei risultati del sondaggio in un grafico circolare o a barre. Questo tutorial richiede di essere il fondatore del forum, essendo necessaria una modifica dei templates.

Senza modifiche installate

Visualizza il risultato di un sondaggio come grafici 4yIXD8M

Dopo l'installazione:

Visualizza il risultato di un sondaggio come grafici Z2vdLsJ

Oppure:
Visualizza il risultato di un sondaggio come grafici Mw8Dh02

Visualizza come grafico a torta

Pannello di amministrazione ► Visualizzazione ► Templates- Generale

Versione PhpBB2

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<tr>
  <td class="row2" colspan="2"><br clear="all" />
          <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:-24px;">{CLOSE_POLL}</span>
          <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
          <div class="gen" align="center">
            {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
            <!-- BEGIN cancel_vote -->
              -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
            <!-- END cancel_vote -->
          </div>
          <br />
  </td>
</tr>

Versione PhpBB3

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<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:-24px;">{CLOSE_POLL}</span>
          <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
          <div class="gen" align="center">
            {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
            <!-- BEGIN cancel_vote -->
              -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
            <!-- END cancel_vote -->
          </div>
          <br />
    </div>
  </div>
</div>

Versione PunBB

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<div class="main-content frm">
          <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:-24px;">{CLOSE_POLL}</span>
          <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
          <div class="gen" align="center">
            {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
            <!-- BEGIN cancel_vote -->
              -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
            <!-- END cancel_vote -->
          </div>
          <br />
</div>

Versione Invision

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<div class="main">
  <div class="box-content row1">
          <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:-24px;">{CLOSE_POLL}</span>
          <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
          <div class="gen" align="center">
            {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
            <!-- BEGIN cancel_vote -->
              -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
            <!-- END cancel_vote -->
          </div>
          <br />
  </div>
</div>

Versione ModernBB

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<div class="panel">
  <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:-24px;">{CLOSE_POLL}</span>
    <div id="piechart_3d" style="width: 450px; height: 210px; margin:auto;"></div>
    <div class="gen" align="center">
      {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
      <!-- BEGIN cancel_vote -->
        -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
      <!-- END cancel_vote -->
    </div>
    <br />
</div>

Visualizza come grafico a barre

Versione PhpBB2

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<tr>
  <td class="row2" colspan="2"><br clear="all" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);
 
      function drawStuff() {
        var data = google.visualization.arrayToDataTable([
          ['Réponse', 'Valeur'],
          <!-- BEGIN poll_option -->
          ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
          <!-- END poll_option -->
        ]);
 
        var options = {
          legend: { position: 'none' },
          backgroundColor: 'transparent',
          vAxis: {
            format: '#\'%\'',
          },
          hAxis: {
            title: ' ',
          },
          chartArea: {
            backgroundColor: 'transparent',
          },
          chart: {
            title: "{POLL_QUESTION}",
          },
          bar: { groupWidth: "90%" }
        };
 
        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
     
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
    <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
    <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
    <div class="gen" align="center">
      {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
      <!-- BEGIN cancel_vote -->
        -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
      <!-- END cancel_vote -->
    </div>
    <br />
  </td>
</tr>

Versione PhpBB3

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<div class="panel">
  <div class="inner">
    <div class="content">
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load('current', {'packages':['bar']});
        google.charts.setOnLoadCallback(drawStuff);
   
        function drawStuff() {
          var data = google.visualization.arrayToDataTable([
            ['Réponse', 'Valeur'],
            <!-- BEGIN poll_option -->
            ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
            <!-- END poll_option -->
          ]);
 
          var options = {
            legend: { position: 'none' },
            backgroundColor: 'transparent',
            vAxis: {
              format: '#\'%\'',
            },
            hAxis: {
              title: ' ',
            },
            chartArea: {
              backgroundColor: 'transparent',
            },
            chart: {
              title: "{POLL_QUESTION}",
            },
            bar: { groupWidth: "90%" }
          };
 
          var chart = new google.charts.Bar(document.getElementById('top_x_div'));
       
          chart.draw(data, google.charts.Bar.convertOptions(options));
        };
      </script>
      <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
      <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
      <div class="gen" align="center">
        {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
        <!-- BEGIN cancel_vote -->
          -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
        <!-- END cancel_vote -->
      </div>
      <br />
    </div>
  </div>
</div>

Versione PunBB

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<div class="main-content frm">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawStuff);
 
    function drawStuff() {
      var data = google.visualization.arrayToDataTable([
        ['Réponse', 'Valeur'],
        <!-- BEGIN poll_option -->
        ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
        <!-- END poll_option -->
      ]);
 
      var options = {
        legend: { position: 'none' },
        backgroundColor: 'transparent',
        vAxis: {
          format: '#\'%\'',
        },
        hAxis: {
          title: ' ',
        },
        chartArea: {
          backgroundColor: 'transparent',
        },
        chart: {
          title: "{POLL_QUESTION}",
        },
        bar: { groupWidth: "90%" }
      };
 
      var chart = new google.charts.Bar(document.getElementById('top_x_div'));
   
      chart.draw(data, google.charts.Bar.convertOptions(options));
    };
  </script>
  <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
  <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
  <div class="gen" align="center">
    {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
    <!-- BEGIN cancel_vote -->
      -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
    <!-- END cancel_vote -->
  </div>
  <br />
</div>

Versione Invision

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<div class="main">
  <div class="box-content row1">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);
 
      function drawStuff() {
        var data = google.visualization.arrayToDataTable([
          ['Réponse', 'Valeur'],
          <!-- BEGIN poll_option -->
          ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
          <!-- END poll_option -->
        ]);
 
        var options = {
          legend: { position: 'none' },
          backgroundColor: 'transparent',
          vAxis: {
            format: '#\'%\'',
          },
          hAxis: {
            title: ' ',
          },
          chartArea: {
            backgroundColor: 'transparent',
          },
          chart: {
            title: "{POLL_QUESTION}",
          },
          bar: { groupWidth: "90%" }
        };
 
        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
     
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
    <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
    <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
    <div class="gen" align="center">
      {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
      <!-- BEGIN cancel_vote -->
        -  <a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
      <!-- END cancel_vote -->
    </div>
    <br /> 
  </div>
</div>

Versione ModernBB

Modifica il modello viewtopic_poll_result e sostituisci tutto il suo contenuto con questo:
Codice:
<div class="panel">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);
 
      function drawStuff() {
        var data = google.visualization.arrayToDataTable([
          ['Réponse', 'Valeur'],
          <!-- BEGIN poll_option -->
          ["{poll_option.POLL_OPTION_CAPTION}",  parseInt('{poll_option.POLL_OPTION_PERCENT}'.replace('%','')) ],
          <!-- END poll_option -->
        ]);
 
        var options = {
          legend: { position: 'none' },
          backgroundColor: 'transparent',
          vAxis: {
            format: '#\'%\'',
          },
          hAxis: {
            title: ' ',
          },
          chartArea: {
            backgroundColor: 'transparent',
          },
          chart: {
            title: "{POLL_QUESTION}",
          },
          bar: { groupWidth: "90%" }
        };
 
        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
   
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
    <span style="float:right; margin-left:-24px;">{CLOSE_POLL}</span>
    <div id="top_x_div" style="width: 450px; height: 210px; margin:auto; padding-top: 20px;"></div>
    <div class="gen" align="center">
      {L_TOTAL_VOTES} : <strong>{TOTAL_VOTES}</strong>
      <!-- BEGIN cancel_vote -->
        - &nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
      <!-- END cancel_vote -->
    </div>
    <br />
</div>

Note

Questo tutorial utilizza lo strumento Google Charts, il che significa che la tua conoscenza di javascript ti consentirà di modificare i codici sopra proposti per personalizzare ulteriormente la visualizzazione dei tuoi sondaggi.


Tutorial creato da Walt e Tradotto da Niko


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 28
Messaggi : 9573
Località : Provincia di Varese

https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial :: Argomenti e Messaggi (Topic e Post)

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.