Django Time Series with Chart JS - django

Question

I'm building a Django app that is dynamically feeding data to Chart JS. because I'm trying to join two line series together (historical values and predictions), I'm trying to have Chart JS understand NaN. This is how the code is written:
<script>
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: {{ new_dates|safe }},
datasets: [
{
data: {{ orig_val|safe }},
label: "Historical Sales",
borderColor: "#3e95cd",
fill: false
},
{
data: {{ preds|safe }},
label: "Predictions",
borderColor: "#22DD66",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'output chart'
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
},
animation: {
duration: 2000,
},
}
});
</script>
This is what the console sees:
<script>
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09'],
datasets: [
{
data: [71.0, 67.0, 84.0, 65.0, 78.0, 74.0, 73.0, 88.0, 86.0, 77.0, 94.0, 123.0, 71.0, 77.0, 57.0, 36.0, 57.0, 78.0, 89.0, 100.0, 120.0, 98.0, 121.0, 155.0, 99.0, 86.0, 162.0, 103.0, 102.0, 117.0, 114.0, 121.0, 127.0, 128.0, 141.0, 175.0, 124.0, 121.0, 139.0, nan, nan, nan, nan, nan, nan],
label: "Historical Sales",
borderColor: "#3e95cd",
fill: false,
spanGaps: true
},
{
data: [nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, 100.2935, 154.556, 122.833, 109.4725, 160.0235, 104.568],
label: "Predictions",
borderColor: "#22DD66",
fill: false,
spanGaps: true
}
]
},
options: {
title: {
display: true,
text: 'output chart'
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
},
animation: {
duration: 2000,
},
}
});
</script>
But, I keep getting this error:
Uncaught ReferenceError: nan is not defined
at (index):40:282
these "nan's" are generated by Python using Numpy, like this: y_hat = np.append(y, np.zeros(6) + np.nan).tolist()
it seems that Chart JS does know how to read "null" values, I just don't know how to make the conversion from Python to something that Chart JS can actually read.
Any ideas?
Thanks!

Answer 1

answered my own question. just needed to convert the array to strings using .astype(str). so like this: np.append(np.zeros(39) + np.nan, array_of_numbers).astype(str)