<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>Survey</u></strong></span></th><th><span style="margin-left: 5px;"><strong><u>Survey Attributes</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;">Survey goal</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;">Attribute goal Surveyed</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;">Survey average value</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;">Attribute answered average value</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>Select the years to compare:</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>Legend</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;">Survey 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;">Survey average value</span></li>
		   </ul>
		   </div>
		</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 nombreABuscar="";
var ctx;
var ctxMulti;
var miGraficaMulti;
var miGraficaIndiv;
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() {
 var listadoEncuestas;
 var listadoRespuestas;
 var listadoAtributos;
  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 Encuestas"){
						 listadoEncuestas="{"+$(this).attr("ows_Clave")+"}";
						}
						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")+"}";
						}
						 
					});
					}
		});
 
 
 $("#botonGraficas").click(function(){
	if($("#mostrarGraficaIndividual").is(":visible")){
		$("#botonGraficas").attr("value","Change to Actual Survey Data");
		$("#mostrarGraficaIndividual").hide();
		$("#mostrarGraficaMulti").show();
	}else{
		$("#botonGraficas").attr("value","Change to Year comparation");
	   	$("#mostrarGraficaMulti").hide();
		$("#mostrarGraficaIndividual").show();
	}
 });
var id = url_query('ID');
ctx = document.getElementById("miGraficaIndiv").getContext("2d");
ctxMulti=document.getElementById("miGraficaMulti").getContext("2d");
var objetivoEncuesta;
var valorEncuesta;
var versionOculta="";
 
        var method = "GetListItems";
        var list = listadoEncuestas;
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='VersionOculta' />" +
								"<FieldRef Name='Objetivo' />" +
								"<FieldRef Name='Valor' />" +
                               "</ViewFields>";
        var query = "<Query><Where><Eq><FieldRef Name='ID' />"+
				"<Value Type='Text'>"+id+"</Value></Eq>"+
				"</Where></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: list,
                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;
                               
                        });                
                    }
        });
		
      list = listadoRespuestas;
	  var atributos=[];
      var objetivos=[];  
	  var valores=[];  
	  var contador=[];
      var lineaObjetivosEncuesta=[];
	  var lineaValorEncuesta=[];
	  fieldsToRead = "<ViewFields>" +
                               "<FieldRef Name='Atributo'/>" +
			                   "<FieldRef Name='Valor'/>" +
                               "</ViewFields>";
    
     query = "<Query><Where><And><Eq><FieldRef Name='EncuestayVersion' />"+
				"<Value Type='Text'>"+versionOculta+"</Value></Eq>"+
				"<IsNotNull><FieldRef Name='Valor' /></IsNotNull></And>"+
				"</Where></Query>";
				atributos[0]="";
				valores[0]=0;
				contador[0]=0;
				
   	$().SPServices({
                operation: method,
                async: false,  
                listName: list,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,
                     
                    completefunc: function (xData, Status) { 
                    
                        $(xData.responseXML).SPFilterNode("z:row").each(function() { 
						var atrib=$(this).attr("ows_Atributo");
						var posicion=jQuery.inArray(atrib, atributos);
						
	                    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;
						}
	
                         
                      });                
                    }
        });
		
	    list = listadoAtributos;
        fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='Objetivo' />" +
                               "</ViewFields>";
		for ( var i = 0; i < valores.length; i = i + 1 ) {
		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: list,
                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
});
         method = "GetListItems";
         list = listadoEncuestas;
         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: list,
                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>");                         
                        });                
                    }
        });


$("#botonFiltro").click(function() {
if ($("#miGraficaMulti").is(":hidden")){
	$("#miGraficaMulti").show();
}
var checked = []
$("input[name='anyos[]']:checked").each(function ()
{
    checked.push($(this).val());
});

var metaMulti=[];
var valorMulti=[];
var anyoMulti=[];
        var method = "GetListItems";
        var list = listadoEncuestas;
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Version' />" +
								"<FieldRef Name='Objetivo' />" +
								"<FieldRef Name='Valor' />" +
                               "</ViewFields>";
        var query = "<Query><Where><Eq><FieldRef Name='Title' />"+
				"<Value Type='Text'>"+nombreABuscar+"</Value></Eq>"+
				"</Where></Query>";
        $().SPServices({
                operation: method,
                async: false,  
                listName: list,
                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
});
});
var urlSitio= $().SPServices.SPGetCurrentSite();
$('<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> Survey Report</a></div>').insertAfter($('#botonGraficas').parent());
});
</script>​​