search

google / google-visualization-issues

288 stars 35 forks source link

Timelines 'colors' option bug: wrong bar color #2876

Open oranego opened 3 years ago

oranego commented 3 years ago

Bars on subsequent rows with the same label as a previous bar get that bar's color rather than the color specified in the 'colors' array.

In this example, per the 'colors' array all bars on the second and following rows should be red, but in fact only those bars that have a unique label are red:

<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('example5.4');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn({ type: 'string', id: 'Role' });
        dataTable.addColumn({ type: 'string', id: 'Name' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
          [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
          [ 'President2', 'George Washington2', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'President2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
          [ 'President2', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
          [ 'President3', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'President3', 'John Adams3', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
          [ 'President3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
          [ 'President4', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'President4', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
          [ 'President4', 'Thomas Jefferson4', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
        ]);

        var options = {
          colors: [
            '#cbb69d', '#603913', '#c69c6e',
            'red', 'red', 'red',
            'red', 'red', 'red',
            'red', 'red', 'red',
          ],
        };

        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="example5.4" style="height: 450px;"></div>
  </body>
</html>
microlabig commented 3 years ago

No, everything works correctly, it only depends on which label you give to column 1 (BAR_LABELS https://developers.google.com/chart/interactive/docs/gallery/timeline#data-format).

Here is my example using https://jsfiddle.net/microlabig/u1rvy9sn/20/

Moreover, it should be noted that the color for the colors option depends on how the BAR_LABELS array is formed. That is, if the first element of the BAR_LABELS array is, for example, potato, the third is tomato, and the colors array is formed as ['orange', red], then all the potato will be colored orange, and the tomato - in red.