Tengo un gráfico de líneas AM Charts con varios gráficos que estoy cargando desde una URL. Esto funciona muy bien con el cargador de datos que extrae json para los datos, sin embargo, estoy tratando de que el script cargue también los datos del "gráfico" dinámico. Probé la solución AQUÍ pero no se muestra en el navegador.

EDITAR: arreglé el javascript (tenía un corchete adicional) ahora se muestra en el navegador, los puntos de datos están allí, pero no son visibles y no está pintando líneas.

¿Alguien tiene alguna sugerencia?

Css

<!-- Styles -->
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
    width: 100%;
    height: 100%;
}
</style>'

Javascript

 <!-- Chart code -->
 <script>
 var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataLoader": {
    "url": "http://127.0.0.1:5000/rate_json.json",
    "format": "json",
    "complete": function(chart) {
       //get potential valueFields after filtering out the categoryField
       var valueFields = Object.keys(chart.dataProvider[0]).filter(function(value) {
         return value !== chart.categoryField;
       })
      //create the graphs
       valueFields.forEach(function(valueField) {
         chart.graphs.push({
           "valueField": valueField,
           "type": "serial",
           "balloonText": "[[category]]: <b>[[value]]</b>",
           "fillAlphas": 0.8,
           "lineAlphas": 0.2
         })
       });
     }
   },
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "month",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0
  },
  "legend": {},
  "export": {
    "enabled": true
    },
  "menu": [ {
    "class": "export-main",
    "menu": [ "PNG", "JPG", "CSV" ]
  } ]
});

</script>

Html

<!-- Resources -->
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script>
<link rel="stylesheet" href='https://www.amcharts.com/lib/3/plugins/export/export.css' type='text/css' media='all'/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/dataloader-3.19.0.min.js"></script>

<div id="chartdiv"></div>

Si utilizo el siguiente javascript, funciona perfectamente, pero necesito poder agregar / eliminar tiendas dinámicamente

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataLoader": {
    "url": "http://127.0.0.1:5000/rate_json.json",
    "format": "json"
  },
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "title": "Store 1216",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "1216"
  }, {
    "title": "Store 6528",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6528"
  },
  {
    "title": "Store 230",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "230"
  },{
    "title": "Store 6538",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6538"
  },{
    "title": "Store 6514",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6514"
  },{
    "title": "Store 1297",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "1297"
  },
  {
    "title": "Store 6299",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6299"
  },{
    "title": "Store 5830",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "5830"
  },{
    "title": "Average",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "Average"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "month",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0
  },
  "legend": {},
  "export": {
    "enabled": true
    },
  "menu": [ {
    "class": "export-main",
    "menu": [ "PNG", "JPG", "CSV" ]
  } ]
});

</script>

Datos

    [{"month": "February", "1216": 22.8, "6528": 23.65, "230": 23.61, "6538": 23.43, "6514": 23.21, "1297": 23.14, "6299": 23.11, "5830": 22.71, "Average": 23.21}, {"month": "March", "1216": 20.01, "6528": 22.61, "230": 23.67, "6538": 22.54, "6514": 22.91, "1297": 23.59, "6299": 13.87, "5830": 22.7, "Average": 21.49}, {"month": "April", "1216": 24.67, "6528": 24.64, "230": 22.7, "6538": 40.89, "6514": 38.18, "1297": 41.98, "6299": 23.19, "5830": 38.8, "Average": 37.51}, {"month": "May", "1216": 22.8, "6528": 23.65, "230": 23.61, "6538": 23.43, "6514": 23.21, "1297": 23.14, "6299": 23.11, "5830": 22.71, "Average": 23.21}, {"month": "June", "1216": 20.01, "6528": 22.61, "230": 23.67, "6538": 22.54, "6514": 22.91, "1297": 23.59, "6299": 13.87, "5830": 22.7, "Average": 21.49}, {"month": "July", "1216": 21.67, "6528": 21.64, "230": 25.7, "6538": 40.89, "6514": 38.18, "1297": 41.98, "6299": 23.19, "5830": 38.8, "Average": 37.51}, {"month": "August", "1216": 22.8, "6528": 23.65, "230": 23.61, "6538": 23.43, "6514": 23.21, "1297": 23.14, "6299": 23.11, "5830": 22.71, "Average": 23.21}, {"month": "Sept", "1216": 20.01, "6528": 22.61, "230": 23.67, "6538": 22.54, "6514": 22.91, "1297": 23.59, "6299": 13.87, "5830": 22.7, "Average": 21.49}, {"month": "Oct", "1216": 14.67, "6528": 16.64, "230": 27.7, "6538": 20.9, "6514": 22.18, "1297": 21.84, "6299": 15.19, "5830": 18.8, "Average": 21.99}]

Ejemplo al trabajar: ingrese la descripción de la imagen aquí

0
paliaso 23 oct. 2019 a las 23:14

1 respuesta

La mejor respuesta

El problema es cómo está creando los gráficos: no hay type: "serial" en un objeto AmGraph, ya que ese valor se usa para el tipo de gráfico. En un objeto AmGraph, type se puede establecer en "line "," columna "," paso "," línea suavizada "," vela "y" ohlc ". Arreglar el tipo arreglará su gráfico.

"complete": function(chart) {
   //get potential valueFields after filtering out the categoryField
   var valueFields = Object.keys(chart.dataProvider[0]).filter(function(value) {
     return value !== chart.categoryField;
   })
  //create the graphs
   valueFields.forEach(function(valueField) {
     chart.graphs.push({
       "valueField": valueField,
       "title": valueField, //added to show labels next to legend markers
       "type": "line", //type should be line, not serial
       "balloonText": "[[category]]: <b>[[value]]</b>",
       "lineAlphas": 0.2
     })
   });
 }

Demo

1
xorspark 30 oct. 2019 a las 00:54