<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Surveys</h4>
      </div>
      <div class="modal-body">
	  	<ul id="listadoDeEncuestas" style="list-style:none;max-height: 300px;overflow:auto;">
			</ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"  data-dismiss="modal" id="FiltrarModalPorEncuesta">Filter</button>
      </div>
    </div>
  </div>
</div> 
<div class="row">
	<div class="col-md-2">
	<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Modal">
       Select Survey
	</button>
	</div>
	 <div class="col-md-8">​​​ 
	   <h2 id="titulo" style="text-align:center;">Select Survey</h2>
	</div>

 </div>
<div class="row">
	<div class="col-md-12">
		<canvas id="myChart" style="min-width:750px !important; width:100% !important;"></canvas>​​ 
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<ul style="list-style:none;">
			<li><span style="margin-left: 5px;"><strong><u>Caption</u></strong></span></li>
			<li><span style="width: 20px; height: 10px; display: inline-block; background-color: rgba(26, 161, 225, 0.5);"></span><span style="margin-left: 5px;">Attribute Goal</span></li>
			<li><span style="width: 20px; height: 10px; display: inline-block; background-color: rgba(51, 200, 79, 0.5);"></span><span style="margin-left: 5px;">Attribute Average</span></li>
		</ul>
	</div>
</div>
<script src="https://sw.licensing.proquo.pro/JS/Chart.min.js" type="text/javascript"></script>​​​​
<script type="text/javascript">
var listadoAtributos,listadoRespuestas, listadoEncuestas;
var filtroPorEncuesta="",rowLimit=4500;
var atributos,objetivos; 
var valores=[]; 
var ctx,grafico;
var query,fieldsToRead;
var atributosFinal=[],objetivosFinal=[],valoresFinal=[], contadorFinal=[], query ="", contador=0, cantidad=0,final=0;
 var method = "GetListItems";
 $(document).ready(function() {
atributos=[];
objetivos=[];
 devolverListas(["Listado de Encuestas","Listado de Respuestas","Listado de Atributos de Encuesta"],false,function(g){
listadoEncuestas=g[0];
listadoRespuestas=g[1];
listadoAtributos=g[2];
 });

  //Cargar Filtro
	    fieldsToRead = "<ViewFields><FieldRef Name='VersionOculta' /></ViewFields>";
        query = "<Query></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: listadoEncuestas,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
						$("#listadoDeEncuestas").append("<li class='col-sm-6'><label><input type='radio' name='checksPorEncuesta[]' value='"+$(this).attr("ows_VersionOculta")+"'/>"+$(this).attr("ows_VersionOculta")+"</label></li>");                         
					                          
                        });                
                    }
        });
         fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='Objetivo' />" +
                               "</ViewFields>";
         query = "<Query></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: listadoAtributos,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                           
                            objetivos.push(parseInt($(this).attr("ows_Objetivo")).toFixed(1));
                            atributos.push($(this).attr("ows_Title"));
                        });                
                    }
        });

$("#FiltrarModalPorEncuesta").click(function() {
	
	filtroPorEncuesta = ""
	$("#titulo").text("Seleccione una encuesta");
	$("input[name='checksPorEncuesta[]']:checked").each(function ()
	{
	 filtroPorEncuesta=($(this).val());
	 if(filtroPorEncuesta!=null&&filtroPorEncuesta!=undefined&&filtroPorEncuesta!=""){
		$("#titulo").text("Average per Attribute on the Survey "+filtroPorEncuesta);
	 }
	});	
	RefrescarPorEncuesta();
});
var max=10;
var pasos=1;
var data = {
    labels: [""],
    datasets: [
        {
            label: "Objetivos",
            fillColor: "rgba(26,161,225,0.5)",
            strokeColor: "rgba(26,161,225,0.8)",
            highlightFill: "rgba(26,161,225,0.75)",
            highlightStroke: "rgba(26,161,225,1)",
            data: [""]
        },  
		{
            label: "Valor",
            fillColor: "rgba(51,200,79,0.5)",
            strokeColor: "rgba(51,200,79,0.8)",
            highlightFill: "rgba(51,200,79,0.75)",
            highlightStroke: "rgba(51,200,79,1)",
            data: [""]
        }
      
    ]
};
if(grafico!=undefined)ctx.clearRect(0,0,grafico.width,grafico.height);
 ctx = document.getElementById("myChart").getContext("2d");
 grafico = new Chart(ctx).Bar(data,{
	responsive:true,
    scaleOverride: true,
    scaleSteps: max,
    scaleStepWidth: pasos,
    scaleStartValue: 0,
});
});

function RefrescarPorEncuesta(){
atributosFinal=[];
objetivosFinal=[];
valoresFinal=[];
contadorFinal=[];
query ="";
contador=0;
cantidad=0;
final=0;
refrescarEncuestaRecursivo(0);
}

function refrescarEncuestaRecursivo(idGt){
	fieldsToRead = "<ViewFields>" +
                    "<FieldRef Name='Atributo'/>" +
			        "<FieldRef Name='Valor'/>" +
			        "<FieldRef Name='ID'/>" +
			        "<FieldRef Name='EncuestayVersion' />"+
                    "</ViewFields>";
    
     query = "<Query><Where><And><Eq><FieldRef Name='EncuestayVersion' /><Value Type='Text'>"+filtroPorEncuesta+"</Value></Eq><Gt><FieldRef Name='ID' /><Value Type='Counter'>"+idGt+"</Value></Gt>"+
				"</And>"+
				"</Where><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>";
     $().SPServices({
                operation: "GetListItems",
                async: true,  
                listName: listadoRespuestas,
                CAMLViewFields: fieldsToRead,
				CAMLRowLimit: rowLimit,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    var idActual=idGt;
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                        	if($(this).attr("ows_Valor")==undefined)return;
                        	idActual=$(this).attr("ows_ID");
						if(jQuery.inArray($(this).attr("ows_Atributo"),atributosFinal)==-1){
						    var positionOrigen=jQuery.inArray($(this).attr("ows_Atributo"),atributos);
							atributosFinal.push($(this).attr("ows_Atributo"));
							objetivosFinal.push(parseFloat(objetivos[positionOrigen]).toFixed(1));
							contadorFinal.push(parseInt(1));
							valoresFinal.push(parseFloat($(this).attr("ows_Valor")));
						}else{
						   var posicion=jQuery.inArray($(this).attr("ows_Atributo"),atributosFinal);
						   contadorFinal[posicion]+=parseInt(1);
						   valoresFinal[posicion]+=parseFloat($(this).attr("ows_Valor"));
						}
	        
                         
                      }); 
                      if($(xData.responseXML).SPFilterNode("z:row").length>=rowLimit){
						refrescarEncuestaRecursivo(idActual);
                      }else{
                      	refrescarGrafico();
                      }
									  
                    }
        });
}

function refrescarGrafico(){
		var data=[];
		for(var i=0;i< atributosFinal.length;i++){
				var valor=parseFloat(parseFloat(valoresFinal[i])/parseInt(contadorFinal[i]));
			valoresFinal[i]=parseFloat(valor).toFixed(1);
		}
		var data = {
		labels: atributosFinal,
		datasets: [
			{
			label: "Objetivos",
			fillColor: "rgba(26,161,225,0.5)",
			strokeColor: "rgba(26,161,225,0.8)",
			highlightFill: "rgba(26,161,225,0.75)",
			highlightStroke: "rgba(26,161,225,1)",
			data: objetivosFinal
			},  
			{
			label: "Valor",
			fillColor: "rgba(51,200,79,0.5)",
			strokeColor: "rgba(51,200,79,0.8)",
			highlightFill: "rgba(51,200,79,0.75)",
			highlightStroke: "rgba(51,200,79,1)",
			data: valoresFinal
			}]
		};
		var max=10;
		var pasos=1;
		if(grafico!=undefined){ctx.clearRect(0,0,grafico.width,grafico.height);grafico.destroy();}
		 ctx = document.getElementById("myChart").getContext("2d");
		grafico = new Chart(ctx).Bar(data,{
		responsive:true,
		scaleOverride: true,
		scaleSteps: max,
		scaleStepWidth: pasos,
		scaleStartValue: 0,
		});	
}
</script>​​