Skip to content

Instantly share code, notes, and snippets.

@viniciusmelocodes

viniciusmelocodes/bar.html

Last active September 19, 2018 18:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save viniciusmelocodes/d2a183a98a3789bfb73e072c3b5fa45e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save viniciusmelocodes/d2a183a98a3789bfb73e072c3b5fa45e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bar.html
<!doctype html>
<html>
<head>
<title>Barra</title>
<script src="http://www.chartjs.org/dist/2.7.2/Chart.bundle.js"></script>
<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<button id="updateBar">Update</button>
<br>
<br>
<form>
Number:
<select id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<br>
<form>
Number:
<select id="mySelect1">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</form>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
var y = document.getElementById("mySelect1").value;
var z = x + y;
var x2 = x * 2;
var y2 = y * 2;
var z2 = z * 2;
}
</script>
<script>
var color = Chart.helpers.color;
var barChartData = {
labels: ['Barra 1', 'Barra 2', 'Barra 3', 'Barra 4', 'Barra 5', 'Barra 6', 'Barra 7'],
datasets: [{
label: 'Dados 1',
backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
borderColor: window.chartColors.green,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dados 2',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}]
};
// canvas
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Barra'
}
}
});
};
// updateBar
document.getElementById('updateBar').addEventListener('click', function() {
//
barChartData.datasets.pop();
//
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.labels.splice(-1, 1); // remove the label first
//
var x = document.getElementById("mySelect").value;
var y = document.getElementById("mySelect1").value;
var z = Number(x) + Number(y);
var dataLength = barChartData.datasets[0].data.length / 2;
for (var index = 0; index < dataLength; ++index) {
if (index == 0) {
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return x;
});
});
} else if (index == 1) {
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return y;
});
});
} else if (index == 2) {
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return z;
});
});
}
}
window.myBar.update();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment