Menu
I am using chart.js to visualize a sort algorithm. So far I've had no problems implementing it. Now I want to change the color of a single Bar in my Chart and I just can't figure out how to do it.
There is a post which should answer my question, however this solution does not work for me.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.0.0.js"></script>
<script src="script.js"></script>
<script src="jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="jquery-ui.css">
<title>Shell Sort</title>
</head>
<body>
<button class='button' id='fillChart'>Elements</button>
<button class='button' id='sort'>Sort</button>
<canvas height='75' width='300' id='barChart'></canvas>
</body>
</html>
CSS
body{
background-color:#F8FBEF;
}
.button {
position: relative;
background-color: #1C1C1C;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
JS
$(document).ready(function(){
var numbers = [];
//########################---Array Of Random Numbers----########################
function createNumbers(){
numbers = [];
for(var i = 0; i < 6; i++){
var random = Math.floor((Math.random() * 100) + 1);
numbers.push(random);
}
};
//########################---Fill Chart With Array----########################
$('#fillChart').click(function(){
barChart.data.datasets[0].backgroundColor = "rgba(192,192,192,1)";
createNumbers();
console.log('Not Sorted:');
for(var i = 0; i < numbers.length; i++){
console.log(numbers[i]);
}
fillData()
barChart.update();
});
//########################---Fill Data With Array----########################
function fillData(){
for(var i = 0; i < numbers.length; i++){
barChart.data.datasets[0].data[i] = numbers[i];
console.log('Data:' + barChart.data.datasets[0].data[i]);
}
}
//##############################---Sort Array----###############################
$('#sort').click(function(){
shellSort(numbers);
console.log('Sorted');
for(var i = 0; i < numbers.length; i++){
console.log(numbers[i]);
}
fillData();
barChart.datasets[0].bars[0].backgroundColor = "rgba(000,111,111,55)";
barChart.update();
});
//##############################---shellSort----##############################
function shellSort (a) {
for (var h = a.length; h = parseInt(h / 2);) {
for (var i = h; i < a.length; i++) {
var k = a[i];
for (var j = i; j >= h && k < a[j - h]; j -= h)
a[j] = a[j - h];
a[j] = k;
}
}
return a;
}
//##############################---Bar Chart----##############################
var ctx = $('#barChart');
var barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Element 1", "Element 2", "Element 3", "Elemenmt 4", "Element 5"],
datasets: [{
label: 'Sort',
data: [0,0,0,0,0],
backgroundColor: [],
borderColor: [],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
353
Try this:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
As mentioned on Documentation
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
