0👍
Okay i find the answer, had to convert the CSV into Arrays, and arrays into data structure:
<script>
drawChart();
async function drawChart(){
const dataArray = await getData();
const BTCdatapoints = dataArray.DATEdata.map((day,index) => {
let dayObject = {};
dayObject.x = dataArray.DATEdata[index];
dayObject.y = dataArray.BTCdata[index];
return dayObject
})
const VETdatapoints = dataArray.DATEdata.map((day,index) => {
let dayObject = {};
dayObject.x = dataArray.DATEdata[index];
dayObject.y = dataArray.VETdata[index];
return dayObject
})
const TOTALdatapoints = dataArray.DATEdata.map((day,index) => {
let dayObject = {};
dayObject.x = dataArray.DATEdata[index];
dayObject.y = dataArray.TOTALData[index];
return dayObject
})
const data = {datasets: [{
label: 'BTCUSDT',
data: BTCdatapoints
}, {
type: 'bar',
label: 'VETUSDT',
data: VETdatapoints
}, {
type: 'line',
label: 'TOTAL',
data: TOTALdatapoints
}]
}
const config = {
type: 'bar',
data,
options: {
scales: {
x: {
type: "time",
time: {
unit: "day"
}
},
y:{
beginAtZero : true
}
}
}
};
const myChart = new Chart(
document.getElementById("myChart"),
config
);
};
async function getData() {
const DATEdata = [];
const BTCdata = [];
const VETdata = [];
const TOTALData = [];
const url ='example.csv';
const response = await fetch(url);
const tabledata = await response.text();
const table = tabledata.split('\r\n').splice(1);
table.forEach(row =>{
const column = row.split(',');
const date = column[0];
const BTC = column[1];
const VET = column[2];
const TOTAL = column[3];
DATEdata.push(date);
BTCdata.push(BTC);
VETdata.push(VET);
TOTALData.push(TOTAL);
});
return {DATEdata,BTCdata,VETdata,TOTALData};
}
</script>
JS SRC:
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.2/papaparse.min.js"></script>
- Chartjs-Chart.js lost its colors
- Chartjs-How to remove zero values labels using chartjs-plugins-datalabels
Source:stackexchange.com