<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 a 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>Legend</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 Objective</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/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://sw.licensing.proquo.pro/JS/jquery.SPServices-2014.02ALPHA7.js" type="text/javascript"></script>
<script src="https://sw.licensing.proquo.pro/JS/Chart.min.js" type="text/javascript"></script>​​​​
<script type="text/javascript">
var listadoAtributos;
var listadoRespuestas;
var listadoEncuestas;
var filtroPorEncuesta="";
var atributos;
var objetivos;  
var valores=[]; 
var ctx;
var grafico;
 $(document).ready(function() {
atributos=[];
objetivos=[];
 var method = "GetListItems";
        var listaGUID="GUIDS";
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
								"<FieldRef Name='Clave' />" +
								"</ViewFields>";
        var query = "<Query><Where><Or><Eq><FieldRef Name='Title' /><Value Type='Text'>Listado de Encuestas</Value></Eq><Or><Eq><FieldRef Name='Title' /><Value Type='Text'>Listado de Respuestas</Value></Eq>"+
					"<Eq><FieldRef Name='Title' /><Value Type='Text'>Listado de Atributos de Encuesta</Value></Eq></Or></Or></Where></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: listaGUID,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() {
						if($(this).attr("ows_Title")=="Listado de Respuestas"){
						 listadoRespuestas="{"+$(this).attr("ows_Clave")+"}";
						}
						if($(this).attr("ows_Title")=="Listado de Atributos de Encuesta"){
						 listadoAtributos="{"+$(this).attr("ows_Clave")+"}";
						}
						if($(this).attr("ows_Title")=="Listado de Encuestas"){
						 listadoEncuestas="{"+$(this).attr("ows_Clave")+"}";
						}
					});
					}
		});
  //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>");                         
					                          
                        });                
                    }
        });


  
        var method = "GetListItems";
        var list = listadoAtributos;
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='Objetivo' />" +
                               "</ViewFields>";
        var query = "<Query></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: list,
                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("Select a Survey");
	$("input[name='checksPorEncuesta[]']:checked").each(function ()
	{
	 filtroPorEncuesta=($(this).val());
	 if(filtroPorEncuesta!=null&&filtroPorEncuesta!=undefined&&filtroPorEncuesta!=""){
		$("#titulo").text("Average Values by Attribute of 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(){

var atributosFinal=[];
var objetivosFinal=[];
var valoresFinal=[];
var contadorFinal=[];
      var list = listadoRespuestas;
	  var query ="";
	  var contador=0;
	  var cantidad=0;
	  var final=0;
	  var fieldsToRead = "<ViewFields>" +
                         "<FieldRef Name='Atributo'/>" +
			             "<FieldRef Name='Valor'/>" +
						 "<FieldRef Name='EncuestayVersion'/>"+
                         "</ViewFields>";
    
    var query = "<Query><Where><And><Eq><FieldRef Name='EncuestayVersion' /><Value Type='Text'>"+filtroPorEncuesta+"</Value></Eq>"+
				"<IsNotNull><FieldRef Name='Valor' /></IsNotNull></And>"+
				"</Where></Query>";
     $().SPServices({
                operation: "GetListItems",
                async: false,  
                listName: list,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
						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"));
						}
	        
                         
                      });                
                    }
        });
		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);
 ctx = document.getElementById("myChart").getContext("2d");
 grafico = new Chart(ctx).Bar(data,{
	responsive:true,
    scaleOverride: true,
    scaleSteps: max,
    scaleStepWidth: pasos,
    scaleStartValue: 0,
});


}

</script>​​