1

I currently have a graph that I am displaying information on via a CSV file. What I would like to do is change the CSV file depending on which drop down selection the user has chosen. EG - If the user selection is "TestData1" it will display the data from test_data.csv. If the selection is "TestData2", it will display the data from test_data2.csv and so on. I would like to be able to add as many drop down options and external csv files as I wish.

Currently the code works to display chart, but I can't figure out how to get it to work with the dropdown selector. I have tried the solution found at d3js dynamic csv switch from dropdown list but unfortunately it did not work for me.

Here is my code so far -


    <select name="csvGraphSelector" class="input">
        <option value="test_data">TestData1</option>
        <option value="test_data2">TestData2</option>
    </select>

    <canvas id="chart"></canvas>

<script>
function makeChart(cvcGraph) {

    var cvcGraphLabels = cvcGraph.map(function(d) {
        return d.Time;
    });

    var cvcGraphData = cvcGraph.map(function(d) {
        return +d.Bandwidth;
    });

    var chart = new Chart('chart', {

        type: "line",

        responsive: true,

        options: {
            maintainAspectRatio: true,
            legend: {
                display: false
            },
            elements: {
                point: {
                    radius: 2
                }
            },
            scales:{
                xAxes:[{
                    gridLines: {
                        display: false,
                        drawBorder: true
                    },
                    ticks: {
                        display: true,
                        autoSkip: true,
                        maxTicksLimit: 12
                    }
                }],
                yAxes:[{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        display: true,
                        autoSkip: true,
                        maxTicksLimit: 3,
                        suggestedMin: 0,
                        beginAtZero: true,
                        max: 100,
                        padding: 30
                    }
                }]
            }

        },
        data: {
            labels: cvcGraphLabels,
            datasets: [{
                data: cvcGraphData,
                fill: true,
                borderColor: "#333",
                borderWidth: 2,
                backgroundColor: "#fff",
                pointBackgroundColor: "#333",
                pointBorderColor: "#fff",
                pointBorderWidth: 1
            }]  
        }

    });

}

d3
    .csv("/assets/test_data.csv")
    .then(makeChart);

</script>

Any help would be greatly appreciated.

Thanks.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.