Redesign of Poll Results (Pie or Bar Charts) Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    Redesign of Poll Results (Pie or Bar Charts)

    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51508
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°1

    Tutorial Redesign of Poll Results (Pie or Bar Charts)

    Post by SLGray August 7th 2017, 3:03 am

    Redesign of Poll Results (Pie or Bar Charts)
           
           
    This tutorial will show you how to redesign the appearance of poll results on your forum, in order to get a pie chart or a bar chart.  
    You have to be the forum founder, as template modifications are required.  This will work on all versions without heavy modified templates.

    This is the default appearance of poll results on your forum :
    Redesign of Poll Results (Pie or Bar Charts) 4yIXD8M

    This is how it will be displayed with this tutorial (pie chart version) :
    Redesign of Poll Results (Pie or Bar Charts) Z2vdLsJ

    or (bar chart version) :
    Redesign of Poll Results (Pie or Bar Charts) Mw8Dh02

    Pie Chart Version

    Administration panel > Display > Templates > General
    Edit viewtopic_poll_result template and replace the content with below codes.

    phpBB 2
    Code:
        <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 -->
                    &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
                    <!-- END cancel_vote -->
                  </div>
                  <br />
         </td>
        </tr>

    phpBB 3
    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:-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 -->
                &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
                <!-- END cancel_vote -->
              </div>
              <br />
        </div>
      </div>
    </div>

    punBB
    Code:
    <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 -->
                &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
                <!-- END cancel_vote -->
              </div>
              <br />
    </div>

    Invision
    Code:
    <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 -->
                &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
                <!-- END cancel_vote -->
              </div>
              <br />
      </div>
    </div>

    ModernBB
    Code:
    <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 -->
          &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
          <!-- END cancel_vote -->
        </div>
        <br />
    </div>

    Bar Chart Version

    Administration panel > Display > Templates > General
    Edit viewtopic_poll_result template and replace the content with below codes.

    phpBB 2
    Code:
    <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 -->
          &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
          <!-- END cancel_vote -->
        </div>
        <br />
      </td>
    </tr>

    phpBB 3
    Code:
    <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 -->
            &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
            <!-- END cancel_vote -->
          </div>
          <br />
        </div>
      </div>
    </div>

    punBB
    Code:
    <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 -->
        &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
        <!-- END cancel_vote -->
      </div>
      <br />
    </div>

    Invison
    Code:
        <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 -->
              &nbsp;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
              <!-- END cancel_vote -->
            </div>
            <br />
          </div>
        </div>

    ModernBB
    Code:
    <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;&nbsp;-&nbsp;&nbsp;<a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a>
          <!-- END cancel_vote -->
        </div>
        <br />
        </div>

    Note:  

    This tutorial uses the Google Charts Tool, which means you are able to edit this codes in order to customize more your poll appearance, with javascript knowledge.    
           
           

           
    This tutorial was written by Walt.
           


    Last edited by SLGray on August 12th 2017, 6:16 am; edited 2 times in total



    Redesign of Poll Results (Pie or Bar Charts) Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51508
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°2

    Tutorial Re: Redesign of Poll Results (Pie or Bar Charts)

    Post by SLGray August 12th 2017, 6:15 am

    I forgot to post that this will work on all versions without heavy modified templates.



    Redesign of Poll Results (Pie or Bar Charts) Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top