Let's say for example, I have this timeline (see snippet).
This snippet contains this rectangle.
<rect x="95" y="9" width="383" height="22.991999999999997" stroke="#4bbdde" stroke-width="1" fill="#4bbdde"></rect>
What I want to do is select this rectangle and get some information from it. For the sake of simplicity, let's say I want to change the fill to black.
What I think should work is this (from JQuery Find Elements By Background-Color):
<script>
var rects = $('rect').filter(function() {
var match = '#4bbdde';
return ( $(this).css('fill').toLowerCase() == match );
}).css('fill', '#000000'); // change background color of all black spans
</script>
I noticed that I can definitely select and recolor any rectangle with this.
<Script>
$('rect').css('fill', '#000000');
</Script>
I would add this as a snippet, but for some reason I can't get it to work in the snippet, but this does work in my project.
How can I select just the with a certain fill?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'Bar'});
dataTable.addColumn({ type: 'string', role: 'style'});
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington','Washington','#4bbdde', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>I found that the following worked to get a list of <rect>'s that matched the color.
var blue= '#4bbdde'
var rects = $('rect')
function checkColor(arr){
var results = [];
for (let i of arr){
colorCheck=$(i).attr('fill')
if(colorCheck == blue){results.push(i)}
};
return results
};
console.log(checkColor(rects))