Getting Data from a CSV into Dataview JS

Help
1

What I’m trying to do

So, I want to create some diagrams/chars from a CSV file using Dataview and Charts plugin.
Currently I am trying to count the number of appearances of certain words/strings in the CSV, and then display them in a a bar chart.

This is what the CSV basic structure is.

Date, Daytime, WokeUpOnTime, Exception
15 05 2024 , Morning , Yes , Exception: None
16 05 2024 , Morning , No , Exception: None

This is my code so far:


const data = await dv.io.csv("Automated Files/WokeUpOnTime History.csv")


const labels = ['Yes', 'No'];
// iterate over the data dataview array and count how many yes and nos there are
var numOfYes = 0;
var numOfNo = 0;
for(var i=0;i<data.length;i++){
	//if(data[i] === "Yes")
	console
    if(data[i].WokeUpOnTime.includes("Yes"))
       numOfYes++;
    if(data[i].WokeUpOnTime === " No ")
       numOfNo++;   
}

const chartData = {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
		label: 'Total',
	    data: [numOfYes, numOfNo],
	    backgroundColor: [
        'rgba(255, 99, 132, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)'
      ],
      borderWidth: 1
    }]
  }
}
window.renderChart(chartData, this.container)

Currently it throws this exception:
Evaluation Error: TypeError: Cannot read properties of undefined (reading ‘includes’)
at eval (eval at (plugin:dataview), :15:29)
at async DataviewJSRenderer.render (plugin:dataview:18922:13)

Things I have tried

I tried using the “contains” function from Dataview JS but it just threw a similar error just instead of ‘includes’ now with ‘contains’

In the Dataview documentation includes is listed as a function for data arrays, so I guess my syntax is just way off here, but I can’t figure it out how it should look.

2

CSV has a “strange” structure—a lot of spaces. This is the first thing that caught my eye.

Try this:

const data = await dv.io.csv("Automated Files/WokeUpOnTime History.csv");

const labels = ['Yes', 'No'];
let numOfYes = 0;
let numOfNo = 0;

for (let i = 0; i < data.length; i++) {
    // Trim spaces and check WokeUpOnTime value
    const wokeUpOnTime = data[i].WokeUpOnTime?.trim();
    
    if (wokeUpOnTime === "Yes") {
        numOfYes++;
    } else if (wokeUpOnTime === "No") {
        numOfNo++;
    }
}

const chartData = {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Total',
            data: [numOfYes, numOfNo],
            backgroundColor: ['rgba(255, 99, 132, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)'],
            borderWidth: 1
        }]
    }
};

window.renderChart(chartData, this.container);

Cheers, Marko :nerd_face:

3

Well the good thing is, the error is gone. The problem is, that apparently the loop still doesn’t increase the counters.
image
If I manually increase the counters (let numOfYes = 10;
let numOfNo = 2; for example) then it displays those.
image

4

This …

const data = [
    { Date: "15 05 2024", Daytime: "Morning", WokeUpOnTime: "Yes", Exception: "None" },
    { Date: "16 05 2024", Daytime: "Morning", WokeUpOnTime: "No", Exception: "None" },
    { Date: "17 05 2024", Daytime: "Morning", WokeUpOnTime: "No", Exception: "None" },
    { Date: "18 05 2024", Daytime: "Morning", WokeUpOnTime: "No", Exception: "None" },
    { Date: "19 05 2024", Daytime: "Morning", WokeUpOnTime: "No", Exception: "None" },
    { Date: "20 05 2024", Daytime: "Morning", WokeUpOnTime: "No", Exception: "None" },
    { Date: "21 05 2024", Daytime: "Morning", WokeUpOnTime: "No", Exception: "None" }
];

const labels = ['Yes', 'No'];
let numOfYes = 0;
let numOfNo = 0;

for (let i = 0; i < data.length; i++) {
    const wokeUpOnTime = data[i].WokeUpOnTime.trim();
    
    if (wokeUpOnTime === "Yes") {
        numOfYes++;
    } else if (wokeUpOnTime === "No") {
        numOfNo++;
    }
}

const chartData = {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Total',
            data: [numOfYes, numOfNo],
            backgroundColor: ['rgba(255, 99, 132, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)'],
            borderWidth: 1
        }]
    }
};

window.renderChart(chartData, this.container);

… is giving me this …

image
image881×449 2.55 KB

Cheers, Marko :nerd_face:

5

When I take your const data it works as well, is there a way to look at how the Array / the objects from the CSV look like after the import? I am very new to this, so I haven’t looked if there is a console output or anything where I can check the data.

I just assumed from the docks that it would take the Column Headers as Keys, but then the key should be WokeUpOnTime, right?

6

Okay, a bit more testing revealed the problem, and you were right with ‘the CSV has a “strange” structure-a lot of spaces’. The problem was that the headers aren’t “Daytime” or “WokeUpOnTime”, rather they are " Daytime" and " WokeUpOnTime", with a space in front of them. Removing those spaces fixed it, lol.
Thanks for your help DiCaver, you saved me so much time!

1 Like
7

I forgot to follow up … but anyway, I wouldn’t find out about the headers problem :smiley:

I’m happy that you got back on track! Good luck with whatever is next in your project :slight_smile:

Cheers, Marko :nerd_face: