1

Buenas este tengo un problema al mostrar mis datos en una grafica echarts. En primer lugar estoy utilizando datepicker para mostrar mi grafica en un rango de fechas. Pues en el ajax hago un petición a mi controlador lo cual recibo la data en formato JSON y pues los recibo:

introducir la descripción de la imagen aquí

Mi problema es que los datos númericos no se estan representando en la gráfica solo me muestra las fechas en el xAxis:

introducir la descripción de la imagen aquí

Este es mi codigo javascript junto con la grafica echart que lo estoy utilizando de la plataforma de gentelella.

<script src="{{asset('/js/bootstrap-datetimepicker.min.js')}}"></script>


<script >
    
   var errores='';
    function grafica(){

    var _desde=$('#desde>input').val();
    var _hasta=$('#hasta>input').val();

    var datachart = new Array();

     $.ajax({

                url:"{{route('post')}}",
                mehtod:"post",
                data:{desde: _desde , hasta: _hasta}
               
            })
     .done(function(msg) {

      datachart=msg.data;




      if (datachart.length==0){
        alert("No hay datos");
      } else {


     var echartLine = echarts.init(document.getElementById('echart_line'));

      echartLine.setOption({
        title: {
          text: 'PSI Remolienda',
          subtext: 'Comparación Muestras'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 220,
          y: 40,
          data: ['% M + 200-PSI', '% M + 200-LAB', '% M + 400-PSI', '% M + 400-LAB']
        },
        toolbox: {
          show: true,
          feature: {
            magicType: {
              show: true,
              title: {
                line: 'Line',
                bar: 'Bar',
                stack: 'Stack',
                tiled: 'Tiled'
              },
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
              show: true,
              title: "Restore"
            },
            saveAsImage: {
              show: true,
              title: "Save Image"
            }
          }
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: datachart['fecha']
        }],
        yAxis: [{
          type: 'value',

       
        }],
        series: [{
          name: '% M + 400-PSI',
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default'
              }
            }
          },
          data: datachart["series"]
        },{
          name: '% M + 400-LAB',
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default'
              }
            }
          },
          data:  datachart["series"]
        }, {
          name: '% M + 200-LAB',
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default'
              }
            }
          },
          data: datachart["series"]
        }, {
          name: '% M + 200-PSI',
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default'
              }
            }
          },
          data: datachart["series"]
        }]
      });
   }



    }).fail(function(objectError, textStatus){

      if( objectError.status == '422'){

          errors = objectError.responseJSON;
          $.each( errors, function (key, value){

            errores +=value[0]="\n";
          });

          if (errores.trim()!="") {
            alert(errores);
          }

      }else{

        alert("Error de procesamiento" + objectError.status + "\n" + objectError.statusText)
      }

    });



}

      $(function () {
        $('#desde').datetimepicker(
          { format: "YYYY-MM-DD"}

        );
        $('#hasta').datetimepicker({
            
            format: "YYYY-MM-DD",
            useCurrent: false //Important! See issue #1075
        });
        $("#desde").on("dp.change", function (e) {
            $('#hasta').data("DateTimePicker").minDate(e.date);
        });
        $("#hasta").on("dp.change", function (e) {
            $('#desde').data("DateTimePicker").maxDate(e.date);
        });
          

  $("#btnReport").on('click', function(){

    grafica();

    });

  });
</script>

2.- Esta son las rutas del ajax

Route::get('chart/index', 'ChartRemolienda@index');

Route::match(['get', 'post'], 'remolienda/chart', 'VisualizarRemoliendaController@chart')->name('post');

Este es mi codigo del controlador donde recibo con un request el rango de fechas introducidas en el input y se envia la data pero mi gráfica no me esta cargando esos valores como dije solo me carga las fechas en el Xasis. La verdad este soy nuevo utilizando AJAX en laravel y pues no se cual es mi falla, de todas formas les agradezco de antemano cualquier referencia que me pueda ayudar gracias.

 public function chart( Request $request){

      if($request->ajax()){

        $this->validate($request,[

            'desde' => 'required|date',
            'hasta' => 'required|date'
        ]);

          $remolienda = Dataremolienda::select('m200', 'm200lab', 'scheduled_date'
      , 'm400', 'm400lab')
            ->whereBetween('scheduled_date', [$request->desde, $request->hasta])
            ->get();

      $data = [];
      $data ['fecha'] = $remolienda->pluck('scheduled_date');

      $series1['data']= $remolienda->pluck('m200');
      $series2['data']= $remolienda->pluck('m200lab');
      $series3['data']= $remolienda->pluck('m400');
      $series4['data']= $remolienda->pluck('m400lab');

      $series[] = $series1;
      $series[] = $series2;
      $series[] = $series3;
      $series[] = $series4;

      $data['series'] = $series;

     //  return $data;

         return response()->json(['data'=>$data]);
        }else{

          abort(401);
        }
    

    }

1 respuesta 1

0

A series de echarts debes pasarle un array de números, como los que tienes en el atributo data dentro de cada objeto del atributo series del json que te devuelve el servidor. En cambio le estás pasando directamente todo el array de objetos.

O sea, en vez de:

// ...
series: [{
    // ...
    data: datachart["series"]
},
//...
]
//...

Debes pasarle sólo el array que tienes en el data de cada objeto. Por ejemplo:

// ...
series: [{
    // ...
    data: datachart["series"][0]["data"]
},
//...
]
//...

Aquí un snippet de cómo quedaría en tu código con el json que muestras en la imagen:

var datachart = {
    fecha: [
        "2019-07-14",
        "2019-08-30",
        "2019-09-08",
        "2019-10-12"
    ],
    series: [
        {
            data: [9,4,11.4,11.5]
        },
        {
            data: [5.7,9.45,8.4,1.4]
        },
        {
            data: [14.4,1.9,1.9,9.9]
        },
        {
            data: [4.7,4.7,3.9,7.9]
        }
    ]
};

var echartLine = echarts.init(document.getElementById('echart_line'));

echartLine.setOption({
    title: {
        text: 'PSI Remolienda',
        subtext: 'Comparación Muestras'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 220,
        y: 40,
        data: ['% M + 200-PSI', '% M + 200-LAB', '% M + 400-PSI', '% M + 400-LAB']
    },
    toolbox: {
        show: true,
        feature: {
        magicType: {
            show: true,
            title: {
            line: 'Line',
            bar: 'Bar',
            stack: 'Stack',
            tiled: 'Tiled'
            },
            type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
            show: true,
            title: "Restore"
        },
        saveAsImage: {
            show: true,
            title: "Save Image"
        }
        }
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: datachart['fecha']
    }],
    yAxis: [{
        type: 'value',
    }],
    series: [{
        name: '% M + 400-PSI',
        type: 'line',
        smooth: true,
        itemStyle: {
        normal: {
            areaStyle: {
                type: 'default'
            }
        }
        },
        data: datachart["series"][0]["data"]
    },{
        name: '% M + 400-LAB',
        type: 'line',
        smooth: true,
        itemStyle: {
        normal: {
            areaStyle: {
                type: 'default'
            }
        }
        },
        data:  datachart["series"]
    }, {
        name: '% M + 200-LAB',
        type: 'line',
        smooth: true,
        itemStyle: {
        normal: {
            areaStyle: {
                type: 'default'
            }
        }
        },
        data: datachart["series"][1]["data"]
    }, {
        name: '% M + 200-PSI',
        type: 'line',
        smooth: true,
        itemStyle: {
        normal: {
            areaStyle: {
                type: 'default'
            }
        }
        },
        data: datachart["series"][2]["data"]
    }, {
        name: '% M + 400-LAB',
        type: 'line',
        smooth: true,
        itemStyle: {
        normal: {
            areaStyle: {
                type: 'default'
            }
        }
        },
        data: datachart["series"][3]["data"]
    }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts-en.min.js"></script>

<div id="echart_line" style="width: 600px;height:400px;"></div>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.