select data by clicking buttons, then combine associated CSVs into one array

I’m creating an interface where a user can click on buttons that have the names … Read more select data by clicking buttons, then combine associated CSVs into one array

I’m creating an interface where a user can click on buttons that have the names of CSVs in order to see the combined data they select charted.

I’ve set it up so that each button click adds the name of a CSV to an array (called chosenData). Then I’m using a for loop to cycle through the chosenData array, grab the data from github, and push all of the data into another array called allData.

However, the data doesn’t combine correctly. I’ve been pulling my hair out over this problem for hours and haven’t been able to resolve it, so any help would be greatly appreciated!

Code below. Here’s also a jsfiddle

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <title>combine CSVs</title>
</head>

<body>
    <button id="arr1" class="button">arr1</button>
    <button id="arr2" class="button">arr2</button>
    <button id="arr3" class="button">arr3</button>
    <button id="arr4" class="button">arr4</button>
    <button id="arr5" class="button">arr5</button>
    <script>

                var parseTime = d3.timeParse("%Y-%m")

        let chosenData = []
        let allData = []

        $('.button').on('click', d => {
            let data = event.target.id
            console.log(data)
            chosenData.push(data)
            console.log('chosenData', chosenData)
            obtainData(chosenData)
        })

        function obtainData(chosenData) {
            for (i = 0; i < chosenData.length; i++) {
                let arrayName = chosenData[i]
                let dailyData = axios.get("https://raw.githubusercontent.com/sprucegoose1/sample-data/main/" + chosenData[i] + ".csv")
                    .then(content => {
                        let single = content.data
                        let singleCSV = d3.csvParse(single)

                        singleCSV.forEach(d => {
                            d.value = +d.value
                            d.interval = +d.interval
                            d.time = +d.time
                            d.code = arrayName
                            d.date = parseTime(d.date);
                        })
                        console.log('single data', singleCSV)

                        allData.push(singleCSV)
                    })
            }
            const merge = allData.flat(1);
            chartData(merge);
        }

        function chartData(allData) {
            console.log('all data', allData)
            // create a chart with combined data here
        }

    </script>
</body>

</html>

Source: JavaSript – Stack Overflow


Categories: NewsTags: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *