Select rectangle by fill color with jquery in google timeline chart?

Question

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>

score 0 · Answer 1 · answered Oct 27 '21 at 19:34

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))

Select rectangle by fill color with jquery in google timeline chart?

1 Answers1