0

estoy intentando mostrar unos datos extraidos de mi BD en un grafico de amchart, transformo la variable en json, pero al momento de recorrerla, obtengo el error Uncaught SyntaxError: Unexpected token ':', en la consola del navegador, estoy realizando esto con laravel 8, este es el codigo:

<script>
    am4core.ready(function() {
    
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.padding(40, 40, 40, 40);
    
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = "network";
    categoryAxis.renderer.minGridDistance = 1;
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.disabled = true;
    
    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryY = "network";
    series.dataFields.valueX = "MAU";
    series.tooltipText = "{valueX.value}"
    series.columns.template.strokeOpacity = 0;
    series.columns.template.column.cornerRadiusBottomRight = 5;
    series.columns.template.column.cornerRadiusTopRight = 5;
    
    var labelBullet = series.bullets.push(new am4charts.LabelBullet())
    labelBullet.label.horizontalCenter = "left";
    labelBullet.label.dx = 10;
    labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.0as')}";
    labelBullet.locationX = 1;
    
    // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
    series.columns.template.adapter.add("fill", function(fill, target){
      return chart.colors.getIndex(target.dataItem.index);
    });
    
    categoryAxis.sortBySeries = series;
    var products = {!! json_encode($products->toArray()) !!};
    chart.data = [

        products.forEach(product => {
            {
            "network": product.name,
            "MAU": parseInt(product.totalcantidad)
            },
        })

      ]
    
    }); // end am4core.ready()
</script>

Cabe recalcar que puedo recorrer sin ningun problema el objeto, el problema es cuando pongo el codigo dentro de los corchetes "{}" de chart.data, como puedo solucionarlo?. Gracias

1 respuesta 1

0

Solucione el problema, usando un for y añadiendo los datos que queria al objeto chart.data:

var products = {!! json_encode($products->toArray()) !!};    

    for(var i = 0; i < products.length; i++) {
        var obj = products[i];

        chart.data[i] ={
              "network": products[i].name,
              "MAU": products[i].totalcantidad
            }
      }

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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