<div>
<% height = entry.wk_survey_choices.length > 0 ? entry.wk_survey_choices.length : 1 %>
	<canvas id="survey_result_graph<%= entry.id %>" width="600" height=<%= height * 55 %>></canvas>
</div>

<% content_for :header_tags do %>
  <%= javascript_include_tag "chart.min" %>
<% end %>

<% getSurveyForType(params) %>
<%= javascript_tag do %>
	$(document).ready(function(){
		var url = <%= raw url_for(controller: 'wksurvey', action: 'graph', graph: "graph", question_id: entry.id, surveyForType: @surveyForType,
			surveyForID: @surveyForID, groupName: params[:groupName], survey_id: @survey.id, groupName: params[:groupName]).to_json %>;
		$.getJSON(url, function(data){
			if (data['graphtype'] == "line"){
				var chartData = {
				labels: data['labels'],
					datasets: [{
						backgroundColor: 'rgba(54, 162, 235, 0.3)',
						borderColor: 'rgba(54, 162, 235, 0.3)',
						borderWidth: 3,
						fill: false,
						data: data['average']
					}]
				};

				new Chart(document.getElementById("survey_result_graph<%= entry.id %>").getContext("2d"), {
					type: 'line',
					data: chartData,
					options: {
						plugins: {
							tooltips: {
								mode: 'index',
								intersect: false
							},
							hover: {
								mode: 'index',
								intersect: false
							},
							layout: {
								padding: {
								left: 0,
								right: 20,
								top: 0,
								bottom: 0
								}
							},
							responsive: true,
							maintainAspectRatio: false,
							legend: {
								display: false,
								position: 'right'
							},
						},
						scales: {
							x: {
								grid: {
									drawBorder: true,
									display : false
								}
							},
							y: {
								afterFit: function(scaleInstance) {
									scaleInstance.width = 250;
								},
								grid: {
									drawBorder: true,
									display : false
								}
							}
						}
					},
				});
			}
			else
			{
				<%# for surveyquestion average %>
				if (data['showAvg']){
					$('#avgScore_<%= entry.id %>').html(data['avg_score']);
				}
				var chartData = {
					labels: data['labels'],
					datasets: [{
						backgroundColor: 'rgba(54, 162, 235, 0.3)',
						borderColor: 'rgba(54, 162, 235, 0.3)',
						borderWidth: 1,
						barThickness : 20,
						data: data['emp_count_per_choices']
					}]
				};

				new Chart(document.getElementById("survey_result_graph<%= entry.id %>").getContext("2d"), {
					type: 'bar',
					data: chartData,
					options: {
        		indexAxis: 'y',
						plugins: {
							layout: {
								padding: {
								left: 0,
								right: 20,
								top: 0,
								bottom: 0
								}
							},
							events: [],
							responsive: true,
							maintainAspectRatio: false,
							legend: {
								display: false
							},
						},
						scales: {
							x: {
								ticks: {
									display: false,
									beginAtZero: true
								},
								grid: {
									drawBorder: false,
									display : false
								}
							},
							y: {
								afterFit: function(scaleInstance) {
									scaleInstance.width = 250;
								},
								grid: {
									drawBorder: false,
									display : false
								},
							}
						}
					},
					plugins: {
						beforeInit: function (chart) {
							chart.data.labels.forEach(function (value, index, array) {
								var a = [];
								a.push(value.slice(0, 40));
								var i = 1;
								while(value.length > (i * 40)){
									a.push(value.slice(i * 40, (i + 1) * 40));
									i++;
								}
								array[index] = a;
							})
						}
					}
				});
			};
		});
	});
<% end %>