301 lines
9.7 KiB
Plaintext
301 lines
9.7 KiB
Plaintext
<%
|
|
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 %> |