Creé una lista y la definí en mi views.py :
mydata = [{'date': '2020-01-02T00:00:00Z', 'value': 13}, {'date': '2020-01-03T00:00:00Z', 'value': 2}, {'date': '2020-01-06T00:00:00Z', 'value': 5}]Quiero agregar mis propios datos en un gráfico de plantilla js en mi archivo HTML:
<script> var chart = am4core.create("chartdiv", am4charts.XYChart); chart.paddingRight = 20; var data = []; var visits = 10; for (var i = 1; i < 50000; i++) { visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); data.push({ date: new Date(2018, 0, i), value: visits }); } chart.data = data; var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.renderer.grid.template.location = 0; dateAxis.minZoomCount = 5; dateAxis.groupData = true; dateAxis.groupCount = 500; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.dateX = "date"; series.dataFields.valueY = "value"; series.tooltipText = "{valueY}"; series.tooltip.pointerOrientation = "vertical"; series.tooltip.background.fillOpacity = 0.5; chart.cursor = new am4charts.XYCursor(); chart.cursor.xAxis = dateAxis; var scrollbarX = new am4core.Scrollbar(); scrollbarX.marginBottom = 20; chart.scrollbarX = scrollbarX; var selector = new am4plugins_rangeSelector.DateAxisRangeSelector(); selector.container = document.getElementById("selectordiv"); selector.axis = dateAxis; </script> Sé que debería cambiar chart.data = data , pero cuando lo reemplacé con chart.data = {{mydata}} , el gráfico no mostraba nada. Intenté cambiarlo manualmente: chart.data = [{'date': '2020-01-02T00:00:00Z', 'value': 13}, {'date': '2020-01-03T00:00:00Z', 'value': 2}, {'date': '2020-01-06T00:00:00Z', 'value': 5}] y los datos se mostraron correctamente.
Estoy seguro de que importé mydata correctamente en views.py , porque probé {{mydata}} en el archivo HTML, mostró la lista completa. También probé chart.data = {mydata} , chart.data = mydata y chart.data = [mydata] , pero ninguno funcionó.
Lo resolví por mi cuenta.
En el área del gráfico, simplemente usé:
chart.data = {{ mydata | safe }}