Techiio-author
Started by Swarnalata RoydebJun 2, 2022

Open
How to connect a csv file with fetch in chart JS with Nodejs?

4 VIEWES 1 LIKES 0 DISLIKES SHARE
1 LIKES 0 DISLIKES 4 VIEWES SHARE

Anyone please help me!

1 Replies

Techiio-commentatorSoumya Parida replied 2 months ago1 likes0 dislikes

<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>

<script>
const xlabel=[];
const ytemp=[];
chartIt();

async function chartIt(){
await getDatach();

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
type: 'line',
data: {
labels:xlabel,
datasets: [{
label: 'some data',
data: ytemp,
fill:false,
backgroundColor: 'rgba(255, 99, 132, 0.2)' ,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
}
});

}

async function getDatach(){

const response = await fetch('ZonAnn.Ts+dSST.csv');
const data=await response.text();

const table=data.split('\n').slice(1);
table.forEach(row => {
const columns=row.split(',');
const year=columns[0];
xlabel.push(year);
const temp=columns[1];
ytemp.push( parseFloat (temp)+14);

});

}
</script>

</body>
</html>

You must be Logged in to reply
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance