I have created 2 pie charts but the 1st pie chart is not showing the data. The 2nd one works fine. When i remove the 2nd pie chart, the 1st one works.
Any idea what went wrong ? I have indicated different variable names for each pie chart.
HTML code
<body>
<section>
<!-- first pie chart-->
<h2>Search terms "Seabass" in NYC restaurants sort by most reviewed</h2>
<h3>Data collected among 120 Yelp reviews that words mentioned seafood, fish, bass, chilean</h3>
<select id="selDataset" onchange="getData(this.value)">
<option value="dataset1">No.1 Joe's shanghai's @ 6158 reviews</option>
<option value="dataset2">No.2 Eataly's @ 5499 reviews</option>
<option value="dataset3">No.3 Ippudo's @ 3676 reviews</option>
</select>
<div id="pie"></div>
<script src="plots.js"></script>
</section>
<p>===========================================================================</p>
<section>
<!-- Second pie chart-->
<h2>Search terms "Seabass" in NYC restaurants sort by most recommended</h2>
<h3>Data collected among 120 Yelp reviews that words mentioned seafood, fish, bass, chilean</h3>
<select id="selDataset2" onchange="getData2(this.value)">
<option value="dataset4">No.1 Fish cheek</option>
<option value="dataset5">No.2 Kotobuki</option>
<option value="dataset6">No.3 Midtown catch</option>
</select>
<div id="pie2"></div>
<script src="plots2.js"></script>
</div>
</section>
</body>
JavaScript code below
var data = [{
values: [0, 0, 20, 6],
labels: ["Bass", "Chilean", "Fish", "Seafood"],
type: "pie"
}];
var layout = {
height: 600,
width: 800
};
Plotly.plot("pie", data, layout);
}
function updatePlotly(newdata) {
var PIE = document.getElementById("pie");
Plotly.restyle(PIE, "values", [newdata]);
}
function getData(dataset) {
var data = [];
switch (dataset) {
case "dataset1":
data = [0, 0, 20, 6];
break;
case "dataset2":
data = [0, 0, 4, 7];
break;
default:
data = [0, 0, 0, 0];
}
updatePlotly(data);
}