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.