I’ve created a chart and want to use radio buttons to allow the user to pick between two colour options. The ‘normal’ colour scheme will be one set of colours and the accessible colour scheme will be a different set of colours for the BackgroundColor and BorderColor.
I have tried to look for an existing answer online but can’t seem to find it. I would like it to be similar to this example but with the bar colours changing rather than the graph type. I just can’t work out the code for it.
Any help would be appreciated!
function myAjaxFunction(){
$(document).ready(function (){
var selection= document.getElementById('Console').value;
var link = "https:/Assignment-1/process.php?Console='"+selection+"'";
var backgroundcolour1 = '#0B5394';
var bordercolour1 = '#04213b';
var backgroundcolour2 = '#b5cbde';
var bordercolour2 = '#5486b4';
$.ajax({
url: link,
method: "GET",
success: function(data=this.responseText) {
console.log(data);
var Price = [];
var Model = [];
var Member = [];
for(var i in data) {
Price.push(data[i].Price);
Model.push(data[i].Model);
Member.push(data[i].Member);
}
var universalOptions = {
maintainAspectRatio: false,
responsive: false,
title: {
display: true,
text: 'Console comparison price',
fontWeight:"bold",
fontColor: "black",
fontSize: 20
},
legend: {
display: true,
fontColor: "black",
labels:{
fontSize:14,
fontColor: "black"
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display:true,
labelString: 'Console price in pounds',
fontColor:"black",
fontSize: 16
},
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 50,
max: 500,
fontSize: 14,
fontColor: "black"
}
}],
xAxes: [{
display:true,
scaleLabel: {
display:true,
labelString: 'Console models',
fontColor:"black",
fontSize: 16
},
ticks: {
fontSize: 14,
fontColor: "black"
}
}],
}
}
var chartdata = {
labels: Model,
datasets : [
{
label: 'Price',
data: Price,
backgroundColor: [backgroundcolour1,backgroundcolour1,backgroundcolour1],
borderWidth: '2',
borderColour: [bordercolour1,bordercolour1,bordercolour1],
hoverBorderColor: 'darkblue'
},
{
label: 'Member price',
data: Member,
backgroundColor: [backgroundcolour2,backgroundcolour2,backgroundcolour2],
borderWidth: '2',
borderColour: [bordercolour2,bordercolour2,bordercolour2],
hoverBorderColor: 'darkblue'
}
]
};
var chart1 = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var barGraph = new Chart(
chart1, {
type: 'bar',data: chartdata, options: universalOptions
}
);
$('select').on('change',function(){
barGraph.destroy();
})
},
error: function(data) {
console.log(data);
}
});
});
}<!DOCTYPE html>
<html>
<head>
<title>Assignment 1</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript" src="chart1.js"></script>
<?php include "connection.php";?>
</head>
<body>
<select id = "Console" onchange=myAjaxFunction();>
<?php
$sql="SELECT DISTINCT Console FROM game_consoles";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_assoc($result)){
echo "<option value='".$row['Console']."'>".$row['Console']."</option>";
}
?>
</select><br><br>
<script type="text/javascript" src="graphcolours.js"></script>
<input onclick="chartcolour1()" type="radio" value="normal" name="chartcolour"> Normal Colour Scheme
<input onclick="chartcolour2()" type="radio" value="accessible" name="chartcolour"> Accessible Colour Scheme
<br><br>
<canvas id="myChart"></canvas><br>
<script type = "text/javascript" src="chartstyle.js"></script>
</body>
</html>function chartcolour1(){
backgroundcolour1 = '#0B5394';
bordercolour1 = '#04213b';
backgroundcolour2 = '#b5cbde';
bordercolour2 = '#5486b4';
barGraph.update();
};
function chartcolour2(){
backgroundcolour1 = '#0B5394';
bordercolour1 = '#04213b';
backgroundcolour2 = '#D81B60';
bordercolour2 = '#C7084E';
barGraph.update();
};