the issue I have now is that I'm trying to use objects in the "data" field of my Chartjs script. This is my code below:
<canvas id="QGL_Chart"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
var interval = window.onload = () => {
var selectedDate;
const buyPriceData = [];
const buyVolData = [];
const sellPriceData = [];
const sellVolData = [];
var ctx = document.getElementById("QGL_Chart").getContext('2d');
ctx.canvas.width = 934;
ctx.canvas.height = 400;
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Line A',
data: [{
x: 90,
y: 90
}, {
x: 20,
y: 96
}, {
x: 15,
y: 97
}]
},
{
label: 'Line B',
data: [{
x: 10,
y: 96
}, {
x: 20,
y: 95.8
}, {
x: 100,
y: 99
}]
}
]
},
options: {
title: {
display: true,
text: 'Equilibrum Graph',
fontSize: 18
},
legend: {
display: true,
position: "bottom"
},
scales: {
xAxes: [{
ticks: {
reverse: false,
// stepSize: 6,
min: 0
}
}]
}
}
});
function refreshCurveData () {
selectedDate = document.querySelectorAll(".buyclass .column-date.sorting_1")[1].textContent;
buyPriceTable = document.querySelectorAll(".buyclass td.column-price");
buyVolTable = document.querySelectorAll(".buyclass td.column-volume");
sellPriceTable = document.querySelectorAll(".sellclass td.column-price");
sellVolTable = document.querySelectorAll(".sellclass td.column-volume");
let i = 0;
do {
var buyPriceData1 = buyPriceTable[i].textContent;
var buyVolData1 = buyVolTable[i].textContent;
var sellPriceData1 = sellPriceTable[i].textContent;
var sellVolData1 = sellVolTable[i].textContent;
buyPriceData[i] = `{x: ${buyPriceData1}, y: ${buyVolData1}}`
sellPriceData[i] = `{x: ${sellPriceData1}, y: ${sellVolData1}}`
//buyPriceData[i] = buyPriceData[i].replace(/"/g, "");
//sellPriceData[i] = sellPriceData[i].replace(/"/g, "");
// buyPriceData.push ({ x: buyPriceData1, y: buyVolData1 });
// sellPriceData.push ({ x: sellPriceData1, y: sellVolData1 });
i++;
}
while ( document.querySelectorAll(".column-date.sorting_1")[i].textContent == selectedDate && i < 9);
}
setInterval(() => {
refreshCurveData();
myChart.update();
},2500);
};
</script>When I replace the codes in the "data" fields with buyPriceData and sellPriceData respectively, the graph does not visualize, I also tried doing:
data: {
datasets: [{
label: 'Line A',
data: Object.values(buyPriceData)
},
{
label: 'Line B',
data: Object.values(sellPriceData)
}
]
},But I still have the same problem, please can someone help me with this?
I've created a pen here: https://codepen.io/scottfranc/pen/BaLGwZK
Thank you.
