graph with chartjs and filter

0

You can graph with a filter, but with two no, please help.

index.php

<body> 
         <div class="caja">
        <select onChange="mostrarResultados();" id="year">
        <!--<select onChange="mostrarResultados(this.value);">-->    
            <?php
                for($i=2017;$i<2020;$i++){
                    if($i == 2018){
                        echo '<option value="'.$i.'" selected>'.$i.'</option>';
                    }else{
                        echo '<option value="'.$i.'">'.$i.'</option>';
                    }
                }
            ?>
        </select>


        <select onChange="mostrarResultados();" id="zona">
          <option value="LIMA">LIMA</option>
          <option value="PROVINCIA">PROVINCIA</option>

        </select>


    </div>




        <div class="resultados" style=""><canvas id="grafico"></canvas></div>
    </body>
    <script>


                function mostrarResultados(year,zona){
                   var year = $("#year").val();
                   var zona = $("#zona").val();
                   $('.resultados').html('<canvas id="grafico"></canvas>');
                    $.ajax({
                        type: 'POST',
                        url: 'php/procesar.php',
                        //data: 'year='+year,
                        data: {'year':year,'zona':zona},
                        dataType: 'JSON',
                        success:function(response){
                            var Datos = {
                                    labels : ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                                    datasets : [
                                        {
                                            fillColor : 'rgba(91,228,146,0.6)', //COLOR DE LAS BARRAS
                                            strokeColor : 'rgba(57,194,112,0.7)', //COLOR DEL BORDE DE LAS BARRAS
                                            highlightFill : 'rgba(73,206,180,0.6)', //COLOR "HOVER" DE LAS BARRAS
                                            highlightStroke : 'rgba(66,196,157,0.7)', //COLOR "HOVER" DEL BORDE DE LAS BARRAS
                                            data : response
                                        }
                                    ]
                                }
                            var contexto = document.getElementById('grafico').getContext('2d');
                            window.Barra = new Chart(contexto).Bar(Datos, { responsive : true });
                            Barra.clear();
                        }
                    });
                    return false;
                }
    </script>
</html>

proces.php

<?php
    include_once('conexion.php');
    class Procesar extends Model{

        public function __construct(){ 
            parent::__construct(); 
        }

        public function build_report($year,$zona){
            $total = array();

            for($i=0; $i<12; $i++){
                $month = $i+1;

                $sql = $this->db->query("SELECT SUM(cantidad) AS total FROM cantidades WHERE MONTH(mes) = '$month' AND YEAR(mes) = '$year' AND zona='$zona' limit 1 ");
                $total[$i] = 0;
                foreach ($sql as $key){ $total[$i] = ($key['total'] == null)? 0 : $key['total']; }
            }            
            return $total;
        }

    }

    if($_POST['year']){
        $class = new Procesar;
        $run = $class->build_report($_POST['year'],$_POST['zona']);
        exit(json_encode($run));
    }



?>
    
asked by Javier A. 28.04.2018 в 01:03
source

0 answers