<div class="row">
<div class="col-md-4"><input id="botonGraficas" type="button" value="Cambiar a Comparativa por Año" style="margin-right:10px;"></div>
</div>
<div id="mostrarGraficaIndividual">
		<h1 id="NombreEncuesta" style="text-align:center;"></h1>
		<div class="row">
		    <div class="col-md-12">
				<canvas style="width:100% !important;" id="miGraficaIndiv"> </canvas>​​
			</div>
		</div>
		<div class="row">
		    <div class="col-md-12">
				<table>
				<thead>
				<tr><th><span style="margin-left: 5px;"><strong><u>Encuesta</u></strong></span></th><th><span style="margin-left: 5px;"><strong><u>Atributos de la Encuesta</u></strong></span></th></tr>
				</thead>
				<tbody>
				<tr><td><span style="width: 20px; height: 10px; display: inline-block; background-color: rgba(233,80,69, 0.5);"></span><span style="margin-left: 5px;">Meta de la Encuesta</span></td><td><span style="width: 20px; height: 10px; display: inline-block; background-color: rgba(26, 161, 225, 0.5);"></span><span style="margin-left: 5px;">Meta del Atributo Encuestado</span></td></tr>
				<tr><td><span style="width: 20px; height: 10px; display: inline-block; background-color: rgba(255,183,6, 0.5);"></span><span style="margin-left: 5px;">Media de la Encuesta</span></td><td><span style="width: 20px; height: 10px; display: inline-block; background-color: rgba(51, 200, 79, 0.5);"></span><span style="margin-left: 5px;">Media del Atributo Respondido</span></td></tr>
				</tbody>
				</table>
			</div>
		</div>
</div>

<div style="display:none;" id="mostrarGraficaMulti">
		<h1 id="NombreEncuestaMulti" style="text-align:center;"></h1>
		<div class="row">
		   <div class="col-md-12">​​​ 
			<label><u><strong>Seleccione los años que desee comparar:</strong></u></label>
			<input id="botonFiltro" type="button" value="Filtrar"/>
			<ul id="listadoDeAnyos" style="list-style:none;height:100px;overflow:auto;">
			</ul>
		   </div>
		</div>
		<div class="row">
		   <div class="col-md-12">​​​ 
			<canvas style="width:100% !important;display:none;" id="miGraficaMulti"> </canvas>​
			</div>
		</div>
		<div class="row">
		   <div class="col-md-12">​​​ 
		   <ul style="list-style:none;">
				<li><label><u><strong>Leyenda</strong></u></label></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;">Meta de la Encuesta</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;">Valor Medio de la Encuesta</span></li>
		   </ul>
		   </div>
		</div>
</div>
<script src="https://sw.licensing.proquo.pro/JS/Chart.min.js" type="text/javascript"></script>​​​​ 
<script type="text/javascript">
var rowLimit=4500;
var atributos=[],objetivos=[],valores=[],contador=[],lineaObjetivosEncuesta=[],lineaValorEncuesta=[];
var nombreABuscar="";
var ctx,ctxMulti,miGraficaMulti,miGraficaIndiv;
var listadoEncuestas,listadoRespuestas,listadoAtributos;
var objetivoEncuesta,valorEncuesta,versionOculta="";
var fieldsToRead,query;
 var method = "GetListItems";
function url_query( query ) {
    query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var expr = "[\\?&]"+query+"=([^&#]*)";
    var regex = new RegExp( expr );
    var results = regex.exec( window.location.href );
    if ( results !== null ) {
        return results[1];
    } else {
        return false;
    }
}

 $(document).ready(function() {
 devolverListas(["Listado de Encuestas","Listado de Respuestas","Listado de Atributos de Encuesta"],false,function(g){
listadoEncuestas=g[0];
listadoRespuestas=g[1];
listadoAtributos=g[2];
 });
 var urlSitio= $().SPServices.SPGetCurrentSite();
 $("#botonGraficas").click(function(){
	if($("#mostrarGraficaIndividual").is(":visible")){
		$("#botonGraficas").attr("value","Cambiar a Datos de la Encuesta Actual");
		$("#mostrarGraficaIndividual").hide();
		$("#mostrarGraficaMulti").show();
	}else{
		$("#botonGraficas").attr("value","Cambiar a Comparativa por Año");
	   	$("#mostrarGraficaMulti").hide();
		$("#mostrarGraficaIndividual").show();
	}
 });
var id = url_query('ID');
ctx = document.getElementById("miGraficaIndiv").getContext("2d");
ctxMulti=document.getElementById("miGraficaMulti").getContext("2d");

         fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='VersionOculta' />" +
								"<FieldRef Name='Objetivo' />" +
								"<FieldRef Name='Valor' />" +
                               "</ViewFields>";
         query = "<Query><Where><Eq><FieldRef Name='ID' />"+
				"<Value Type='Text'>"+id+"</Value></Eq>"+
				"</Where></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: listadoEncuestas,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
						    var nombreTemp=$(this).attr("ows_VersionOculta");
							$("#NombreEncuesta").text(nombreTemp);
							var IndexAnyoActual=nombreTemp.lastIndexOf("-");
							nombreABuscar=nombreTemp.substring(0,IndexAnyoActual);
							$("#NombreEncuestaMulti").text(nombreABuscar);
						    valorEncuesta=parseFloat($(this).attr("ows_Valor")).toFixed(1);
					        objetivoEncuesta=parseFloat($(this).attr("ows_Objetivo")).toFixed(1);
					        versionOculta=nombreTemp;
                               
                        });                
                    }
        });
		
consultarRespuestas(0);
       
$("#botonFiltro").click(function() {
if ($("#miGraficaMulti").is(":hidden")){
	$("#miGraficaMulti").show();
}
refrescarGrafico();
});
$('<div class="col-md-3"><a href="'+urlSitio+'/SitePages/Informe General de la Encuesta.aspx?url='+escape($("#NombreEncuesta").text())+'" class="btn btn-info"><span class="glyphicon glyphicon-file"></span> Informe de la Encuesta</a></div>').insertAfter($('#botonGraficas').parent());
});


function consultarRespuestas(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'>"+versionOculta+"</Value></Eq>"+
     			"<Gt><FieldRef Name='ID' /><Value Type='Counter'>"+idGt+"</Value></Gt>"+
     			"</And>"+
				"</Where><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>";
				atributos[0]="";
				valores[0]=0;
				contador[0]=0;
				
   	$().SPServices({
                operation: method,
                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;
						var atrib=$(this).attr("ows_Atributo");
						var posicion=jQuery.inArray(atrib, atributos);
						idActual=$(this).attr("ows_ID");
	                    if(posicion!=-1){
							var calculo=parseInt($(this).attr("ows_Valor"))+parseInt(valores[posicion]);
							
					    	valores[posicion]=calculo;
						
						}else{
						   atributos.push($(this).attr("ows_Atributo"));
						   valores.push(parseInt($(this).attr("ows_Valor")));
						}
						posicion=jQuery.inArray($(this).attr("ows_Atributo"), atributos);
						if(contador[posicion]==null||contador[posicion]==0){
							contador[posicion]=1;
						}else{
							contador[posicion]+=1;
						}
	
                         
                      });  
                      if($(xData.responseXML).SPFilterNode("z:row").length>=4500){
                      	consultarRespuestas(idActual);
                      }else{
                      	consultarAtributos();
                      }
                    }
        });
}

function consultarAtributos(){
	 fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='Objetivo' />" +
                               "</ViewFields>";
		for ( var i = 0; i < valores.length; i ++ ) {
		lineaObjetivosEncuesta[i]=objetivoEncuesta;
		lineaValorEncuesta[i]=valorEncuesta;
		query = "<Query><Where><And><Eq><FieldRef Name='Title' />"+
				"<Value Type='Text'>"+atributos[i]+"</Value></Eq>"+
				"<IsNotNull><FieldRef Name='Objetivo' /></IsNotNull></And>"+
				"</Where></Query>";
		 $().SPServices({
                operation: method,
                async: false,  
                listName: listadoAtributos,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
						var objValor=parseFloat($(this).attr("ows_Objetivo"));
						var objFixed=objValor.toFixed(1);
                        objetivos[i]=objFixed;
                            
                        });                
                    }
        });
		
		var final=valores[i]/contador[i];
		var fixed=final.toFixed(1);
         valores[i]=fixed

		}
		atributos[atributos.length]="";
		lineaObjetivosEncuesta[lineaObjetivosEncuesta.length]=objetivoEncuesta;
		lineaValorEncuesta[lineaValorEncuesta.length]=valorEncuesta;
    var data = {
    labels: atributos,
    datasets: [
	   
        {
            label: "Atributo",
			type:"bar",
            fillColor: "rgba(26,161,225,0.4)",
            strokeColor: "rgba(26,161,225,0.8)",
            highlightFill: "rgba(26,161,225,0.75)",
            highlightStroke: "rgba(26,161,225,1)",
            data: objetivos
        },  
		{
            label: "Valor del Atributo",
			type:"bar",
            fillColor: "rgba(51,200,79,0.4)",
            strokeColor: "rgba(51,200,79,0.8)",
            highlightFill: "rgba(51,200,79,0.75)",
            highlightStroke: "rgba(51,200,79,1)",
            data: valores
        },
		{
		    label: "Objetivo de la Encuesta",
			type:"line",
            fillColor: "rgba(233,80,69,0)",
            strokeColor: "rgba(233,80,69,1)",
            highlightFill: "rgba(233,80,69,0)",
            highlightStroke: "rgba(233,80,69,1)",
			pointColor: "rgba(233,80,69,1)",
            pointStrokeColor: "rgba(233,80,69,1)",
            pointHighlightFill: "rgba(233,80,69,1)",
            pointHighlightStroke: "rgba(233,80,69,1)",
		    data: lineaObjetivosEncuesta
		},
		{
		    label: "Valor de la Encuesta",
			type:"line",
			fillColor: "rgba(255,183,6,0)",
            strokeColor: "rgba(255,183,6,1)",
            highlightFill: "rgba(255,183,6,0)",
            highlightStroke: "rgba(255,183,6,1)",
			pointColor: "rgba(255,183,6,1)",
            pointStrokeColor: "rgba(255,183,6,1)",
            pointHighlightFill: "rgba(255,183,6,1)",
            pointHighlightStroke: "rgba(255,183,6,1)",
			data: lineaValorEncuesta
		}
		
      
    ]
};
var max=10;
var pasos=1;
 miGraficaIndiv = new Chart(ctx).Overlay(data,{
	responsive:true,
    scaleOverride: true,
    scaleSteps: max,
    scaleStepWidth: pasos,
    scaleStartValue: 0,
	pointDot:false,
	scaleFontSize:10
});
         fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Version' />" +
								"<FieldRef Name='Objetivo' />" +
								"<FieldRef Name='Valor' />" +
                               "</ViewFields>";
         query = "<Query><Where><Eq><FieldRef Name='Title' />"+
				"<Value Type='Text'>"+nombreABuscar+"</Value></Eq>"+
				"</Where></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: listadoEncuestas,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
						    var Anyo=$(this).attr("ows_Version");
						     $("#listadoDeAnyos").append("<li class='col-sm-3'><label><input type='checkbox' name='anyos[]' value='"+Anyo+"'/>"+Anyo+"</label></li>");                         
                        });                
                    }
        });


}

function refrescarGrafico(){
var checked = [];
$("input[name='anyos[]']:checked").each(function ()
{
    checked.push($(this).val());
});

var metaMulti=[];
var valorMulti=[];
var anyoMulti=[];
         fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Version' />" +
								"<FieldRef Name='Objetivo' />" +
								"<FieldRef Name='Valor' />" +
                               "</ViewFields>";
        query = "<Query><Where><Eq><FieldRef Name='Title' />"+
				"<Value Type='Text'>"+nombreABuscar+"</Value></Eq>"+
				"</Where></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: listadoEncuestas,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
						var compVersion=$(this).attr("ows_Version");
								
						 if(jQuery.inArray(compVersion,checked)!=-1){
						    var fixed=parseFloat($(this).attr("ows_Objetivo")).toFixed(1);
							metaMulti.push(fixed);
							fixed=parseFloat($(this).attr("ows_Valor")).toFixed(1);
							valorMulti.push(fixed);
							anyoMulti.push(compVersion);
						 }
                               
                        });                
                    }
        });
		if (checked.length==0){
		anyoMulti=[];
		metaMulti=[];
		valorMulti=[];
		}
		var data = {
       labels: anyoMulti,
       datasets: [
	   
        {
            label: "Meta de la Encuesta",
            fillColor: "rgba(26,161,225,0.4)",
            strokeColor: "rgba(26,161,225,0.8)",
            highlightFill: "rgba(26,161,225,0.75)",
            highlightStroke: "rgba(26,161,225,1)",
            data: metaMulti
        },  
		{
            label: "Valor de la Encuesta",
		    fillColor: "rgba(51,200,79,0.4)",
            strokeColor: "rgba(51,200,79,0.8)",
            highlightFill: "rgba(51,200,79,0.75)",
            highlightStroke: "rgba(51,200,79,1)",
            data: valorMulti
        }
	    ]
};

var max=10;
var pasos=1;
if(miGraficaMulti!=undefined) miGraficaMulti.destroy();
 ctxMulti=document.getElementById("miGraficaMulti").getContext("2d");
 miGraficaMulti = new Chart(ctxMulti).Bar(data,{
    responsive:true,
    scaleOverride: true,
    scaleSteps: max,
    scaleStepWidth: pasos,
    scaleStartValue: 0
});
}
</script>​​