Has anyone had success dynamically creating a Chart.js OHLC financial chart from a JSON array? In this case, I'm using an Ajax call to import the data from a Django model:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="..\static\stocks\js\chart.js" type="text/javascript"></script>
<canvas id="myChart" width="300" height="175"></canvas>
<script>
let priceArray = []
const endpoint2 = '/api/stockArray/'
$.ajax({
method: 'GET',
url: endpoint2,
success: function(stockArray){
priceArray = stockArray
setChart(priceArray)
}
})
function setChart() {
let testClose = priceArray.map(e => e.data_close)
let testLabels = priceArray.map(e => new Date(e.data_date).setHours(0, 0, 0, 0))
let testOpen = priceArray.map(e => e.data_open)
let testHigh = priceArray.map(e => e.low)
let testLow = priceArray.map(e => e.high)
const data = {
labels: [],
datasets: [{
type: 'ohlc',
label: 'Stocks',
backgroundColor: '#ffffff',
borderColor: '#000000',
data: [
{
x: testLabels,
o: testOpen,
h: testHigh,
l: testLow,
c: testClose,
}
]
}]
}
const config = {
data,
options: {
scales: {
x: {
type: 'timeseries',
time: {
unit: 'day'
}
},
y: {
beginAtZero: true,
max: 3
}
}
}
};
new Chart(
document.getElementById('myChart'),
config
);
}
</script>
I've followed this tutorial (https://www.youtube.com/watch?v=Mzt7IOKnhDw) and successfully created a static OHLC chart. I've also successfully populated a Chart.js line and bar chart dynamically from the same array. In the case of the OHLC chart, I keep getting a RangeError with an Invalid Time Value from the chartjs-adapter-date-fns.bundle. I've tried three methods of populating the x scale from the date values (stored as testLabels) in the array:
let testLabels = priceArray.map(e => new Date(e.data_date).setHours(0, 0, 0, 0))
let testLabels2 = priceArray.map(e => new Date(e.data_date))
let testLabels3 = priceArray.map(e => e.data_date)
Same error every time. If I log these, the values show as
- testLabels = [1450328400000, 1450846800000...]
- testLabels2 = [Thu Dec 17 2015 19:00:00 GMT-0500 (Eastern Standard Time), Wed Dec 23 2015 19:00:00 GMT-0500 (Eastern Standard Time)...]
- testLabels3 = ['2015-12-18', '2015-12-24'...]
I'll add one more caveat that's throwing me off. If you populate the chart with static values, this code works:
data: [
{
x: new Date ('2022-08-10').setHours(0, 0, 0, 0),
o: 1.00,
h: 1.35,
l: 0.90,
c: 1.20,
},
{
x: new Date ('2022-08-11').setHours(0, 0, 0, 0),
o: 1.00,
h: 1.35,
l: 0.90,
c: 1.20,
}
]
However, if you only pass one object, the chart appears blank:
data: [
{
x: new Date ('2022-08-10').setHours(0, 0, 0, 0),
o: 1.00,
h: 1.35,
l: 0.90,
c: 1.20,
}]
Makes me think it's not entirely a date/time issue with the axis. The tutorial only came out a month ago, so maybe this plugin still needs some development. I'm happy to explore other js libraries, but this is the exact chart style I'm looking for. Happy to provide any additional information. Thanks in advance.