Tengo datos de texto en un archivo example.txt en el siguiente formato
[[Date.UTC(1970, 10, 25), 0], [Date.UTC(1970, 11, 6), 0.25], [Date.UTC(1970, 11, 20), 1.41], [Date.UTC(1970, 11, 25), 1.64], [Date.UTC(1971, 0, 4), 1.6]]Que estoy leyendo en el archivo django view.py de la siguiente manera
filepath = os.getcwd() f = open(filepath+"/main/static/main/data/example.txt", "r") dataset = f.read() def home(request): context = {'dataset': dataset} return render(request, 'main/home.html', context)Cargándolo en la plantilla de la siguiente manera
<script src="https://code.highcharts.com/highcharts.js"></script> <div id='dataset' data-dataset={{ dataset }} style="width:100%; height:500px;"></div> <script type="text/javascript" src="{% static 'main/js/main.js' %}" ></script>Y el archivo javascript main.js con el código highchart de la siguiente manera
const app_control = (function() { var sdata; var init_charts; /* VARIABLES INITIALIZATIONS */ /* DEFINE THE FUNCTIONS */ /* Initialize Functions */ init_charts = function(sdata){ const chart = Highcharts.chart('container', { chart: { type: 'spline' }, title: { text: 'Example Data from ' }, xAxis: { type: "datetime", title: { text: 'Date' } }, yAxis: { title: { text: 'Data in Y Axis' } }, colors: ['#06C'], series: [{ name:'Visualized Data', data: sdata }] }) } /* PUBLIC INTERFACE */ public_interface = {}; /* RUN THE FUNCTIONS */ $(function(){ sdata = $('#TimeSeries').data('dataset'); init_charts(sdata); }); return public_interface; }());La pregunta es, ¿por qué no se visualizan los datos? Si haces console.log(sdata); ve los datos, pero no se cargan en HighCharts. ¿Cuál podría ser la razón de este comportamiento?
Debido a que lo más probable es que los datos se traten como una cadena y no como una lista de listas o una lista JSON, verifique los tipos del conjunto de datos en la función de gráficos y puede JSON.parse para cargar el json desde una cadena
Si es posible, debe cambiar el formato de datos en su archivo de Date.UTC(1970, 10, 25) a, por ejemplo: 25660800000 (marca de tiempo en milisegundos).
Demostración en vivo: http://jsfiddle.net/BlackLabel/t2rde3bk/
Si necesita mantener el formato actual, puede:
data: eval(sdata) - definitivamente no recomendadoDemostración en vivo: http://jsfiddle.net/BlackLabel/z45anjo7/
const rows = sdata.split('Date.UTC(').slice(1); const parsedData = []; rows.forEach(row => { const splitted = row.split('),'); const date = splitted[0]; const y = splitted[1].split(']')[0]; parsedData.push([ Date.UTC(...date.split(',')), +y ]); }); const chart = Highcharts.chart('container', { ..., series: [{ data: parsedData }] })Demostración en vivo: http://jsfiddle.net/BlackLabel/voe4q9bf/