How to consume content from a Json using a Charts script.JS

0

I have a service that combines two querys of Sqlite in an array (followed by a Json encode), I try to generate several queries to have the data and paint them in a line graph in charts.js

My service when it is sent with a single array works, when I consume the service with 2 array's combined and in a Json, it does not seem to have problems to combine, however at the moment of consuming the service in the script, it does not print the data from the first array or from the second.

The following is my service:

$datas = array();
$another=array();
$data = array();


  $tablesquery = $db->query("with 
              query1 as(
              SELECT F_alta, count(cod_cliente) s
              from Informe_Cosechas
              WHERE Diferencia=0
              group by F_alta
              ORDER BY F_alta desc),
              query2 as(
              SELECT F_alta, count(cod_cliente) t
              from Informe_Cosechas
              WHERE Diferencia=3
              group by F_alta
              ORDER BY F_alta desc)
              Select a.F_alta as Fecha, CAST((b.t*1.0)/(a.s*1.0)*100 as float)  as result from query1 a left join query2 b on a.F_alta=b.F_Alta;");
$i=0;
                        while ($table = $tablesquery->fetchArray(SQLITE3_ASSOC)) {
                          if (!isset($table['Fecha'])) contnue;
                            $datas[$i]['Fecha'] = $table['Fecha'];
                            $datas[$i]['result'] = $table['result'];
                            $i++;
                      }

   $tablesquer = $db->query("with 
              query1 as(
              SELECT F_alta, count(cod_cliente) s
              from Informe_Cosechas
              WHERE Diferencia=0 and SUB_SEGMENTO_SCL='Residencial'
              group by F_alta
              ORDER BY F_alta desc),
              query2 as(
              SELECT F_alta, count(cod_cliente) t
              from Informe_Cosechas
              WHERE Diferencia=3 and SUB_SEGMENTO_SCL='Residencial'
              group by F_alta
              ORDER BY F_alta desc)
              Select a.F_alta as Fecha, CAST((b.t*1.0)/(a.s*1.0)*100 as float)  as resulta from query1 a left join query2 b on a.F_alta=b.F_Alta"); 
$i=0;
                        while ($tables = $tablesquer->fetchArray(SQLITE3_ASSOC)) {
                          if (!isset($tables['Fecha'])) contnue;
                            $another[$i]['Fecha'] = $tables['Fecha'];
                            $another[$i]['resulta'] = $tables['resulta'];
                            $i++;
                      }
    $data[]=array_merge($datas,$another);

        print json_encode($data);

The Script that allows me to print a line in the graphic and consumes the Json that the previous service issues, is the following:

$(document).ready(function(){
    $.ajax({
        url: "http://localhost:8080/mvc_template/view/upload/MesCierre.php",
        dataType: 'json',
        method: "GET",
        success: function(data) {
            console.log(data);
            var Fecha = [];
            var result = [];
            var resulta = [];


            for(var i in data) {
                Fecha.push(data[i].Fecha);
                result.push(data[i].result);
                resulta.push(data[i].resulta);

            }

            var chartdata = {
                labels: Fecha,
                datasets : [
                    {
                        label: 'Mes 3 %',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255,99,132,1)',
                        borderWidth: 1,
                        fill: false,    
                        data: result
                    },
                    {
                        label: 'Residencial %',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(220,220,220,0.5)',
                        borderWidth: 1,
                        fill: false,    
                        data: resulta
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});

Is it the optimal way for the process I describe? or there is some better way to paint more than one line in a Charts.js plot using data from a sqlite database.

    
asked by Deivid Stiven Medina Hernandez 02.10.2018 в 17:13
source

0 answers