survey/app/views/surveys/result.html.erb

<% 
  data = action_data 
  @survey = data["survey"]
  @chart_data = data["chart_data"]
  @survey_questions = data["survey_questions"]
  @survey_answers = data["survey_answers"]
%>

<% case @survey.result_type %>
<% when QuestionnaireSurvey::ResultChart %>

  <h1><%= @survey.title %> <%= t('survey.chart') %></h1>
  <div>
    <section>
      <div class="o-question">
        <div class="o-question-description">
          <%= t 'survey.results_count' %>: <%= @survey.survey_answers.count %>
        </div>
        <ol class="o-question-list">
          <% index = 1 %>
          <% @survey_questions.each do |question| %>
            <% case question.type %>
            <% when SurveyQuestion::Radio, SurveyQuestion::Check, ::SurveyQuestion::Select %>
              <li>
                <dt><%= "#{index}. #{question.title}" %></dt>
                <dd>
                  <div id="question_chart_<%= question.id.to_s %>"></div>
                </dd>
              </li>
              <% index += 1%>
            <% when SurveyQuestion::Radiogroup %>
              <% question.survey_question_options.each_with_index do |option,i| %>
              <li>
                <dt><%= "#{index}. #{question.title} - #{option.name}" %></dt>
                <dd>
                  <div id="question_chart_<%= question.id.to_s %>_<%= i.to_s %>"></div>
                </dd>
              </li>
              <% index += 1%>
              <% end %>
            <% when SurveyQuestion::DoubleLevelOption %>
              <li>
                <dt><%= "#{index}. #{question.title}" %></dt>
                <dd>
                  <div id="question_chart_<%= question.id.to_s %>"></div>
                </dd>
              </li>
              <% index += 1%>
            <% end %>

          <% end %>
        </ol>
      </div>
    </section>
  </div>
  <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
  <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
  <%= stylesheet_link_tag "survey-result-chart.css" %>
  
  <script type="text/javascript">
    var max_w;
    if (typeof(FusionCharts)!="undefined") {
      $(document).ready(function(){

      FusionCharts.ready(function(){
      max_w = $('.layout-content-box').width()
      <% @survey_questions.each do |question| %>
        <% qid = question.id.to_s %>
        <% case question.type %>
        <% when ::SurveyQuestion::Radio, ::SurveyQuestion::Check, ::SurveyQuestion::Select %>
          var chart_<%= qid %> = generate_fusion_charts('',
                                          '',
                                          <%= @chart_data[qid].to_json.html_safe %>,
                                          'question_chart_<%= qid %>',
                                          'pie2d')
          chart_<%= qid %>.render();
        <% when ::SurveyQuestion::Radiogroup %>
          <% options = Hash[question.survey_question_options.collect{|o| [ o.id.to_s, o.name ] }] %>
          <% i = 0 %>
          <% @chart_data[qid].each do |option, groups| %>
            var chart_<%= qid %>_<%= i.to_s %> = generate_fusion_charts('',
                                          '',
                                          <%= groups.to_json.html_safe %>,
                                          'question_chart_<%= qid %>_<%= i.to_s %>',
                                          'pie2d')
            chart_<%= qid %>_<%= i.to_s %>.render();

            <% i = i + 1 %>
          <% end %>
        <% when ::SurveyQuestion::DoubleLevelOption %>
          var chart_<%= qid %> = generate_fusion_charts('',
                                          '',
                                          <%= @chart_data[qid].to_json.html_safe %>,
                                          'question_chart_<%= qid %>',
                                          'multilevelpie',
                                          "#fff")
          chart_<%= qid %>.render();
        <% end %>
      <% end %>
      });
    })
    } else {
      window.location.href = "<%= survey_path(@survey, :inner => 'true') %>";
    }
    function generate_color(i,l){
      var colors = [
            "#3366cc",
            "#dc3912",
            "#ff9900",
            "#109618",
            "#990099",
            "#0099c6",
            "#dd4477",
            "#66aa00",
            "#b82e2e",
            "#316395",
            "#994499",
            "#22aa99",
            "#aaaa11",
            "#6633cc",
            "#e67300",
            "#8b0707",
            "#651067",
            "#329262",
            "#5574a6",
            "#3b3eac",
            "#b77322",
            "#16d620",
            "#b91383",
            "#f4359e",
            "#9c5935",
            "#a9c413",
            "#2a778d",
            "#668d1c",
            "#bea413",
            "#0c5922",
            "#743411"]
      while (i>=31){
        i -= 31
      }
      return colors[i]
    }
    function generate_fusion_data_list(data_obj,key,color){
      var categories = [];
      var i = 0
      var l = Object.keys(data_obj).length
      $.each(data_obj,function(k,v){
        var category = {}
        var new_color;
        category.label = k

        if (color){
          category.color = new_color = color
        }else{
          new_color = generate_color(i,l)
          category.color = new_color 
        }
        category.tooltext = k+"{br}<b>$value($percentValue)</b>"
        if (typeof(v)=="number"){
          category.value = v
        }else{
          category.value = v.value
          category[key] =  generate_fusion_data_list(v.children,key,new_color)
        }
        i ++
        categories.push(category)
      })
      return categories
    }
    function sum_chart_data_values(data){
      var sum = 0;
              
      //Calculate the total values
      for (i = 0; i < data.length; i++) {
        sum += parseInt(data[i].value);
      }
      return sum;
    }
    function set_chart_label(data,key){
      var sum = sum_chart_data_values(data);
      var percent;
      var data;
      var len = data.length;
      //Find the percentage of each data object and assign to "displayValue" attribute
      for (var i = 0; i < len; i++) {
        
        percent = (Math.round((data[i].value / sum * 100) * 10) / 10);
        data[i].label = data[i].label + "{br}(" + percent + "%)";
        data[i].displayValue = data[i].label
        if (data[i][key]){
          set_chart_label(data[i][key],key)
        }
      }
    }
    function generate_fusion_charts(chart_title,chart_subtitle,chart_data,containerID,type,font_color){
      if (!font_color){
        font_color = Object.keys(chart_data).length<=1 ? '#FFFFFF' : '#000000'
      }
      var h,r;
      if (max_w>400 && type!='multilevelpie'){
        r = 400/3
      }else if (max_w>800){
        r = 800/3
      }else{
        if (type!='multilevelpie'){
          r = max_w/3
        }else{
          r = max_w/2
        }
      }
      if (type!='multilevelpie'){
        h = r*3.5
      }else{
        h = r*2.5
      }
      var data_soruce = {
          "chart": {
            "caption": chart_title,
            "subcaption": chart_subtitle,
            "showPlotBorder": "1",
            "pieborderthickness": "2",
            "hoverfillcolor": "#AAAAAA",
            "piebordercolor": "#FFFFFF",
            "hoverfillcolor": "#AAAAAA",
            "numberprefix": "",
            "plottooltext": "$label{br}<b>$value($percentValue)</b>",
            //Theme
            "theme": "fusion",
            "showLegend": "1",
            "legendposition": "top",
            "placevaluesinside": "1",
            "valueFontColor": font_color, //"#000000"//"#EEEEEE",
            "captionFontBold": "1",
            "plotFillAlpha": "100",
            "legendscrollbgcolor": "#ffffff",
            "showpercentagevalues": "0",
            pieRadius: r
          }
        }
      var key;
      if (type=='multilevelpie'){
          key = 'category'
      }else{
          key = 'data'
      }
      data_soruce[key] = generate_fusion_data_list(chart_data,key)
      var chartObj =  new FusionCharts({
        type: type,
        renderAt: containerID,
        width: '100%',
        height: h,
        pieRadius: r,
        dataFormat: 'json',
        events: {
              "rendered": function(evt, arg) {
              set_chart_label(data_soruce[key],key)
              evt.sender.setJSONData(data_soruce);
            }
          },
        dataSource: data_soruce
      })
      return chartObj
    }
  var dragFlag = false;
  var x, y, pre_x, pre_y;

  $(function() {
      $("html").bind("touchstart",function(e){
          dragFlag = true;
          var obj = $("html");
          x = obj.scrollLeft();
          y = obj.scrollTop();
          pre_x = e.originalEvent.touches[0].screenX;
          pre_y = e.originalEvent.touches[0].screenY;
      });

      $("html").bind("touchmove",function(e){
          if (dragFlag) {
              var obj = $("html");
              obj.scrollLeft(x - e.originalEvent.touches[0].screenX + pre_x);
              obj.scrollTop(y - e.originalEvent.touches[0].screenY + pre_y);
              return false;
          }
      });

      $("html").bind("touchend",function(e){
          dragFlag = false;
      });
  });

  </script>
<% when QuestionnaireSurvey::ResultExtern %>
  <script type="text/javascript">
    window.location.href = "<%= @survey.extern_link %>";
  </script>
<% when QuestionnaireSurvey::ResultFile %>
  <h1><%= @survey.title %> <%= t('survey.upload_file') %></h1>
  <section>
    <%= link_to t(:view), @survey.upload_file.url, {:class => 'for_preview btn', :target => '_blank', :title => t(:view), "data-trigger" => :hover} if !@survey.upload_file.blank? %>
  </section>
<% end %>