Im a really beginner of javascript, and having a project where i need to use Plotly.js to visualize data in chart. I'm currently learning on making a basic bar chart. here is my code:
HTML
<head>
<script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
</head>
<body>
<input type="checkbox" id="cb15">2015
<input type="checkbox" id="cb16">2016
<input type="checkbox" id="cb17">2017
<div id='grafik'></div>
</body>
Javascript
var data = [
{
x: ['Banyumanik', 'Gunungpati', 'Mijen', 'Tembalang'],
y: [18, 29, 20, 23],
type: 'bar',
width: '0.5',
marker: {
color: 'red'
}
}
];
function switchBar() {
var cb15 = document.getElementById('cb15');
var cb16 = document.getElementById('cb16');
var cb17 = document.getElementById('cb17');
if (cb15.checked) {
data[0].y = [19,25,16,21];
} else if (cb16.checked) {
data[0].y = [10,23,7,20]
} else if (cb17.checked) {
data[0].y = [21,17,14,26]
}
}
Plotly.newPlot('grafik', data);
Can anybody help me how to make my Bar Chart changing the value based on the checkbox checked? Thankyou very much in advance.