<html>
<head>
<meta charset="UTF-8" />
<title>Graficas</title>
<script src="Jquery/jquery-3.3.1.min.js"></script>
<script src="Highcharts 6.1.0/code/highcharts.js"></script>
</head>
<body>

<?php
//Captura de Variables PHP de Campos basicos de control
@$RecCapControl=$_GET['CapNControl'];
@$CapNRuta1=$_GET['CapRuta1'];
@$CapNRuta2=$_GET['CapRuta2'];
@$CapNRuta3=$_GET['CapRuta3'];
@$CapNRuta4=$_GET['CapRuta4'];
@$CapNRuta5=$_GET['CapRuta5'];

//Captura de variables de Km teorico

@$CapKmTeorico1=$_GET['CapKMTeo1'];
@$CapKmTeorico2=$_GET['CapKMTeo2'];
@$CapKmTeorico3=$_GET['CapKMTeo3'];
@$CapKmTeorico4=$_GET['CapKMTeo4'];
@$CapKmTeorico5=$_GET['CapKMTeo5'];

//Captura de variables de Km teorico

@$CapKmReali1=$_GET['CapKMRea1'];
@$CapKmReali2=$_GET['CapKMRea2'];
@$CapKmReali3=$_GET['CapKMRea3'];
@$CapKmReali4=$_GET['CapKMRea4'];
@$CapKmReali5=$_GET['CapKMRea5'];

//Captura de variables de Km Eliminado

@$CapKmElim1=$_GET['KmSupr1'];
@$CapKmElim2=$_GET['KmSupr2'];
@$CapKmElim3=$_GET['KmSupr3'];
@$CapKmElim4=$_GET['KmSupr4'];
@$CapKmElim5=$_GET['KmSupr5'];

//Captura de variables Procentja
@$Porcentaje1=$_GET['Por1'];
@$Porcentaje2=$_GET['Por2'];
@$Porcentaje3=$_GET['Por3'];
@$Porcentaje4=$_GET['Por4'];
@$Porcentaje5=$_GET['Por5'];
@$PorcentajeControl=$_GET['Por0'];

?>
<script>
//Captura de Variables JS de Campos basicos de control
var CapControl= '<?php echo $RecCapControl;?>';
var CapRuta1= '<?php echo $CapNRuta1 ;?>';
var CapRuta2= '<?php echo $CapNRuta2; ?>';
var CapRuta3= '<?php echo $CapNRuta3; ?>';
var CapRuta4= '<?php echo $CapNRuta4 ;?>';
var CapRuta5= '<?php echo $CapNRuta5; ?>';

//Captura de variables de Km teorico en JS
var CapKmTeo1= <?php echo $CapKmTeorico1;?>;
var CapKmTeo2= <?php echo $CapKmTeorico2;?>;
var CapKmTeo3= <?php echo $CapKmTeorico3;?>;
var CapKmTeo4= <?php echo $CapKmTeorico4;?>;
var CapKmTeo5= <?php echo $CapKmTeorico5;?>;

//Captura de variable Km Realizado en JS

var CapKmRea1= <?php echo $CapKmReali1;?>;
var CapKmRea2= <?php echo $CapKmReali2;?>;
var CapKmRea3= <?php echo $CapKmReali3;?>;
var CapKmRea4= <?php echo $CapKmReali4;?>;
var CapKmRea5= <?php echo $CapKmReali5;?>;

//Captura de variable Km Eliminado en JS

var CapKmSupr1= <?php echo $CapKmElim1;?>;
var CapKmSupr2= <?php echo $CapKmElim2;?>;
var CapKmSupr3= <?php echo $CapKmElim3;?>;
var CapKmSupr4= <?php echo $CapKmElim4;?>;
var CapKmSupr5= <?php echo $CapKmElim5;?>;

//Captura de Variables Porcentajes en Js

var CapPorcentajeControl= <?php echo $PorcentajeControl;?>;
var CapPorcentaje1= <?php echo $Porcentaje1;?>;
var CapPorcentaje2= <?php echo $Porcentaje2;?>;
var CapPorcentaje3= <?php echo $Porcentaje3;?>;
var CapPorcentaje4= <?php echo $Porcentaje4;?>;
var CapPorcentaje5= <?php echo $Porcentaje5;?>;


</script>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="width: 100px; height: 50px; margin: 0 auto"></div>
<div id="container3" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="container4" style="width: 550px; height: 400px; margin: 0 auto"></div>
      <script>
      $(document).ready(function() {  
            var chart = {
               type: 'bar'
            };
            var title = {
               text: 'Informacion de Rutas'   
            };
            var subtitle = {
               text: CapControl  
            };
            var xAxis = {
               categories: [CapRuta1, CapRuta2, CapRuta3, CapRuta4, CapRuta5],
               title: {
                  text: 'Rutas Asignadas: '+CapControl
               }
            };
            var yAxis = {
               min: 0,
               title: {
                  text: 'Kilometros',
                  align: 'high'
               },
               labels: {
                  overflow: 'justify'
               }
            };
            var tooltip = {
               valueSuffix: ' Kilometros'
            };
            var plotOptions = {
               bar: {
                  dataLabels: {
                     enabled: true
					 
                  }
               }
            };
            var legend = {
               layout: 'horizontal',
               align: 'right',
               verticalAlign: 'top',
               x: -00,
               y: 100,
               floating: true,
               borderWidth: 1,
               
               backgroundColor: (
                  (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                     '#FFFFFF'),
               shadow: true
            };
            var credits = {
               enabled: true
            };
            var series = [
                  {
                  name: 'Kms Teorico',
                  data: [CapKmTeo1, CapKmTeo2, CapKmTeo3, CapKmTeo4, CapKmTeo5]
               }, 
               {
                  name: 'Kms Real',
                  data: [133, 156, 947, 408, 6],
				  color:'#01DF01'
               }, 
               {
                  name: 'Kms Eliminados',
                  data: [973, 914, 4054, 732, 34],
				  color:'red'
				       
               }
            ];
      
            var json = {};  
			var json2 = {}; 
            json.chart = chart; 
            json.title = title;
			json2.title = null;   
            json.subtitle = subtitle; 
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;  
            json.series = series;
            json.plotOptions = plotOptions;
            json2.legend = legend;
            json.credits = credits;
            $('#container3').highcharts(json);
			$('#container4').highcharts(json2);
			
			//----------------------------------
			
         });
	  
      </script>
      
      <script>
      $(document).ready(function() {  
            var chart = {
               type: 'bar'
            };
            var title = {
               text: 'Informacion de Porcentaje de las Rutas'   
            };
            var subtitle = {
               text: CapControl  
            };
            var xAxis = {
               categories: [CapRuta1, CapRuta2, CapRuta3, CapRuta4, CapRuta5],
               title: {
                  text: 'Rutas Asignadas: '+CapControl
               }
            };
            var yAxis = {
               min: 0,
               title: {
                  text: 'Porcentaje (%)',
                  align: 'high'
               },
               labels: {
                  overflow: 'justify'
               }
            };
            var tooltip = {
               valueSuffix: ' %'
            };
            var plotOptions = {
               bar: {
                  dataLabels: {
                     enabled: true
					 
                  }
               }
            };
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'top',
               x: -00,
               y: 100,
               floating: true,
               borderWidth: 1,
               
               backgroundColor: (
                  (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                     '#FFFFFF'),
               shadow: true
            };
            var credits = {
               enabled: false
            };
          
			var series = [
                
               {
                  name: '% Porcentajes',
                  data: [CapPorcentaje1, CapPorcentaje2, CapPorcentaje2, CapPorcentaje2, CapPorcentaje2],
				  
               },
               
            ];
			
      
            var json = {};
			var json2={};   
            json.chart = chart; 
            json.title = title;
			json2.title = null;   
            json.subtitle = subtitle; 
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;  
            json.series = series;
            json.plotOptions = plotOptions;
            json2.legend = legend;
            json.credits = credits;
            $('#container').highcharts(json);
			$('#container2').highcharts(json2);
			
			//----------------------------------
			
         });
	  
      </script>

</body>
</html>