I have text data in a example.txt file in the following format
[[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]]
Which I am reading in django view.py file as follows
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)
Loading it in the template as follows
<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>
And javascript main.js file with highchart code as follows
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;
}());
The question is, why is the data not visualizing? If you do console.log(sdata); you see the data, but it is not loading in HighCharts. What could be the reason for this behavior?
Because most probably the data is treated as string and not as a list of list or JSON list, check the types of the dataset in the charts function and you can JSON.parse to load the json from a string
If it is possible, you should change the data format in your file from Date.UTC(1970, 10, 25) to for example: 25660800000 (timestamp in milliseconds).
Live demo: http://jsfiddle.net/BlackLabel/t2rde3bk/
If you need to keep the current format, you can:
data: eval(sdata) - definitely not recommendedLive demo: 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
}]
})
Live demo: http://jsfiddle.net/BlackLabel/voe4q9bf/